这么多前端优化点你都记得住吗？

7．尽量应用 ECMAScript6＋的特点来编程

ECMAScript6＋必定程度上加倍安然高效，并且部分特点履行速度更快，也是将来规范的须要，所以推荐应用 ECMAScript6＋的新特点来完成后面的开辟。

衬着类

1．应用 Viewport 固定屏幕衬着，可以加快页面衬着内容

<meta >

2．避免各类情势重排重绘

页面的重排重绘很耗机能，所以必定要尽可能削减页面的重排重绘，例如页面图片大年夜小变更、元素地位变更等这些情况都邑导致重排重绘。

3．应用 CSS3 动画，开启 GPU 加快

应用 CSS3 动画时可以设置 transform:translateZ(0) 来开启移动设备浏览器的 GPU 图形处理加快，让动画过程加倍流畅，但须要留意的是，在 Native WebView 下 GPU 加快有几率产生 App Crash。

-webkit-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
8．强缓存策略
6．不滥用 float
transform:translateZ(0);

有利于 favicon.ico 的反复加载，因为一般一个 Web 应用的 favicon.ico 是很少改变的。

4．合理应用 Canvas 和 requestAnimationFrame

选择 Canvas 或 requestAnimationFrame 等更高效的动画实现方法，尽量避免应用 setTimeout、setInterval 等方法来直接处理持续动画。

5．SVG 代替图片

部分情况下可以推敲应用 SVG 代替图片实现动画，因为应用 SVG 格局内容更小，并且 SVG DOM 构造便利调剂。

在 DOM 衬着树生成后的构造衬着阶段，应用 float 的元素构造计算比较耗机能，所以尽量削减 float 的应用，推荐应用固定构造或 flex-box 弹性构造的方法来实现页面元素构造。

7．不滥用 web 字体或过多 font-size 声明

过多的 font-size 声明会增长字体的大年夜小计算，并且也没有须要的。

12．避免应用 CSS 表达式或 CSS 滤镜

8．做好脚本容错

脚本容错可以避免「非正常情况」的履行缺点影响页面的加载和不相干功能的应用

架构协定类

poster="path/poster.jpg">

1．测验测验应用 SPDY 和 HTTP2

在前提许可的情况下可以推敲应用 SPDY 协定来进行文件资本传输，应用连接复竽暌姑加快传输过程，缩短资本加载时光。HTTP2 在将来也是可以推敲测验测验的。

2．应用后端数据衬着

<p>Your browser doesn’t support HTML5 video</p>

应用后端数据衬着的方法可以加快页面内容的衬着展示，避免空白页面的出现，同时可以解决移动端页面搜刮引擎优化的问题。如不雅前提许可，后端数据衬着是一个很不错的实践思路。后面的┞仿节会具体介绍后端数据衬着的相干内容。

可以测验测验应用 NativeView 的 MNV＊开辟模式来避免 HTML DOM 机能慢的问题，今朝应用 MNV＊的开辟模式已经可以将页面内容衬着体验做到接近客户端 Native 应用的体验了。但须要避免 js Framework 和 native Framework 的频繁交互。

总结

关于页面优化的常用技巧手段和思路重要包含以上这些，尽管列举出很多，但仍可能有少数漏掉，可见前端机能优化不是一件简简单单的工作，其涉及的内允很多。大年夜家可以根据实际情况将这些办法应用到本身的项目傍边，要想全部做到几乎是弗成能的，但做到用户可接收的原则照样很轻易实现的。

【编辑推荐】

【义务编辑：张燕妮 TEL：（010）68476606】

　　推荐阅读

　　从大概率看，你的隐私数据是时代进步的牺牲品！

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践若何更好地保护小我隐私，是网平易近十分关怀的问题。在大年夜数据时代，人们在网上的一切行动，都在向计>>>详细阅读

地址：http://www.17bianji.com/lsqh/38705.html