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. MongoDB介绍及安装

    一.介绍: 1.NoSql(非关系型的数据库)成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.MongoDB是NoSql的其中一种较为热门的非关系型数据库.查阅很多资料.其他博客和网站,借着 ...

  2. 创建 maven 本地仓库

    在 pom.xml 添加依赖包的时候,有时候会提示无法从 http://repo1.maven.org/maven2/ 获取的情况,这时可配置个本地仓库: 从网上下载 maven 仓库网站源码包 Ne ...

  3. 关于tag标签系统的实现

    实验室的项目,需要做对用户发布的主题进行打标签的功能,纠结甚久,实现思路如下: 一.数据库表的设计 1.tag表 create table qa_tag ( tag_id int primary ke ...

  4. [LintCode] Pow(x, n) 求x的n次方

    Implement pow(x, n). Notice You don't need to care about the precision of your answer, it's acceptab ...

  5. js动态获取当前系统时间+js字符串转换为date日期对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. Eclipse设置注释模板

    设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...

  7. android几个实用的判定代码

    之前项目有几个判定代码很实用,特此做一个整理. 一.验证手机格式是否正确 //判断手机号码是否合理 private boolean judgePhoneNums(String phoneNums) { ...

  8. Console ArcEngine 许可绑定

    using ESRI.ArcGIS.Carto;using ESRI.ArcGIS.Geodatabase;using ESRI.ArcGIS.DataSourcesFile; using ESRI. ...

  9. app 尺寸

    web app 手机桌面logo尺寸大小(三种 ):114 72 57 

  10. bootstrap日期插件

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...