优化
优化的目的是提升用户体验,减少网页加载时间。我们可以依据雅虎军规来对项目进行优化。
- 关于DOM
- 减少DOM元素的数量,不要嵌套太深,正常页面的DOM元素数量一般不应该超过1000。
- 尽量少用iframe。
- 避免空的src和href。
- 用智能的事件处理器(事件委托)。
- DOM 的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。
- 不要一条条地改变样式,而要通过改变class,一次性地改变样式。
- 尽量使用离线DOM,而不是真实的网页DOM,来改变元素样式。比如,操作Document Fragment对象,完成后再把这个对象加入DOM。再比如,使用 cloneNode() 方法,在克隆的节点上进行操作,然后再用克隆的节点替换原始节点。
- 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染
- 关于css
- 避免使用CSS表达式
- 选择<link>舍弃@import
- 避免使用滤镜
- 关于请求
- 尽量减少HTTP请求数。
- 使用缓存技术。
- 使用CDN(内容分发网络),网站上静态资源即css、js全都使用cdn分发,图片亦然。
- 给Cookie减肥
- 避免重定向
- 权衡DNS查找次数,减少主机名可以节省DNS查找时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
- 关于文件
- 对文件压缩混淆。
- 把脚本放在底部,把样式表放在顶部。
- 把JavaScript和CSS放到外面,不要写在页面内。
- 按需加载。
- 合并文件。
- 关于图片
- 使用雪碧图。(小图标)
- 避免图片src属性为空。
- 不要在HTML中缩放图片。
- 更好的图片格式。
- 使用base64编码代替图片,css、svg、canvas或iconfont代替图片。
经验
平时项目中,我们可以根据上述经验来对项目进行优化。剩下的可以不断优化自己的代码。