内容简介:减少资源大小可以加快网页显示速度,所以要对写在
减少资源大小可以加快网页显示速度,所以要对 HTML
、 CSS
、 JavaScript
等进行代码压缩,并在服务器端设置 GZip
GZip
2.3 无阻塞
写在 HTML
头部的 JavaScript
(无异步),和写在 HTML
标签中的 Style
会阻塞页面的渲染,因此 CSS
放在页面头部并使用 Link
方式引入,避免在 HTML
标签中写 Style
, JavaScript
放在页面尾部或使用异步方式加载
2.4 使用首屏加载
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。
2.5 按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。
PS:按需加载会导致大量重绘,影响渲染性能
LazyLoad Media Query
2.6 预加载
大型重资源页面(如游戏)可使用增加 Loading
的方法,资源加载完成后再显示页面。但 Loading
时间过长,会造成用户流失。
对用户行为分析,可以在当前页加载下一页资源,提升速度。
Loading Loading
2.7 压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用 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
(基于手机屏幕一般宽度))
2.8 减少Cookie
Cookie
会影响加载速度,所以静态资源域名不使用 Cookie
。
2.9 避免重定向
重定向会影响加载速度,所以在服务器正确设置避免重定向。
2.10 异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源
2.11 减少HTTP请求
因为手机浏览器同时响应请求为4个请求( Android
支持4个, iOS
5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个
- a)合并
CSS
、JavaScript
- b)合并小图片,使用雪碧图
三、脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意
-
CSS
写在头部,JavaScript
写在尾部或异步 - 避免图片和
iFrame
等的空Src
,空Src
会重新加载当前页面,影响速度和效率。 - 尽量避免重设图片大小
- 重设图片大小是指在页面、
CSS
、JavaScript
等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能 - 图片尽量避免使用
DataURL
,DataURL
图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长
四、CSS优化
尽量避免写在HTML标签中写 Style
属性
4.1 css3过渡动画开启硬件加速
.translate3d{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
4.2 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
4.3 不滥用Float
Float在渲染时计算量比较大,尽量减少使用
4.4 值为0时不需要任何单位
为了浏览器的兼容性和性能,值为 0
时不要带单位
五、JavaScript执行优化
5.1 减少重绘和回流
- 避免不必要的Dom操作
- 尽量改变
Class
而不是Style
,使用classList
代替className
- 避免使用
document.write
- 减少
drawImage
5.2 TOUCH事件优化
使用 touchstart
、 touchend
代替 click
,因快影响速度快。但应注意 Touch
响应过快,易引发误操作
六、渲染优化
6.1 HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
6.2 动画优化
- 尽量使用
CSS3
动画 - 合理使用
requestAnimationFrame
动画代替setTimeout
- 适当使用
Canvas
动画5
个元素以内使用css
动画,5
个以上使用Canvas
动画(iOS8
可使用webGL
)
6.4 高频事件优化
Touchmove
、 Scroll
事件可导致多次渲染
requestAnimationFrame
以上所述就是小编给大家介绍的《移动端优化篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 移动端专题系列(二)移动端动画
- 【移动端DL框架】当前主流的移动端深度学习框架一览
- T 沙龙移动实践日(201808)—— 蜂鸟团队移动端异常监控体系建设
- MongoDB收购移动数据库初创公司Realm 加速向移动市场扩张
- 【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案
- 谷歌下架 600 款广告欺诈 App,猎豹移动全部 45 款被封!猎豹移动回应了
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ACM图灵奖演讲集
阿申豪斯特 / 苏运霖 / 电子工业出版社 / 2005-4 / 55.0
本书完整地收录了这些演讲,并配之以部分获奖者撰写的后记,旨在反映过去数年来这一领域中发生的变化。对任何一位计算机科学的历史与发展有兴趣的人来说,本书都极具收藏价值。 本文收录了自图灵奖开始颁发的1966年起到1985年这20年间图灵奖获得者在授奖大会上所做演讲的全文。由于在此期间有三次是把奖项同时授予两个人的,而其中有两次两位获奖者分别做了演讲,因此一共收录了22篇演讲稿。本书把这些演讲分为两大......一起来看看 《ACM图灵奖演讲集》 这本书的介绍吧!
在线进制转换器
各进制数互转换器
HEX HSV 转换工具
HEX HSV 互换工具