Html5网站前端性能优化技巧

概述 

1. PC优化手段在Mobile侧同样适用 

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

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

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

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

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

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

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

HTML5优化攻略 

[加载优化] 

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

1、削减HTTP恳求 

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

a) 兼并CSS、JavaScript 

b) 兼并小图片，运用雪碧图 

2、缓存 

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

a) 缓存一切可缓存的资源 

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

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

3、紧缩HTML、CSS、JavaScript 

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

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

b) 启用GZip 

4、无堵塞 

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

部或运用异步方法加载 

5、运用首屏加载 

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

6、按需加载 

将不影响首屏的资源和当时屏幕资源不必的资源放到用户需要时才加载，能够大大提高重要资源的显现速度和降低整体流量。PS：按需加载会导致很多重绘，影响烘托功能

a) LazyLoad 

b) 滚屏加载 

c) 经过Media Query加载 

7、预加载 

大型重资源页面(如游戏)可运用添加Loading的方法，资源加载完结后再显现页面。但Loading时刻过长，会造成用户丢失，对用户行为剖析，能够在当时页加载下一页资源，提高速度

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

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

8、紧缩图片 

图片是较占流量的资源，因而尽量防止运用他，运用时挑选较适宜的格式(实现需求的前提下，以巨细判断)，适宜的巨细，然后运用智图紧缩，一起在代码中用Srcset来按需显现。PS：过度紧缩图片巨细影响图片显现作用

a) 运用智图或CDN加快

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

c) 运用Srcset 

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

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

9、削减CookieCookie

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

10、防止重定向 

重定向会影响加载速度，所以在服务器正确设置防止重定向 

11、异步加载第三方资源 

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

[脚本履行优化] 

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

1、CSS写在头部，JavaScript写在尾部或异步 

2、防止图片和iFrame等的空Src 

空Src会重新加载当时页面，影响速度和功率 

3、尽量防止重设图片巨细 

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

4、图片尽量防止运用DataURL 

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

[CSS优化] 

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

2、防止CSS表达式 

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

3、移除空的CSS规矩 

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

4、正确运用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 

5、不乱用Float 

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

6、不乱用Web字体 

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

7、不声明过多的Font-size 

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

8、值为0时不需要任何单位 

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

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

a) 无前缀应放在较后 

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

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

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

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

[JavaScript履行优化] 

1、削减重绘和回流 

a) 防止不必要的Dom操作 

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

c) 防止运用document.write 

d) 削减drawImage 

2、缓存Dom挑选与核算 

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

3、缓存列表.length 

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

4、尽量运用事情署理，防止批量绑定事情 

5、尽量运用ID挑选器 

ID挑选器是较快的 

5、TOUCH事情优化 

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

[烘托优化] 

1、HTML运用Viewport 

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

2、削减Dom节点 

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

3、动画优化 

a) 尽量运用CSS3动画 

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

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

4、高频事情优化 

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

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

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

5、GPU加快 

CSS中以下特点(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU烘托，请合理运用。PS：过渡运用会引发手机过耗电添加