这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【如何进行web前端性能优化】
大家好，我是IT修真院深圳分院第9期的学员许永坚，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网JS任务10，深度思考中的知识点——如何进行web前端性能优化
A. 背景介绍
用户访问网页的等待时间，有80%是发生在浏览器前端，特别是页面和页面中各种元素（图片、CSS、JavaScript、 flash…）的下载之上，因此进行前端优化很有必要。
B. 知识剖析
2.1 初次访问
1）减少一个页面访问所产生的http连接次数
尽量简洁的页面设计，最大程度减少图片的使用，通过放弃一些不必要的页面特效来减少javascript的使用。
使用一些优化技巧，比如利用图片的背景位移减少图片的个数；image map技术；Sprites图；使用Inline images将css图片捆绑到网页中。
尽量合并js和css文件，减少独立文件个数。
2）使用gzip压缩网页内容
使用gzip来压缩网页中的静态内容，能够显著减少用户访问网页时的等待时间。主流的web服务器都支持或提供gzip压缩，如果使用apache服务器，只需要在配置文件中开启 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可。
使用gzip压缩都能够显著提高服务器效率并减少带宽支出，注意图片内容本身已经是压缩格式了，务必不要再进行压缩。
3）将CSS放在页面顶端，JS文件放在页面底端
CSS的引用要放在html的头部header中，JS文件引用尽量放在页面底端标签的后面，主要的思路是让核心的页面内容尽早显示出来
4）使JS文件内容最小化
使用一些javascript压缩工具对js脚本进行压缩，去除其中的空白字符、注释，最小化变量名等。
5）尽量减少外部脚本的使用，减少DNS查询时间
不要在网页中引用太多的外部脚本，首先，一次dns的解析过程会消耗20-120毫秒的时间；其次，如果在页面中引用太多的外部文件（如各种广告、联盟等代码），可能会因为外部文件的响应速度而将你的网站拖得很慢。浏览器一般只能并行处理同一域名下的两个请求，而对于不同子的域名则不受此限制，因此适当将本站静态内容（css,js）放在其他的子域名下（如 static.xxx.com）会有利于提高浏览器并行下载网页内容的能力。
如果必须引用外部文件，尽量将这些脚本放在页脚，可以使用CDN加速和DNS域名解析加速。
2.2 经常访问
1）在header中添加过期时间(Expires Header)
在header中给静态内容添加一个较长的过期时间，这样可以使用户今后访问只读取缓存中的文件，而不会与服务器产生任何的交互。
这样做存在一些问题，当图片、CSS和js文件更新时，用户如果不刷新浏览器，就无法获得此更新。这样，我们在对图片、css和js文件修改时，必须要进行重命名，才能保证用户访问到最新的内容。这可能会给开发造成不小的麻烦，因为这些文件可能被站点中的许多文件所引用。
flickr提出的解决办法是通过url rewrite使不同版本号的URL，事实上指向同一个文件，因为url级别的操作效率是很高的，可以给开发过程提供不少便利。
浏览器访问url时的工作机制：
第一次访问url时，用户从服务器段获取页面内容，并把相关的文件（images,css,js…）放在高速缓存中，也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。
用户重复访问url时，浏览器首先看高速缓存中是否有本站同名的文件，如果有，则检查文件的过期时间；如果尚未过期，则直接从缓存中读取文件，不再访问服务器。
如果缓存中文件的过期时间不存在或已超出，则浏览器会访问服务器获取文件的头信息，检查last modifed和ETags等信息，如果发现本地缓存中的文件在上次访问后没被修改，则使用本地缓存中的文件；如果修改过，则从服务器上获取最新版本。
2）将css和js文件放在独立外部文件中引用
将css和js文件放在独立文件中，这样它们会被单独缓存起来，在访问其他页面时可以从浏览器的高速缓存中直接读取。
3）去掉重复的脚本
在IE中，包含重复的js脚本会导致浏览器的缓存不被使用。
4）避免重定向的发生
除了在header中人为的重定向之外，网页重定向常在不经意间发生，被重定向的内容将不会使用浏览器的缓存。比如用户在访问www.xxx.com，服务器会通过301转向到www.xxx.com/，在后面加了一个“/”。如果服务器的配置不好，这也会给服务器带来额外的负担。通过配置apache的 alias或使用mod_rewrite模块等方法，可以避免不必要的重定向。
C. 常见问题
1. 性能魔方如何使用？
2. sprite是什么？
3. 性能测试重要吗？
D. 解决方案
1.性能魔方如何使用？
http://www.mmtrix.com/，点击‘立即体验’，然后复制链接
2.sprite是什么？
雪碧图，将图片合成起来使用background来定位。
3.性能测试重要吗？
重要。
E. 编码实战
F. 拓展思考
几种不常用的方式：使用CDN分发机制、避免CSS表达式、避免使用ETags
G. 参考文献
参考一：如何优化Web网站性能？
参考二：如何在nginx上使用gzip？
参考三：gzip nginx官网
参考四：性能魔方的使用
参考五：性能优化指南-知乎
参考六：移动H5前端性能优化指南
H. 更多讨论
1.性能魔方如何使用？
http://www.mmtrix.com/，点击‘立即体验’，然后复制链接
2.sprite是什么？
雪碧图，将图片合成起来使用background来定位。
3.性能测试重要吗？
重要。
I. 鸣谢
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：http://www.jsnhu.com，初学者转行到互联网的聚集地