h5前端性能优化

作为的一门web标记语言。

性能的影响对于用户的体验是非常重要的，因此，前端的性能优化对于开发人员是必须要求做到的。

作为直接与用户接触的前端，还有很多问题并没有解决。

例如用户通过浏览器进入一个网站，用户感觉网站加载很慢，可能就会因此而关掉此网站。

为了留住用戶，作为前端开发人员就要提供给用户好的体验效果，那就需要减少浏览器的性能消耗——性能优化。

本人认为性能优化可以从以下5个方面进行优化：（1）第一个可以通过优化JavaScript逻辑代码;
（2）第二个可以通过改变渲染方式;
（3）第三个可以通过优化文件;
（4）第四个可以通过优化网络;
（5）第五个可以通过工具进行优化项目
1 前端性能优化之JavaScript
JavaScript是基于原型的动态型、解释型和弱类型的脚步语言。

由于现在一些常用的浏览器都已嵌入了JavaScript引擎，解释型——表示可以跨平台直接使用。

前端性能优化：
（1）第一个就是JavaScript的执行顺序——js时间线。

需要将js，也就是JavaScript放到HTML文档最后面加载。

Js时间线：第一创建document对象，也就是html结构；第二link标签引入的外部css，也就是样式；第三script标签引入的外部js；第四img标签，图片，需要加载src属性；第五文档加载完成，剩下就是用户操作实时交互的代码逻辑阶段。

（2）将js逻辑代码延迟使用，例如：某些耗时逻辑代码不需要开始使用，
就可以延迟使用——懒执行。

懒执行需要进行唤醒，唤醒方法可以通过定时器或者事件的触发。

（3）对于动画建议使用css来实现，尽量不要用JavaScript。

2 前端性能优化之渲染优化
渲染优化可以从以下四个方面进行：
2.1渲染过程优化
HTML的渲染机制：渲染HTML会构建DOM树;渲染CSS构建CSSOM树;两者会合并一个渲染树，而计算机根据渲染树来布局网页，并计算每个节点的位置，调用GPU绘制，形成图层，然后显示给用户观看。

CSSOM树的构建是非常耗性能的，因此需要前端开发人员尽量保证样式的层级扁平，减少样式的过度层叠。

因为样式越具体的，它的执行速度越慢。

2.2重排和重绘对于性能影响很大
重绘是只改变元素的样式，不影响布局的。

例如改变元素的背景颜色，字体大小和文本排列方式等。

当页面初始化、添加/删除元素、改变元素位置和改变元素尺寸等都会发生重排。

减少重排和重绘的方法：
（1）当使用定位时，可以通过取消定位，用变换属性里的偏移translate 替代top;减少所消耗的时间。

（2）当希望隐藏元素时，可以使用visibility：hidden;而不用display：none;因为前者只会导致样式的重绘，后者会导致重排，改变了元素的布局。

（3）建议不使用table布局，因为它可能造成重排。

（4）通过图层优化：将频繁运行的动画变为图层，图层能够阻止某些元素
重排导致的影响;其实普通文档HTML可以看成一个图层，图层之间是互补影响的。

因此可以对频繁渲染的生成一个单独图层，可以优化性能。

但只能针对少部分。

生成图层方法：
（1）通过变换：translate3d
（2）通过标签video、iframe
（3）通过动画
（4）渲染之懒加载优化：它的原理是将不关键的延后加载，在图片方面适用。

也可以用于播放视频等。

3 前端性能优化之文件优化
文件优化可以通过以下几个方面：
（1）图片的优化：像一个网站可能有很多图片，可以通过减少图片的像素点来相应的缩小图片的大小。

（2）通过图片加载优化：例如阿里图标，雪碧图（将多个图标文件整合到一张图片上）等等。

使用合格的图片格式，针对浏览器来使用。

如果浏览器支持webp格式，尽量使用WebP格式，因为它具有很好的数据压缩算法，减少图片体积。

小图片就使用png，照片使用JPEG。

（3）通过引入css文件;在服务器端进行文件压缩;将js文件放在内容最后，也就是body底部。

4 前端性能优化之网络优化
网络优化可以从以下几个方面：
（1）好的缓存策略对于降低性能消耗，减少资源的重复加载，提高网站加
载速度。

（2）请求方式使用http/2.0，它可以实现多路复用，加快网页加载速度。

（3）预加载：对于网页上有些资源不需要马上用到，但是需要尽早获取到的情况。

5 前端性能优化之项目优化
通过一些工具优化项目，减少项目所占的字节。

对代码进行压缩;并移除没有用处的代码;优化图片。

最后将文件打包。