加载优化
加载过程是最为耗时的过程,可能会占到总耗时的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) 使用智图
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))
减少Cookie
Cookie会影响加载速度,所以静态资源域名不使用Cookie。
避免重定向
重定向会影响加载速度,所以在服务器正确设置避免重定向。
异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。
渲染优化
HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点
动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画
高频事件优化
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
b) 增加响应变化的时间间隔,减少重绘次数
GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。
PS:过渡使用会引发手机过耗电增加。
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意:
CSS写在头部,JavaScript写在尾部或异步。
避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
尽量避免重设图片大小。
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。
关注深正互联,每天学习工程师在开发中解决的技术总结~

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
电子商务网站设计分析系列之一:优秀的导航设计
伴随着互联网的成长,通过电子商务网站实现商品交易越来越频繁,而访客在面对越来越庞大的信息量时会感到迷茫,因此,优秀的导航设计能够提高网站的易用性
-
如何提升用户体验的交互?
众所周知,我们总是依据封面来判断书的好坏,聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引,但如何一直黏住他们呢?
-
【资讯】企业做网站 如何把控好网站质量
企业网站开发对于每个企业都非常重要,一个企业网站开发的当,不仅会给客户留下一个好印象,更可以凭借官网吸引客户的目光,帮助成交。然而不少企业在网站开发时候喜欢盲目跟风,在细节方面不够注意,从而造成了损失。今天深正互联就为大家介绍一下企业网站开发注意事项吧。
-
中小企业怎样才能将网站制作好?
中小企业售卖服务和产品比较单一,所以做好顾客的体验变得尤为重要。为了增加售卖和服务覆盖范围,我们应该在PC端和手机端同时制作网站,这样才能在短期才能有更多的渠道,网站制作对于我们中小企业都是一笔不小的开支....
-
亲爱的客户朋友们,我们搬家啦!
承蒙您长期以来大力支持与配合,感谢您和我们一起的付出,在此,深正互联全体员工谨表示由衷的致谢...