HTML5之前端性能影响及优化
来源:用户上传
作者:
【摘要】随着互联网的快速发展，2014年HTML最新版HTML5出现，作为一种用于WEB APP开发、移动端开发、网站开发和游戏开发的一门web标记语言。性能的影响对于用户的体验是非常重要的！假如用户用浏览器运行很慢的话，可能用户就会关掉此网站，不再进入了！因此，前端的性能优化对于开发人员是必须要求做到的！
【关键词】HTML5;前端性能;优化
近几年来，随着互联网+、大数据、云计算、物联网、人工智能等IT行业的快速发展，这些产业深入人们的日常生活中，人们与互联网之间的联系逐渐升温，互联网让人们的生活变得多姿多彩！作为直接与用户接触的前端，还有很多问题并没有解决。例如用户通过浏览器进入一个网站，用户感觉网站加载很慢，可能就会因此而关掉此网站。为了留住用戶，作为前端开发人员就要提供给用户好的体验效果，那就需要减少浏览器的性能消耗——性能优化。本人认为性能优化可以从以下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 前端性能优化之项目优化
通过一些工具优化项目，减少项目所占的字节。对代码进行压缩;并移除没有用处的代码;优化图片。最后将文件打包。
6 总结
针对互联网的快速发展，以及结合以上的观点来看，前端开发人员对于性能优化其实可以通过简化一些重复和赘余的代码;还可以使用雪碧图来减缓图片所带来的加载速度缓慢的问题。还可以通过一些框架去简化代码量，从而达到提高加载效率的目的。以上并是个人对于前端性能影响的一些看法。
转载注明来源:https://www.xzbu.com/2/view-15099045.htm
