1.脚本优化

(1)减少重绘和回流

(2)缓存Dom选择与计算

(3)缓存列表length

(4)尽量使用事件代码，避免批量绑定事件

(5)尽量使用ID选择器

(6)使用touchstart、touchend代替click

 

2.加载优化：

(1)合并css、javaScript

(2)合并小图片，使用雪碧图

(3)缓存一切可缓存的资源

(4)使用外联式引用css、javascript

(5)使用首屏加载、使用按需加载、使用滚屏加载

(6)减少Cookie

(7)避免重定向

(8)异步加载第三方资源

3.渲染优化

(1)html使用viewport

(2)减少Dom节点

(3)适当使用Canvas动画

(4)Touchmove、Scrollg事件会导致多次渲染

(5)使用（css3 transitions、css3 3D transforms、Opacity、Canvas、Video）来触发GPU渲染。

4.css优化

(1)css写在头部,JavaScript写在尾部或异步

(2)图片尽量避免使用DataURL

(3)尽量避免在HTML标签中写Style属性

(4)避免css表达式

(5)避免css规则

(6)正确使用Display的属性

(7)值为0时不需要任何单位

(8)不声明过多的font-size

(9)不要滥用web字体

(10)标准化各种浏览器前缀

(11)避免让选择符看起来正则表达式

 

5.图片优化

(1)图片不宽于640

(2)首次加载不大于1014KB

(3)使用css3、SVG、Iconfont代替图片

(4)webP优于JPG、PNG８优于GIF

总结：pc优化手段在mobile同样适用

h5移动端前端性能优化的更多相关文章

  1. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  2. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  3. [推荐]移动H5前端性能优化指南

    [推荐]移动H5前端性能优化指南 http://isux.tencent.com/h5-performance.html

  4. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  5. 移动 H5（PC Web）前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  6. 第146天：移动H5前端性能优化

    移动H5前端性能优化 一.概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通 ...

  7. [转]移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  8. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. How to get SQLite work on windows phone 8

    1.Install SQLite for Windows Phone SDKC:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Exten ...

  2. UE编辑器FTP无法连接

    解决办法:http://wenwen.sogou.com/z/q197743020.htm 无法从ue连接到主机,一直就是这样的状态 1. ftp帐户密码都没有问题: 2. 后台主机也没有问题: 3. ...

  3. CSS中id与class命名规则及编码最佳习惯

    一.用class_name方式写类名. 以前喜欢用class-name写,不过好像两样也没什么差别.但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度.但是id我会写 ...

  4. Java.lang.NoSuchFieldError: INSTANCE异常

    解决方案: java.lang.NoSuchFieldError: INSTANCE异常. 1.jar包重复了. 2.版本还不相同,如果包的版本不同也会报相应的错,不过一般情况自己导入的jar包主要看 ...

  5. [LintCode] Copy Books 复印书籍

    Given an array A of integer with size of n( means n books and number of pages of each book) and k pe ...

  6. scala - Enumeration 诡异问题

    object WeekDay extends Enumeration { type WeekDay = Value val Mon, Tue, Wed, Thu, Fri, Sat, Sun = Va ...

  7. SQL server 子查询、设置主键外键、变量及变量查询

    一.子查询 子查询,又叫做嵌套查询. 将一个查询语句做为一个结果集供其他SQL语句使用,就像使用普通的表一样,被当作结果集的查询语句被称为子查询. 子查询有两种类型: 一种是只返回一个单值的子查询,这 ...

  8. Runtime Error---Description: An application error occurred on the server....

    [原]Runtime Error---Description: An application error occurred on the server.... 2010-1-7阅读2010 评论3 D ...

  9. JavaScript原型链问题

    1. 使用new来创建对象(调用构造函数)时,如果return的是非对象(数字.字符串.布尔类型等)会忽而略返回值;如果return的是对象,则返回该对象. 2. 重写原型会切断原型链: foo = ...

  10. PowerDesigner 15.2入门学习 一

    好久没有搞 PowerDesigner 然后记录一下 1.下载地址 http://download.sybase.com/eval/PowerDesigner/PowerDesigner152_Eva ...