关于HTML5网站前端性能优化指南

概述

　　PC优化手法在Mobile侧相同适用

　　在Mobile侧咱们提出三秒种烘托完结首屏目标

　　根据第二点，首屏加载3秒完结或运用Loading

　　根据联通3G网络均匀338KB/s(2.71Mb/s)，所以首屏资本不该超过1014KB

　　Mobile侧因手机配置缘由，除加载外烘托速度也是优化要点

　　根据第五点，要合理处理代码削减烘托损耗

　　根据第二、第五点，全部影响首屏加载和烘托的代码应在处理逻辑中后置

　　加载完结后用户交互运用时也需留意功能

　　[加载优化]

　　加载进程是为耗时的进程，可能会占到总耗时的80%时刻，因而是优化的要点

　　削减HTTP恳求

　　由于手机浏览器一起呼应恳求为4个恳求(Android支撑4个，iOS 5后可支撑6个)，所以要尽量削减页面的恳求数，初次加载一起恳求数不能超过4个。

　　a)合并CSS、JavaScript

　　b)合并小图像，运用雪碧图

　　缓存

　　运用缓存能够削减向效劳器的恳求数，节约加载时刻，所以全部静态资本都要在效劳器端设置缓存，而且尽量运用长Cache(长Cache资本的更新可运用时刻戳)

　　a) 缓存全部可缓存的资本

　　b) 运用长Cache(运用时刻戳更新Cache)

　　c) 运用外联式引用CSS、JavaScript

　　紧缩HTML、CSS、JavaScript

　　削减资本巨细能够加快页面显现速度，所以要对HTML、CSS、JavaScript等进行代码紧缩，并在效劳器端设置GZip。

　　a) 紧缩(例如，多余的空格、换行符和缩进)

　　b) 启用GZip

　　无堵塞

　　写在HTML头部的JavaScript(无异步)，和写在HTML标签中的Style会堵塞页面的烘托，因而CSS放在页面头部并运用Link办法引进，防止在HTML标签中写Style，JavaScript放在页面尾部或运用异步办法加载。

　　运用首屏加载

　　首屏的疾速显现，能够大大提高用户对页面速度的感知，因而应尽量针对首屏的疾速显现做优化。

　　按需加载

　　将不影响首屏的资本和当时屏幕资本不必的资本放到用户需求时才加载，能够大大提高重要资本的显现速度和下降整体流量。

　　PS：按需加载会致使很多重绘，影响烘托功能

　　a) LazyLoad

　　b) 滚屏加载

　　c) 经过Media Query加载

　　预加载

　　大型重资本页面(如游戏)可运用添加Loading的办法，资本加载完结后再显现页面。但Loading时刻过长，会形成用户丢失。

　　对用户行动剖析，能够在当时页加载下一页资本，提高速度。

　　a) 可感知Loading(如进入空间游戏的Loading)

　　b) 不行感知的Loading(如提早加载下一页)

　　紧缩图像

　　图像是占流量的资本，因而尽量防止运用他，运用时挑选适宜的格局(实现需求的前提下，以巨细判别)，适宜的巨细，然后运用智图紧缩，一起在代码顶用Srcset来按需显现。

　　PS：过度紧缩图像巨细影响图像显现作用

　　a) 运用智图( http://zhitu.tencent.com/ )

　　b) 运用其它办法替代图像(1. 运用CSS3 2. 运用SVG 3. 运用IconFont)

　　c) 运用Srcset

　　d) 挑选适宜的图像(1. webP优于JPG 2. PNG8优于GIF)

　　e) 挑选适宜的巨细(1. 初次加载不大于1014KB 2. 不宽于640(根据手机屏幕通常宽度))

　　延伸阅览：《浓缩的精华!从零开始带你认识新的图像格局WebP》

　　削减Cookie

　　Cookie会影响加载速度，所以静态资本域名不运用Cookie。

　　防止重定向

　　重定向会影响加载速度，所以在效劳器准确设置防止重定向。

　　异步加载第三方资本

　　第三方资本不行控会影响页面的加载和显现，因而要异步加载第三方资本。

　　[脚本履行优化]

　　脚本处理不妥会堵塞页面加载、烘托，因而在运用时需当留意：

　　CSS写在头部，JavaScript写在尾部或异步。

　　防止图像和iFrame等的空Src，空Src会从头加载当时页面，影响速度和功率。

　　尽量防止重设图像巨细。

　　重设图像巨细是指在页面、CSS、JavaScript等中屡次重置图像巨细，屡次重设图像巨细会引发图像的屡次重绘，影响功能。

　　图像尽量防止运用DataURL，DataURL图像没有运用图像的紧缩算法文件会变大，而且要解码后再烘托，加载慢耗时长

　　[CSS优化]

　　尽量防止写在HTML标签中写Style特点

　　防止CSS表达式

　　CSS表达式的履行需跳出CSS树的烘托，因而请防止CSS表达式。

　　移除空的CSS规矩

　　空的CSS规矩添加了CSS文件的巨细，且影响CSS树的履行，所以需移除空的CSS规矩。

　　准确运用Display的特点

　　Display特点会影响页面的烘托，因而请合理运用。

　　a) display:inline后不该该再运用width、height、margin、padding以及float

　　b) display:inline-block后不该该再运用float

　　c) display:block后不该该再运用vertical-align

　　d) display:table-*后不该该再运用margin或许float

　　不乱用Float

　　Float在烘托时核算量比较大，尽量削减运用。

　　不乱用Web字体

　　Web字体需求下载，解析，重绘当时页面，尽量削减运用。

　　不声明过多的Font-size

　　过多的Font-size引发CSS树的功率。

　　值为0时不需求任何单位

　　为了浏览器的兼容性和功能，值为0时不要带单位。

　　标准化各种浏览器前缀

　　a) 无前缀应放在终

　　b) CSS动画只用 (-webkit- 无前缀)两种即可

　　c) 其它前缀为 -webkit- -moz- -ms- 无前缀四种，(-o-Opera浏览器改用blink内核，所以筛选)

　　防止让挑选符看起来像正则表达式

　　高档挑选器履行耗时长且不易读懂，防止运用。

　　[JavaScript履行优化]

　　削减重绘和回流

　　a) 防止不必要的Dom操作

　　b) 尽量改动Class而不是Style，运用classList替代className

　　c) 防止运用document.write

　　d) 削减drawImage

　　缓存Dom挑选与核算

　　每次Dom挑选都要核算，缓存他。

　　缓存列表.length

　　每次.length都要核算，用一个变量保留这个值

　　尽量运用事情代理，防止批量绑定事情

　　尽量运用ID挑选器，ID挑选器是快的。

　　TOUCH事情优化

　　运用touchstart、touchend替代click，因快影响速度快。但应留意Touch呼应过快，易引发误操作

　　[烘托优化]

　　HTML运用Viewport

　　Viewport能够加快页面的烘托，请运用以下代码：

　　削减Dom节点

　　Dom节点太多影响页面的烘托，应尽量削减Dom节点

　　动画优化

　　a) 尽量运用CSS3动画

　　b) 合理运用requestAnimationFrame动画替代setTimeout

　　c) 恰当运用Canvas动画 5个元素以内运用css动画，5个以上运用Canvas动画(iOS8可运用webGL)

　　高频事情优化

　　Touchmove、Scroll 事情可致使屡次烘托

　　a) 运用requestAnimationFrame监听帧改变，使得在准确的时刻进行烘托

　　b) 添加呼应改变的时刻距离，削减重绘次数

　　GPU加快

　　CSS中以下特点(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU烘托，请合理运用。

返回目录在线咨询

网站目录
上一篇：2015年微商将何去何从？
下一篇：外贸网站建站需要一个什么样的虚拟主机？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

新闻资讯网络营销服务商

关于HTML5网站前端性能优化指南

您的项目需求

公司名称：河南汉狮电子科技有限公司【工商营业执照】