随笔分类 - 高性能WEB开发
了解CSS的查找匹配原理,让CSS更简洁、高效
摘要:用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的
阅读全文
高性能WEB开发(11) - flush让页面分块,逐步呈现
摘要:在处理比较耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应。一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数,而且需要写额外的js代码、和js调用的请求接口。
正对这种情况,还有一种处理方法,就是让response分块编码进行传输。response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的html代码。
阅读全文
WEB高性能开发(10) - 疯狂的HTML压缩
摘要: 上一篇随笔中网友 skyaspnet 问我如何压缩HTML,当时回答是推荐他使用gzip,后来想想,要是能把所有的html,jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。一般我们启动gzip都比较少对html启动gzip,因为现在的html都是动态的,不会使用浏览器缓存,而启用gzip的话每次请求都需要压缩,会比较消耗服务器资源,对js,css启动gzip比较好是因为js,css都会使用缓存。我个人觉得的压缩html的最大好处就是一本万利,只要写好了一次,以后所有程序都可以使用,不会增加任何额外的开发工作。
阅读全文
该如何加载google-analytics(或其他第三方)的JS
摘要:很多网站为了获取用户访问网站的统计信息,使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics,简称ga)。注册ga后,ga就会生成一段js脚本,很多人直接把这段js复制到的最后面就完事(包括 博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗?
阅读全文
web高性能开发系列随笔
摘要: 在BlogJava里写了一些关于高性能WEB开发的随笔,因为都是跟前端技术相关(html,http,js,css等),所以也贴到博客园来,吸收下人气。
1、 HTTP服务器.
2、性能测试工具推荐
3、 图片篇.
4、 如何加载JS,JS应该放在什么位置.
5、 为什么要减少请求数,如何减少请求数.
6、 减少请求,响应的数据量.
7、JS、CSS的合并、压缩、缓存管理
8、页面呈现、重绘、回流。
9、该如何加载google-analytics(或其他第三方)的JS
10、疯狂的HTML压缩
11、flush让页面分块,逐步呈现
12、了解CSS的查找匹配原理,让CSS更简洁、高效
阅读全文