美文网首页
移动H5前端性能优化注意点

移动H5前端性能优化注意点

作者: Stark_Dylan | 来源:发表于2016-12-30 17:58 被阅读475次

title: 移动H5前端性能优化注意点
date: 2016-11-11 17:40:13
tags: HTML5
thumbnail: http://images.17173.com/2015/news/2015/05/28/hxz0528html01.jpg


希望得到的最好的效果:

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

  1. 最多三秒钟渲染完成单屏或者使用Loading
  2. 基于3G/4G移动网络下,每屏幕资源不超过1024KB
加载优化
  • 合并CSS、JavaScript
  • 合并小图片、使用雪碧图
  • 缓存一切可以缓存的资源,部分资源css、js使用src="abc.css?cacheVersion=1"来控制版本
  • 使用长Cache
  • 压缩HTML、CSS、JS
  • 启用GZip
  • 使用首屏加载
  • 使用按需加载
  • 使用滚屏加载
  • 增加进度指示器
  • 减少Cookie
  • 避免重定向
  • 异步加载第三方资源
CSS优化
  • CSS写在头部,JS写到尾部或者异步
  • 避免图片和iFrame等的SRC为空
  • 尽量避免重设图片大小
  • 图片尽量避免使用DataURL
  • 尽量避免在HTML标签中写Style
  • 避免CSS表达式
  • 移除空的CSS规则
  • 正确使用Display的属性
  • 不滥用Float
  • 不滥用Web字体
  • 不声明过多的Font-size
  • 值为0时候不需要任何单位
  • 标准化各种浏览器的前缀
  • 避免让选择符看起来像正则表达式
图片优化
  • 使用 CSS3、SVG、IconFont代替图片
  • 使用Srcset
  • WebP优于JPG
  • PNG8优于GIF
  • 首次加载不大于1024KB单页
  • 图片不宽于640
脚本优化
  • 减少重绘
  • 缓存Dom选择与计算
  • 缓存列表的长度
  • 尽量使用事件代理,避免批量绑定事件
  • 尽量使用ID选择器
  • 使用touch代理click
渲染优化
  • HTML使用ViewPort
  • 减少Dom节点
  • 尽量使用CSS3动画
  • 合理使用requestAnimationFrame动画代替setTimeout
  • 适当使用Canvas动画
  • touchmove,scroll事件会导致多次渲染
  • 使用 CSS3-transitions、CSS3-3D、Opacity、Canvas、WebGL、Video来触发GPU渲染

相关文章

  • 移动H5前端性能优化注意点

    title: 移动H5前端性能优化注意点date: 2016-11-11 17:40:13tags: HTML5t...

  • 第一篇 性能第一篇

    1, 腾讯的 移动H5前端性能优化指南2,https://github.com/wy-ei/notebook/...

  • 移动H5前端性能五大优化方案(实战篇)

    移动H5前端性能优化 概述 1. PC优化手法在移动端相同适合使用2. 在移动端我们提出3s加载完首屏资源3. 根...

  • 转载:移动H5前端性能优化指南

    注明: 转载移动H5前端性能优化指南 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成...

  • 移动H5前端性能优化

    移动H5前端性能优化指南## 概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首...

  • 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 移动H5前端性能优化

    移动H5前端性能优化指南 主要围绕这篇博客,解析不清楚的地方 一、服务器缓存 使用缓存可以减少向服务器的请求数,节...

  • H5移动端的性能优化

    H5 移动端的性能优化V1.0 一、渲染优化 二、css优化 三、加载优化 四、脚本执行优化

网友评论

      本文标题:移动H5前端性能优化注意点

      本文链接:https://www.haomeiwen.com/subject/gknmvttx.html