移动H5前端性能优化

移动H5前端优化，从以下几个方面入手：

1、加载优化

2、图片优化

3、css优化

4、脚本优化

5、渲染优化

加载优化

1、合并CSS、JS

2、合并小图片，使用雪碧图

3、缓存一切可缓存的资源

4、使用长Cache

5、使用外联式引用CSS、JS

6、压缩HTML、CSS、JS

7、启用GZip

8、使用首屏加载

9、使用按需加载

10、使用滚屏加载

11、使用Media Query加载

12、增加Loading进度条

13、减少Cookie

14、避免重定向

15、异步加载第三方资源

图片优化

1、使用智图

2、使用（CSS3、SVG、IconFont）代替图片

3、使用Srcset

4、webP优于JPG

5、PNG8优于GIF

6、首次加载不大于1014KB（基于3秒联通平均网速所能达到值）

7、图片不宽于640

CSS优化

1、CSS写在头部，JS写在尾部或异步

2、避免图片和iFame等的空src

3、尽量避免重设图片大小

4、图片尽量使用DataURL

5、尽量避免在HTML标签中些style属性

6、避免css表达式

7、移除空的CSS规则

8、正确使用display属性

9、不滥用float

10、不滥用web字体

11、不声明过多的font-size

12、值为0时不需要任何单位

13、标准化各种浏览器前缀

14、避免让选择符看起来像正则表达式

脚本优化

1、尽量减少重绘和回流

2、缓存DOM选择和计算

3、缓存列表、length

4、尽量使用事件代理，避免批量绑定事件

5、尽量使用ID选择器

6、使用touchstart、touchend代替click

渲染优化

1、HTML使用Viewport

2、减少DOM节点

3、尽量使用CSS3动画

4、合理使用requestAnimationFrame动画代替setTimeout

5、适当使用Canvas动画

6、Touchmove、Scroll事件会导致多次渲染

7、使用CSS3 transition、CSS3 3D transforms、opacity、canvas、WebGL、video来触发GPU渲染

后续需要展开对每一项进行阐述   以此提醒自己

时间： 2025-01-18 12:47:41

移动H5前端性能优化的相关文章

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

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指

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

移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑

移动H5前端性能优化指南

概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南 [加载优化] 加载过程

大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响是最直接的,推广拉新是一门艺术,用户的留存是一门技术,拉进来留住用户,产品体验很关键,这里我以美柚的页面为例子,用实例展开说明前端优化的基本套路(适合新手上车). WEB性能优化套路 基础套路1:减少资源体积 css 压缩 响应头GZIP js 压缩 响应头GZIP html 输出压缩 响应头GZI

移动HTML5前端性能优化指南

(点击看大图) 移动H5前端性能优化指南[托尼托尼研究所] 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成

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

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

前端性能优化知识点汇总

面试必谈的--前端性能优化 为什么做优化 提供给用户最佳体验 #有哪些差的体验 - 白屏好久才显示内容 - h5浪费用户流量 优化方案大概分为以下几种: 1.降低请求数量 a.减少获取数据的接口数(初始数据尽量通过一个接口返回) b.减少js.css的数量(提取公共js.css利用缓存.减少后续加载访问.有些代码直接注入页面无需外链形式访问加载.) c.图片懒加载 2.降低文件大小 a.图片压缩以及使用webp b.压缩js.css c.gzip(设置content-encoding:gzip)

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

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

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.