前端性能优化

一、前言

网页生成的过程：
要理解网页性能为什么不好，需要先了解网页是怎么生成的。
网页生成过程，大致分为五步：

1.HTML代码转化成DOM

2.css代码转化成CSSOM(css object model)

3.结合DOM和CSSOM，生成一颗渲染树（包含每个节点的视觉信息）

4.生成布局(layout)，即将所有渲染树的所有节点进行平面合成

5.将布局绘制(paint)在屏幕上

这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。“生成布局”(flow)和绘制(paint)这两步，合称为“渲染”。

二、优化的意义

现阶段PC的性能绝大多数情况是过剩的，但移动端性能就参差不齐了，因此对移动端H5页面进行精细的性能优化是极其重要的。
移动端的WEB页面本身渲染性能产于Native的APP，只管产品的功能，不关注性能优化，将极大的影响Web页面的体验。

三、用户的感知

当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步操作，用户会感觉速度还好，还可以接受；而页面如果在2-5秒后才可以进去可用的状态，用户的耐心会逐渐丧失；而如果一个界面查过5秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许有一部分用户会推出重新进入，但更多的用户会直接放弃使用。

四、优化方案

1.首屏加载

当页面资源较多时，用户从点击开始加载页面，用户第一感知是什么时候加载完成。正常情况下，应该是在可见屏幕范围内，页面内容完全展示，如果在弱网状态下，会出现资源加载进度条，这样避免资源未加载完，展示出残缺不全的页面，影响用户体验，因此首屏加载，事件是一个重要的优化点。
在加载时间较长的时候，务必要让用户明确感知到加载完成的提示，通常是在加载过程中显示Loading的进度条，加载完成的时候隐藏它，从心理上，只会让用户有一种期待感，而不至于太多枯燥。
对于一些重量级的移动WEB应用，例如【游戏H5】、【场景式H5】，开始前需要加载很多资源，为了让后面的游戏过程更为流畅，一个 带百分比的进度条就显得格外重要。

2.按需加载

按需加载能够提升首屏加载速度，但尽可能避免对低性能的移动设备的影响，按需加载可能带来更多的重绘，从而降低了渲染性能，出现卡顿死机现象。

3.资源懒加载Lazyload

懒加载已经有很多成熟方案，PC端常用的优化点，同样适用于移动端。滚屏加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页时更快地响应。无条件预先加载：页面加载完成（load）后，马上获取其他资源。

4.尽量减少HTTP请求

用户响应时间的80%是发生在前端。
图像，样式表，脚本，FLash等减少部件数量也就降低了呈现网页所需的HTTP请求的数量：其中的大部分时间实在下载的网页的所有组件。
图片资源：
--css sprite
--base64:URL(内链资源，有兼容问题，不会被缓存)；
--SVG sprite(未来趋势，国外大量网站在使用)；
--icon font
--利用css3绘制简单icon
Javascript、css、HTML等
--合并文件并压缩文件;
--尽量使用css3动画代替JS/flash动画
--尽量使用外联js和css资源
服务器、域名等部署
--服务器端启用Gzip技术
--利用CDN加速静态资源
--资源分域存放，分域请求
--减少cookie
--配置Etag文件版本标识，高效利用缓存，避免重复下载
--服务端接口合并
--避免与服务器接口不必要的数据传输
--合理选用GET、POST请求方式
--尽量避免重定向
-在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址。
--最大限度地减少DOM访问
-避免使用javascript固定布局
-避免空图片src