关于前端性能

图片发自App

关于网页性能，蔡老师有一篇文章已经讲得很清楚了，什么是网站性能优化技术？怎样提升移动端的用户体验？ ，只是正好最近在学习JavaScript，顺便整理关于前端性能的笔记：

前端性能分类：###

1. 网络性能
2. 代码执行性能

网络性能，主要关注的是加载所占用的带宽和请求次数等影响加载速度的因素。
代码执行性能，主要关注的是JS代码执行效率，与后端不同，JS代码的执行性能没有那么重要。
因此，对于前端，主要针对网络性能进行优化。

网络性能优化原则：###

1. 越快约好
2. 带宽占用越小越好

加载速度快，可以提升用户体验，而降低带宽占用，不仅能提升加载速度，同时可以节约高昂的网络成本。

性能优化方法###

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中的图片才会被加载

而在延迟加载页面中，html中可以把需要加载的图片写到另一个非src的属性中，而src可以先加载一个默认图片。当图片出现在了屏幕可视区，js再把src的值修改为原先的非src（本例为data-src）的值，即可做到延迟加载

4） JS放在页面下方，CSS放在页面上方
JS放在页面下方：主要防止JS阻塞加载页面其它文件
CSS放在页面上方：页面先进行渲染
用户体验上，可以让用户感觉页面加载快一些。

=======
我的老板Gordon Choi老师近期会有一些关于内容营销的分享，可以添加他的微信了解

WeChatID:gordon-choi