总结下我所知道的前端性能优化方案。

引言

总结下我所知道的前端性能优化方案。

开发者层面

1.样式置顶，脚本置底

样式文件的引用（<link />）放在html文档的head标签中，脚本文件的引用（<script />）放在body的底部；
另外尽可能减小在页面中出现片断性（内联）的style和script代码。

2.精简资源

• 压缩、合并CSS，JS文件

• 对图片文件进行精简优化，方式如：

  • OptiPNG工具无损优化PNG图片；

  • 使用webp格式；

3.减小http请求次数

• 合并css、js文件；

• 使用css sprites技术；

• icon图片过多的状况下，考虑使用iconfont技术；

4.延迟加载

• 使用reauire.js或sea.js按需加载js模块；

• 使用lazyload.js插件延迟加载图片；

5.删除重复脚本

重复脚本的问题通常出如今规范稀松的团队或者多部门协做开发的团队中，尽可能减小这类问题的出现；重复脚本通常在开发时便可发现，由于大多数状况下这会致使变量覆盖（如屡次引用jQuery），功能没法正常使用。

6.缓存Ajax

最快的Ajax请求就是没有请求。

7.使用JSON做为数据格式

8.尽可能避免重绘(Repaint)和重排(Reflow)的发生

如下状况都会发生：

• 添加或删除可见的DOM元素；

• 元素位置改变；

• 元素尺寸改变（包括：外边距，内边距，边框厚度、宽度、高度等）；

• 内容改变；

• 页面渲染器初始化；

• 浏览器窗口尺寸变化。

重排和重绘不可避免，只能尽可能少的发生。

架构师层面

1.使用CDN加速静态资源访问

网上目前也有不少公开免费的CDN资源可使用（举例国内的，国外的请自行百度~），如：

• 百度：http://cdn.code.baidu.com

• 新浪：http://lib.sinaapp.com

• 又拍：http://jscdn.upai.com

• 七牛：http://www.staticfile.org

• 360：http://libs.useso.com

2.服务器启用Gzip压缩

Gzip一般能够减小70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。

3.使用BigPipe技术

BigPipe是一个从新设计的基础动态网页服务体系。大致思路是，分解网页成叫作Pagelets的小块，而后经过Web服务器和浏览器创建管道并管理他们在不一样阶段的运行。