关于网页性能，蔡老师有一篇文章已经讲得很清楚了，<a href='//www.greatytc.com/p/21b40334fc6c ' >什么是网站性能优化技术？怎样提升移动端的用户体验？</a> ，只是正好最近在学习JavaScript，顺便整理关于前端性能的笔记：
前端性能分类：###
- 网络性能
- 代码执行性能
网络性能，主要关注的是加载所占用的带宽和请求次数等影响加载速度的因素。
代码执行性能，主要关注的是JS代码执行效率，与后端不同，JS代码的执行性能没有那么重要。
因此，对于前端，主要针对网络性能进行优化。
网络性能优化原则：###
- 越快约好
- 带宽占用越小越好
加载速度快，可以提升用户体验，而降低带宽占用，不仅能提升加载速度，同时可以节约高昂的网络成本。
性能优化方法###
1. 压缩####
压缩主要这样几类文件：
1） html
2）css
3）JS
4）图片
压缩工具也很多，比如在线压缩工具：
但这种工具往往压缩效率较低，因此更推荐
gulp或者webpack
这2个工具可以通过npm安装使用
2. 合并####
1） 将多个JS，或者css文件合并为一个
合并工具可以用：
js可以同 gulp或browserify
css可以用gulp-concat
同样可以用npm 安装使用
2）将多张图片合并为一张
既常说的css-sprite
之所以合并图片主要有两个原因：
a. 减少请求次数，从而降低请求时间
b. 多张小图 的大小之和 远远比 合并后的一张大图所占的空间大
3）图片延迟加载
图片延迟加载，即页面中，当图片处于屏幕可视区，才进行加载
在html中，src中的图片才会被加载
<pre>
<img src="https://example.com/your_img_url.jpg " />
</pre>
而在延迟加载页面中，html中可以把需要加载的图片写到另一个非src的属性中，而src可以先加载一个默认图片。当图片出现在了屏幕可视区，js再把src的值修改为原先的非src（本例为data-src）的值，即可做到延迟加载
<pre>
<img data-src="https://example.com/your_img_url.jpg " src="https://example.com/default.jpg " />
</pre>
4） JS放在页面下方，CSS放在页面上方
JS放在页面下方：主要防止JS阻塞加载页面其它文件
CSS放在页面上方：页面先进行渲染
用户体验上，可以让用户感觉页面加载快一些。
