2012年8月7日

高性能WEB开发

摘要: 准备写一系列关于高性能WEB开发的日记,主要是跟前端技术相关的(html,http,js,css等),将自己了解的一些知识做1个总结和记录并分享,希望大家能喜欢,也喜欢自己能坚持写下去。当然因个人技术水平有限,写作能力更是非常差,所以如果有什么地方写得不好的,请大家都指点指点。1、HTTP服务器.2... 阅读全文

posted @ 2012-08-07 16:02 FHealth 阅读(148) 评论(0) 推荐(0)

高性能WEB开发系列-了解CSS的查找匹配原理,让CSS更简洁、高效

摘要: 用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:DIV#divBox p span.red{color:red;},按习惯我们对这个CSS的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。匹配原理: 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下: 阅读全文

posted @ 2012-08-07 15:53 FHealth 阅读(143) 评论(0) 推荐(0)

高性能WEB开发系列

摘要: 准备写一系列关于高性能WEB开发的日记,主要是跟前端技术相关的(html,http,js,css等),将自己了解的一些知识做1个总结和记录并分享,希望大家能喜欢,也喜欢自己能坚持写下去。当然因个人技术水平有限,写作能力更是非常差,所以如果有什么地方写得不好的,请大家都指点指点。1、HTTP服务器.2、性能测试工具推荐3、图片篇.4、如何加载JS,JS应该放在什么位置.5、为什么要减少请求数,如何减少请求数.6、减少请求,响应的数据量.7、JS、CSS的合并、压缩、缓存管理8、页面呈现、重绘、回流。9、该如何加载google-analytics(或其他第三方)的JS.10、疯狂的HTML压缩11 阅读全文

posted @ 2012-08-07 15:53 FHealth 阅读(123) 评论(0) 推荐(0)

高性能WEB开发 - flush让页面分块,逐步呈现

摘要: 在处理比较耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应。一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数,而且需要写额外的js代码、和js调用的请求接口。 正对这种情况,还有一种处理方法,就是让response分块编码进行传输。response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的html代码。分块编码(chunked encoding) chunked encoding 是http1.1 ... 阅读全文

posted @ 2012-08-07 15:52 FHealth 阅读(280) 评论(0) 推荐(0)

WEB高性能开发 - 疯狂的HTML压缩

摘要: 在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩html的功能也加入到该组件中,流程很简单,就是在程序启动(contextInitialized or Application_Start)的时候扫描所有html,jsp(asp... 阅读全文

posted @ 2012-08-07 15:47 FHealth 阅读(583) 评论(0) 推荐(0)

高性能WEB开发 - 页面呈现、重绘、回流。

摘要: 页面呈现流程 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的html代码解析成1个Dom树... 阅读全文

posted @ 2012-08-07 15:42 FHealth 阅读(217) 评论(0) 推荐(0)

高性能WEB开发 - JS、CSS的合并、压缩、缓存管理

摘要: 存在的问题: 合并、压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。 2. 因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并、压缩后的文件,而开发环境为了修改、调试方便,需... 阅读全文

posted @ 2012-08-07 15:38 FHealth 阅读(251) 评论(0) 推荐(0)

高性能WEB开发 - 减少请求,响应的数据量

摘要: GZIP压缩 gzip是目前所有浏览器都支持的一种压缩格式,IE6需要SP1及以上才支持(别说你还在用IE5,~_~)。gzip可以说是最方便而且也是最大减少响应数据量的1种方法。 说它方便,是因为你不需要为它写任何额外的代码,只需要在http服务器上加上配置都行了,现在主流的http服务器都支持... 阅读全文

posted @ 2012-08-07 15:37 FHealth 阅读(279) 评论(0) 推荐(0)

高性能WEB开发-http请求头的数据量

摘要: 我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的google的请求头 Host www.google.com.hkUser-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100... 阅读全文

posted @ 2012-08-07 15:35 FHealth 阅读(1032) 评论(0) 推荐(0)

高性能web开发 - 如何加载JS,JS应该放在什么位置?

摘要: 外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问:为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理,当浏览器从服务器接收到... 阅读全文

posted @ 2012-08-07 15:30 FHealth 阅读(266) 评论(0) 推荐(0)

导航