前端优化方案

前端性能优化

web前端指网站业务之前的部分，包括浏览器加载，网站视图模型，图片服务，CDN服务等，主要优化手段有浏览器访问、使用反向代理、CDN等。

1.减少http请求，合理浏览器缓存

2.启用压缩

3.CSS Sprites:合并css图片，减少请求数

4.LazyLoad Images:在页面刚加载的时候只加载的时候只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

5.CSS放在页面最上部，JavaScript放在页面最下面：让浏览器尽快的下载css渲染页面

6.异步请求Callback就是将一些行为样式提取出来，慢慢加载信息的内容

7.减少cookie传输

cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此那些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问。

8.JavaScript代码优化

9.减少页面的冗余代码

10.选择舍弃@import

最佳实践：为了实现逐步渲染，css应该放在顶部。在IE中用@Import与在底部使用link效果一样，最好不要用它

11.把样式表放在顶部

把样式表放到文档HEAD部分能让页面加载起来更快，这是因为把样式表放在head能让页面逐步渲染

16.压缩css

使用在线网站进行压缩

使用html-minifier对html中的css进行压缩

使用clean-css对css进行压缩

webpack,gulp打包工具

17.优化图片

18.去除重复脚本

19.尽量减少DOM访问

20.对ajax用GET请求

21.使用CDN(内容分发网络)

dns解析

TCP连接

HTTP请求抛出

服务器处理请求，HTTP响应返回

浏览器拿到响应数据，解析响应内容，把解析的结构展示给用户

HTTTP层面优化

dns解析

Dns实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，

TCP连接：

浏览器并发

http请求次数

减少http请求的次数，将多个请求合并成一个，减少http的开销