广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

一张图看懂HTML5的上端性能优化

发布时间:2015-10-28 发布作者:老直营威尼斯网址开户 查阅次数:1494次 标签:HTML5

性能优化 代码优化 HTML5优化 HTML5教程 HTML5开发工具

概述

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

2. 在Mobile侧吾们提出三秒种渲染完成首屏指标

3. 基于第二点,首屏加载3秒完成或使用Loading

4. 基于联通3G网络平均338KB/s(2.71Mb/s),以是首屏资源不应超过1014KB

5. Mobile侧因手机配置原因,除加载外渲染速度也是优化细节

6. 基于第五点,要合理处理代码减少渲染损耗

7. 基于第二、第五点,一切影响首屏加载和渲染的代码应在处理逻辑中下置

8. 加载完成下用户交互使用时也需care性能

优化指南

[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80百分比时间,易于 是优化的细节

· 减少HTTP请求

因为手机浏览器再是响应请求为4个请求(Android支持4个,iOS 5下可支持6个),以是要尽量减少页面的请求数,首次加载再是请求数不能超过4个

a) 合并CSS、JavaScript

b) 合并小图片,使用雪碧图

· 缓存

使用缓存可以减少向效劳器的请求数,节省加载时间,以是一切静态资源都要在效劳器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)

a) 缓存一切可缓存的资源

b) 使用长Cache(使用时间戳更新Cache)

c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度,以是要对HTML、CSS、JavaScript等进行代码压缩,并在效劳器端设置GZip

a) 压缩( 诸如,多余的空格、换行符和缩进)

b) 启用GZip

· 无阻塞

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,易于 CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾

部或使用异步方式加载

· 使用首屏加载

首屏的快速显示,可以大大提升用户对页面速度的感知,易于 应尽量针对首屏的快速显示做优化

· 按需加载

将不影响首屏的资源和当上屏幕资源不用的资源放到用户需要时才加载,可以大大提升要紧资源的显示速度和降低总体流量

PS:按需加载会导致大量重绘,影响渲染性能

a) LazyLoad

b) 滚屏加载

c) 通过Media Query加载

 

· 预加载

大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成下再显示页面。但Loading时间过长,会遭成用户流失

对用户行为归纳,可以在当上页加载下一页资源,提升速度

a) 可感知Loading(如进入容量游戏的Loading)

b) 不可感知的Loading(如提上加载下一页)

· 压缩图片

图片是最占流量的资源,易于 尽量避免使用他,使用时决定最合适的格式(实现需求的上提下,以大小判断),合适的大小,然下使用智图压缩,再是在代码中用Srcset来按需显示

PS:过度压缩图片大小影响图片显示成果

a) 使用智图( http://zhitu.tencent.com/ )

b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)

c) 使用Srcset

d) 决定合适的图片(1. webP优于JPG 2. PNG8优于GIF)

e) 决定合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))

· 减少Cookie

Cookie会影响加载速度,以是静态资源域名不使用Cookie

· 避免重定向

重定向会影响加载速度,以是在效劳器正确设置避免重定向

· 异步加载第三方资源

第三方资源不可控会影响页面的加载和显示,易于 要异步加载第三方资源

[脚本执行优化]

脚本处理不当会阻塞页面加载、渲染,易于 在使用时需当care

· CSS写在头部,JavaScript写在尾部或异步

· 避免图片和iFrame等的空Src

空Src会重新加载当上页面,影响速度和效率

· 尽量避免重设图片大小

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能

· 图片尽量避免使用DataURL

DataURL图片没有使用图片的压缩算法文件会变大,并且要解码下再渲染,加载慢耗时长

[CSS优化]

· 尽量避免写在HTML标签中写Style属性

· 避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染,易于 请避免CSS表达式

· 移除空的CSS规则

空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,以是需移除空的CSS规则

· 正确使用Display的属性

Display属性会影响页面的渲染,易于 请合理使用

a) display:inline下不应该再使用width、height、margin、padding以及float

b) display:inline-block下不应该再使用float

c) display:block下不应该再使用vertical-align

d) display:table-*下不应该再使用margin或者float

· 不滥用Float

Float在渲染时计算量比较大,尽量减少使用

· 不滥用Web字体

Web字体需要下载,解析,重绘当上页面,尽量减少使用

· 不声明过多的Font-size

过多的Font-size引发CSS树的效率

· 值为0时不需要尽数单位

为了浏览器的兼容性和性能,值为0时不要带单位

· 准则化各种浏览器上缀

a) 无上缀应放在末了

b) CSS动画只用 (-webkit- 无上缀)两种即可

c) 其它上缀为 -webkit- -moz- -ms- 无上缀 四种,(-o-Opera浏览器改用blink内核,以是淘汰)

· 避免让决定符看起来像替换下

高等级决定器执行耗时长且不易读懂,避免使用

[JavaScript执行优化]

· 减少重绘和回流

a) 避免不需要的Dom操作

b) 尽量改动Class而不是Style,使用classList代替className

c) 避免使用document.write

d) 减少drawImage

· 缓存Dom决定与计算

每次Dom决定都要计算,缓存他

· 缓存列表.length

每次.length都要计算,用一个变量保存这个值

· 尽量使用事件代理,避免批量绑定事件

· 尽量使用ID决定器

ID决定器是最快的

· TOUCH事件优化

使用touchstart、touchend代替click,因快影响速度快。但应careTouch响应过快,易引发误操作

[渲染优化]

· HTML使用Viewport

Viewport可以加速页面的渲染,请使用以下代码

 

· 减少Dom节点

Dom节点太多影响页面的渲染,应尽量减少Dom节点

· 动画优化

a) 尽量使用CSS3动画

b) 合理使用requestAnimationFrame动画代替setTimeout

c) 适当使用Canvas动画 5个圆素以内使用css动画,5个如该使用Canvas动画(iOS8可使用webGL)

· 高频事件优化

Touchmove、Scroll 事件可导致多次渲染

a) 使用requestAnimationFrame监听帧改动,使得在正确的时间进行渲染

b) 增加响应改动的时间区间,减少重绘次数

· GPU加速

CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用

PS:过渡使用会引发手机过耗电增加


集团官网全套VI策划包括哪些?

网络广告更适合中小集团宣传

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图