前段性能优化之js,css调用优化 -

zl198751

浏览: 278779 次
性别:
来自: 上海

最近访客更多访客>>

lost-java

sshcainiao

huohoo

solguo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前段性能优化之js,css调用优化

CSS 应用服务器脚本浏览器 Firebug

     规则1：减少HTTP请求
     把多个JS请求合并为一个JS请求，把多个CSS请求合并为一个CSS请求。从而减少从客户端向服务器端的请求数。
     规则3：添加Expires头
     用http请求的查看工具，我这里用的是firebug查看http请求，可以看到响应头中有Expires头，unicorn的设置的默认过期时间是30分钟。即是如果当前网页未过期，浏览器不会发请求，直接查找本地页面缓存。加速前端响应速度，减少服务器端压力。
     规则4：压缩组件
     查看http请求头参数中，有一项Accept-Encoding:gzip,deflate，响应头中有一项Content-Encoding：gzip ，这里表示请求的内容采用gzip方式进行压缩传输。减少传输文件的大小，加快页面响应。
     规则5：将样式表放在顶部
     规则6：将脚本放在底部
     浏览器的加载顺序基本是按源码从上到下加载的，把样式表放在顶部，可以加快页面样式的显示，给客户更好的体验。同理，把脚本放在底部，会避免因脚本阻塞页面内容的呈现。
     因此，最理想的情况是，整个页面只保留一个JS且放置在</body>标签之前，只保留一个CSS且放置在</head>之前。
目前的unicorn设计也是尽力按这个目标来做。CSS已经精简到1个，位置也基本符合。但是结合网站的实际情况，JS的处理中涉及到一些函数依赖，必须有部分JS放在前端，供后面的JS调用。另外，ae.js这个库必须提前调用，因此，就会看到当前的searchweb页<head>标签内，依然存在2个JS。其他的JS都遵循此规则，合并成一个，且放置在</body>前。
     规则10：精简JavaScript
     如果你把页面源码中的js的URL输入地址栏中（用FF浏览器，IE会弹出下载框），会列出JS的内容，会发现这里的JS文件作了很大的精简。删除了多余的空格、空行、注释等。减少了JS的体积，压缩原理主要参考开源工具JSMIN。
另外，其实unicorn也做了CSS的压缩功能，但是因为目前国际站的应用中，CSS的注释因为涉及到一些兼容性处理的内容，暂时无法做压缩。这个功能虽然做了，但是默认不开启。可以在antx.properties中配置是否开启，对应配置项：alibaba.intl.compressCSS，为true时开启压缩，默认此项值为false。
     规则12：移除重复脚本
     unicorn还有一个功能是，对于一次请求中重复引入的JS或CSS，unicorn有去重功能，也就是只会调用一次。
     规则13：配置ETag
     项目设计之初，有在http请求中加入ETag标记，这个标记可以在请求时检验服务器端资源是否与客户端资源相同。如果相同，只返回带304响应码的响应头，不用重新从服务器端发送页面数据，而直接使用本地缓存。后来在测试过程中，出现页面偶尔丢失样式的情况发生，经架构、开发等判断可能是Etag标记与mod_jk冲突，因此取消了这项功能