HTML页面优化

2024-07-29行业资讯

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以及floatb) display:inline-block后不应该再使用floatc) display:block后不应该再使用vertical-alignd) 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可以加速页面的渲染，请使用以下代码<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

· 减少Dom节点。

Dom节点太多影响页面的渲染，应尽量减少Dom节点

 

· 动画优化。

a) 尽量使用CSS3动画b) 合理使用requestAnimationFrame动画代替setTimeoutc) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）

 

· 高频事件优化。

Touchmove、Scroll 事件可导致多次渲染a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染b) 增加响应变化的时间间隔，减少重绘次数

 

· GPU加速。

CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用（PS：过渡使用会引发手机过耗电增加）

 

 

 

• 上一篇:中国银行多措并举助力房地产市场平稳健康发展 与十家房企签署《战略合作协议》
• 下一篇:抖音信息流广告投放 代运营是什么