时间:2016-02-16 19:02:16
我们在之前的文章中也有不少文章提及移动端页面优化的问题,但大多浅显不够深入。
在移动页面变得越来越酷炫的年代,文件越来越大,和运行速度越来越低的情况不可避免,而加载速度低会造成不良影响,具统计:
71%的用户期望移动页面跟PC页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度。
移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身。
首先,我们要知道,一个页面从开始到呈现必须经历的过程,一共四个过程,如下图:
类似这种用户能明显感知的,我把它称为显性加载,互动页面都建议加上这种加载方式,它一方面能增加页面的趣味性,另一方面能让后续页面体验更流畅。
这种在加载张图片的时候已经预先加载了第二张图片,从而使得页面体验更流畅的方式,我把它称为隐性加载,这种方式的好处是节省流量之余又能使得体验增强。
按需加载是不可或缺的优化手段,主要有以下两种方式:
对于这种方式,在首屏加载的时候把首屏的内容加载尽量,而位于首屏之外的元素都只在出现在首屏时才加载,很大程度地节省了流量,提升了加载时间。
这种叫响应式加载方式,意思是利用JS 或者CSS 判断分辨率,从而选择不同尺寸的图片进行引入,这种的好处显而易见,同样可以加快加载速度和节省流量。
这是一个同一网速下的测试结果,重定向之所以会比较慢,是因为它重复了域名查找,tcp链接,发送请求。
DataUri在移动端并不如它在pc端吃香,因为:
经测试,DataURI要比简单的外链资源慢6倍,生成的代码文件相对图片文件体积没有减少反而增大,而且浏览器在对这种base64解码过程中需要消耗内存和cpu,这个在移动端坏处特别明显。
在移动端请适当使用touchstart,touchend,touch等事件代替延迟比较大的Click 事件。Click之所以慢是因为mousedown导致的:
c)合理使用RAF(requestAnimationFrame)
类似touchmove,scroll这类的事件可导致多次渲染,对于这种事件可以通过以下手段进行优化:
1、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
GPU加速实际上是大幅减少了合成/绘制时间,从而大大地提高了页面速度,但GPU加速有自己的缺点:
过多的GPU层会带来性能开销,主要原因是使用GPU加速其实是利用了GPU层的缓存,让渲染资源可以重复使用,所以一旦层多了,缓存增大,会引起别的性能问题。
推荐阅读
aso优化教程 ASO优化教程:如何才能选出正确的关键词 | 文军营销aso优化教程1.自行分类,提高发现几率: 除关键词外,还要考虑应用将参与竞争的分类。制定分类策略时,应考虑您的应用在哪个类别最具竞争力,能够自然地吸引到最适合的用户。 aso优化教程2.关注竞争对手: 如要找出最佳的关键词,需要密切追踪...百度seo排名优化技巧 百度seo排名优化技巧分享 | 文军营销8、移动页面优化技巧 与PC站类似,需要对移动页面进行必要优化以提升百度移动排名。 需要注意的点:移动站点的标题,关键字,描述的字数应该与PC站有区别,要设置得更少。建议做成移动站后,通过手机浏览器测试,看相关内容是否可以全部正常展现。keynote教程 keynote是什么 | 文军营销Keynote不仅支持几乎所有的图片字体,还可以使界面和设计也更图形化,借助macOS内置的Quartz等图形技术,制作的幻灯片也更容易夺人眼球。另外,Keynote还有真三维转换,幻灯片在切换的时候用户便可选择旋转立方体等多种方式。随着iOS系列产品的...常见的seo排名优化问题有哪些?十种常见百度Seo排名优化技巧 |...8、移动页面优化技巧 与PC站类似,需要对移动页面进行必要优化以提升百度移动排名。 需要注意的点:移动站点的标题,关键字,描述的字数应该与PC站有区别,要设置得更少。建议做成移动站后,通过手机浏览器测试,看相关内容是否可以全部正常展现。