课程咨询 :186-8884-0703

深圳Web培训 > 达内新闻 > 【达内WEB学堂】HTML5的前端性能优化(2)
  • 【达内WEB学堂】HTML5的前端性能优化(2)

    发布:深圳达内      来源:深圳达内      时间:2015-11-06

  • 【达内WEB学堂】HTML5的前端性能优化(2)

    预加载

    大型重资源页面(如游戏)可使用增加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(基于手机屏幕一般宽度))

    · 减少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渲染,请合理使用

    PS:过渡使用会引发手机过耗电增加

    更多WEB前端资讯请关注达内深圳WEB培训

上一篇:【达内WEB学堂】HTML5的前端性能优化方法(1)

下一篇:不会 A/B 测试的 Web 设计师不是好程序员

最新开班日期  |  更多

WEB前端工程师--全日制班

WEB前端工程师--全日制班

开班日期:2月15日

WEB培训前端工程师--周末班

WEB培训前端工程师--周末班

开班日期:2月15日

WEB培训免费训练营一期

WEB培训免费训练营一期

开班日期:2月15日

WEB培训免费训练营二期

WEB培训免费训练营二期

开班日期:2月15日

  • 地址:深圳市福田区八卦四路华晟达(原南方苑)大厦4楼东—深圳WEB开发培训中心
  • 课程培训电话:186-8884-0703     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56