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

引言

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

开发者层面

1.样式置顶，脚本置底

样式文件的引用()放在html文档的head标签中，脚本文件的引用()放在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资源可以使用(举例国内的，国外的请自行百度~)，如：

2.服务器启用Gzip压缩

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

3.使用BigPipe技术

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。