网页美工设计

网页设计移动端H5前端性能优化方案

编辑：时间：2017-07-11 20:07:54

　　3、移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。

　　4、正确使用Display的属性，Display属性会影响页面的渲染，建议各位站长要合理使用。

　　（1）、display:inline后不应该再使用width、height、margin、padding以及float

　　（2）、display:inline-block后不应该再使用float

　　（3）、display:block后不应该再使用vertical-align

　　（4）、display:table-*后不应该再使用margin或者float

　　5、不滥用Float，Float在渲染时计算量比较大，尽量减少使用。

　　6、不滥用Web字体，Web字体需要下载，解析，重绘当前页面，尽量减少使用。

　　7、不声明过多的Font-size，过多的Font-size引发CSS树的效率。

　　8、值为0时不需要任何单位，为了浏览器的兼容性和性能，值为0时不要带单位。

　　9、标准化各种浏览器前缀

　　（1）、无前缀应放在最后。

　　（2）、CSS动画只用（-webkit-无前缀）两种即可。

　　（3）、其它前缀为“-webkit--moz--ms-无前缀”四种（-o-Opera浏览器改用blink内核，所以淘汰）。

　　10、避免让选择符看起来像正则表达式。

　　高级选择器执行耗时长且不易读懂，避免使用。

　　Javascript执行优化

　　1、减少重绘和回流

　　（1）、避免不必要的Dom操作

　　（2）、尽量改变Class而不是Style，使用classList代替className

　　（3）、避免使用document.write

　　（4）、减少drawImage

　　2、缓存Dom选择与计算，每次Dom选择都要计算，缓存他。

　　3、缓存列表.length，每次.length都要计算，用一个变量保存这个值。

　　4、尽量使用事件代理，避免批量绑定事件。

　　5、尽量使用ID选择器，ID选择器是最快的。

　　6、TOUCH事件优化，使用touchstart、touchend代替click，因快影响速度快，但应注意Touch响应过快，易引发误操作。

　　渲染优化

　　HTML文档是以包含文档编码信息的数据流方式在网络间传输，页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明，客户端浏览器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的java代码前，大部分的浏览器（ie6、ie7、ie8除外）都会缓冲一定字节的数据来从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。

3/4 首页上一页 1 2 3 4 下一页尾页

<< 上一篇：h5移动端页面怎么根据设计稿布局

>> 下一篇：网页设计师的灵感主要从哪里来

推荐资讯