优化HTML代码
来源:互联网 发布:mac 照片导出 编辑:程序博客网 时间:2024/05/18 02:37
CSS优化
尽量避免写在HTML标签中写Style属性。
· 避免CSS表达式CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式
· 移除空的CSS规则空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则
· 正确使用Display的属性Display属性会影响页面的渲染,因此请合理使用a) display:inline后不应该再使用width、height、margin、padding以及float) display:inline-block后不应该再使用float) 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:过渡使用会引发手机过耗电增加)
- HTML 代码优化技巧
- 优化HTML代码
- html代码优化
- 优化HTML代码
- 优化HTML代码
- SEO之HTML代码优化
- SEO之HTML代码优化
- 优化HTML代码的多种技巧
- html+css代码优化推荐读物
- HTML代码优化之标签语义化
- 如何使用Dreamweaver整理HTML代码和优化网页文档
- wordpress网站打开速度优化压缩html代码
- SEO之HTML优化:让你的网站HTML代码更符合SEO规范
- HTML 代码
- html代码
- HTML代码
- Html代码
- HTML代码
- 偶数加成记(水,sort)
- 树莓派相关
- Ajax使用时,出现的问题
- 如何使用Android Studio开发Gradle插件
- Storm架构和编程模型的总结
- 优化HTML代码
- Mybatis与Hibernate的区别
- gitblit搭建
- 30.输出所有和为S的连续正数序列。序列内按照从小至大的顺序,序列间按照开始数字从小到大的顺序
- Spring 多数据源连接配置 解决方案
- Ajax轮询,用于检测后台服务是否断开
- HID相关
- cannot find Toolkit in /usr/local/cuda-8.0
- WebService注解