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. Node.js ejs中文手册

    express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine' ...

  2. [CareerCup] 16.3 Dining Philosophers 哲学家聚餐问题

    16.3 In the famous dining philosophers problem, a bunch of philosophers are sitting around a circula ...

  3. cookie的设置，获取，取消

    <!DOCTYPE> <html> <head> <meta http-equiv=Content-Type content="text/html; ...

  4. Oracle求部门员工工资占总工资的比率

    --根据每个部门来统计部门工资总和 select deptid, sum(sal) 工资合计 from emp group by deptid; --根据每个部门来统计部门工资总和select dep ...

  5. zk 获取session，request，servletContext，response

    (参考:http://www.dotblogs.com.tw/rockywang/archive/2010/01/13/12995.aspx) HttpServletRequest request = ...

  6. 演示对sys用户和普通用户进行审计的示例

    1.确认数据库版本 1对SYS用户审计 1.1配置审计参数 1.2修改liunx日志配置文件 添加以下一列: 1.3 SYS 用户操作演示 2对普通用户审计 2.1配置审计参数 2.2演示对TEST用 ...

  7. jquery回车执行某个事件

    这里用到的是在查询框中输入数据后直接回车直接查询. //回车执行查询事件(执行class='btn-query'的单击事件) $(document).keydown(function (event) ...

  8. 您的服务器没有安装这个PHP扩展：OpenSSL(其他平台API同步需要)

    今天在安装一个博客系统的时候提示这个错,在网上找了半天,自己慢慢弄出来的,具体如下: 1.找到你的php.ini 文件,将“;extension=php_openssl.dll”前面分号去掉. 2.复 ...

  9. Java面试题大全（二）

    41.是否可以继承String类? String类是final类故不可以继承. 42.swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上? switch(expr1 ...

  10. BizTalk开发系列(三十五) TCP/IP 适配器

    BizTalk 的TCP/IP适配器最初是为英国的保健行业开发.该适配器属于BizTalk进程内适配器,将消息通过TCP/IP 套接字符串在BizTalk服务器与远程客户端间进行通讯. TCP/IP适 ...