前端性能优化套路总结

2017-07-15 本文已影响194人一只好奇的茂

一、服务端开启gzip压缩

GZip压缩的基本流程

Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩（Accept-Encoding 信息）；
如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；
如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；
如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；
如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；
如果请求文件是动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。

服务器开启gzip压缩的步骤

可以在nginx环境下、apache2.2、apache2.4环境下开启gzip压缩，现主要针对apache2.2环境下开启gzip压缩：

修改 /etc/httpd/conf/http.conf

去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#

在文件末尾添加如下：

<ifmodule mod_deflate.c>
DeflateCompressionLevel 9
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE image/gif image/png image/jpeg  image/swf image/jpeg image/bmp
</ifmodule>

重启apache

二、服务端开启cdn加速

阿里云CDN快速入门

三、静态文件存放在单独域名的服务器上

避免请求静态资源文件（最主要是图片和css，对于js 文件，如果涉及读写cookie,那么还是要谨慎处理）时，携带cookie信息，增加请求损耗；
突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)

三、压缩、合并请求

使用gulp或webpack工具：

压缩js、html、css文件；
合并js、css以减少请求数；
将低于10kb的图片转为base64格式到html中，减少并发数；

四、管理端限制上传图片的大小

这算是最阴损的招了，为了弥补运营的同事，送给她一个我见过的最好用的图片压缩工具，不用999，兼容mac、windows，支持转webp格式：http://zhitu.isux.us/

四、客户端预加载

五、客户端懒加载

基于原生JS：
lazysizes效果演示
 lazysizes github工程

六、提高渲染速度

js放到页面底部，body标签底部
css放到页面顶部，head标签里

七、异步加载js

Require.JS 按需加载

拓展资料

移动H5前端性能优化指南
 Web性能优化：图片优化
 WebP 探寻之路
 浅谈浏览器http的缓存机制
 常见的前端性能优化手段都有哪些？都有多大收益？
前端性能优化相关

性能辅助工具

智图-Webp
谷歌 PageSpeed Insights(网页载入速度检测工具，需要翻墙)
入门Webpack，看这篇就够了
 前端构建工具gulpjs的使用介绍及技巧
 Gulp 入门指南