同信长春网络公司为您提供长春网站建设、高端网站制作、高效网站设计、长春做网站、建网站服务,专业服务,免费优化推广!电话:18943130809

移动网站页面制作解析-网站建设分享移动网站页面性能如何优化
栏目:建站常识 发布时间:2021-09-10
<  

随着挪动互联网的发展,咱们越发要关注挪动页面的机能优化,今天跟大家谈谈这方面的事件。先,为什么要挪动页面进行优化?
纵观目前挪动网络的现状:
挪动页面布局越来越庞杂,后果越来越炫,直接导致了文件越来越大,下载跟运行速度越来越低,而速度低会造成不良影响,据统计:
71%的用户冀望挪动页面跟PC页面一样快,74%的用户能容忍的响应时光为5秒,所以咱们必须保障挪动端页面有足够的速度。
挪动页面的速度跟三个因素有关,分辨是:挪动网络带宽速度,设备机能(CPU,GPU,浏览器),页面自身。
目前主流的挪动网络制式为3G:
今年,咱们还看到了4g网络制式在疾速发展,这再一次晋升了挪动页面的加载速度;
而挪动设备自身,截止到目前,以iPhon6/三星Note4等设备为,智能设备已经变得比以往屏幕更大,CP
U、GP
  U、内存更靠谱。网站制作通俗的来说就是网站通过页面结构定位,合理布局,图片文字处理,程序设计,数据库设计等一系列工作的总和,也是将网站设计师的图片用HTML(标准通用标记语言下的一个应用)方式展示出来。
而与其同时,浏览器产商也为晋升页面的速度做出了不可磨灭的尽力。
网络制式供给商,手机制造商,浏览器产商如此给力,咱们呢?咱们能做什么。
咱们能做得是对挪动端页面自身优化,这也是咱们价值的体现,所以咱们必须做挪动端页面机能优化。
该怎么做挪动端页面优化呢?
在说这个前,要提一下PC常用的优化手段:
代码优化(cs
  S、htm
  L、js优化)减少HTTP恳求(雪碧图,文件合并&hellip;)减少DOM节点无阻塞(内联CSS,JS置后&hellip;)缓存

这些手段大局部实用于挪动端,这都是一些耳熟能详的手段,今天这里就讲了,有兴趣可能参考PDI课程《网站机能优化》。
今天要讲的重要是一些实用于挪动真个优化手段,当初进入正题。
先咱们得关注一下一个页面从开端到显现结束须要经历什么阶段,重要有四个阶段:
每个阶段的重要工作如上图所示,而咱们的优化目标是:
下面咱们来针对上面的多少个阶段细说一下都有哪些优化手段。
先,来看看加载中有哪些优化手段:
1. 预加载
预加载方法有两种:
A. 显性加载
类似这种用户能明显感知的,我把它称为显性加载,互动页面都倡导加上这种加载方法,它一方面能增加页面的趣味性,另一方面能让后续页面闭会更流畅。
B. 隐性加载
这种在加载张图片的时候已经预先加载了第二张图片,从而使得页面闭会更流畅的方法,我把它称为隐性加载,这种方法的利益是节俭流量之余又能使得闭会加强。

  2. 按需加载
按需加载是不可或缺的优化手段,重要有以下两种方法:
对这种方法,在屏加载的时候把屏的内容加载尽量,而位于屏之外的元素都只在出当初屏时才加载,很大水平地节俭了流量,晋升了次加载时光。
这种叫响应式加载方法,意思是利用JS 或者CSS 判断辨别率,从而抉择不同尺寸的图片进行引入,这种的利益不问可知,同样可能加快加载速度跟节俭流量。

  3. 紧缩图片
对紧缩图片,先要提的是jpg文件:
对挪动真个JPG 文件,有这样的论断:
利用大尺寸大有损紧缩比的jpg利用jpegtran进行无损紧缩
而对png有以下论断:
多彩图片利用png24低彩图片利用png8推荐利用pngquant尽量避免重定向
为什么要尽量避免重定向呢?因为如图:
这是一个同一网速下的测试结果,重定向之所以会比较慢,是因为它重复了域名查找,tcp链接,发送恳求。
5. 利用其余方法取代图片
有两种方法,种是:依附CSS 3绘制图片:
第二种:利用iconfont取代图片
但iconfont不一定比图片好,这里做了个实验:
对大图片,iconfont并不比雪碧图好,倡导单侧小尺寸图标才利用iconfont.
而后,针对脚本履行中有哪些优化手段,这里只提两点:

  1. 尽量避免DataURI
DataUri在挪动端并不如它在pc端吃香,因为:
经测试,DataURI要比简单的外链资源慢6倍,生成的代码文件绝对图片文件体积不减少反而增大,而且浏览器在对这种base64解码进程中须要消耗内存跟cpu,这个在挪动端坏处特别明显。

  2. 点击事件优化
在挪动端请恰当利用touchstart,touchend,touch等事件取代延迟比较大的Click 事件。Click之所以慢是因为mousedown导致的:
而后,针对渲染阶段中有哪些优化手段,这里也只提两点:
1. 动画优化
a)尽量利用css3动画
优点:
不占用js主线程可利用硬件加速浏览器可对动画做优化
毛病:
不支撑旁边状况监听
b)恰当利用canvas动画
优点:
可躲避渲染树的盘算渲染更快
毛病:
开发本钱高,维护较麻烦。
通过对CSS 3动画跟Canvas 动画对比:
得到论断:5个元素以内利用css3动画,5个以上利用canvas动画。
c)公道利用RAF(requestAnimationFrame)
优点:
能解决脚本问题引起的丢帧,卡顿问题支撑旁边状况监听
毛病:
兼容问题
通过RAF动画与settimeout动画对比:
得到论断:不须要兼容android 4.3浏览器的情况下,请利用RAF制造脚本动画
2. 高频事件优化
类似touchmove,scroll这类的事件可导致屡次渲染,对这种事件可能通过以下手段进行优化:
1.利用requestAnimationFrame监听帧变更,使得在正确的时光进行渲染
2.增加响应变更的时光间隔,减少重绘次数。
后,针对合成/绘制只提一个优化手段:
GPU加速
触发GPU加速的方法有:
CSS3 transitionsCSS3 3D transformsWebGL 3D 绘制Video

利用GPU加速前有对比实验:
GPU加速实际上是大幅减少了合成/绘制时光,从而大大地进步了页面速度,但GPU加速有自己的毛病:
过多的GPU层会带来机能开销,重要起因是利用GPU加速切实是利用了GPU层的缓存,让渲染资源可能重复利用,所以一旦层多了,缓存增大,就会引起别的机能问题。
总结
本文针对页面显现的四个阶段提出了比较典范的优化手段,到后,再提示读者一下:切实优化是双刃剑。
按需加载晋升速度,但可能导致大量重绘;
Touch响应快,但很多场景不适合;
GPU加速效力高,但内存开销大等等
Loading会让整体闭会流畅,但轻易造成用户消散
图片紧缩让带宽本钱降落,但可能会导致视觉后果变差
类似这样的抵触点还有很多,请结合业务按如实际情况进行优化。网站制作通俗的来说就是网站通过页面结构定位,合理布局,图片文字处理,程序设计,数据库设计等一系列工作的总和,也是将网站设计师的图片用HTML(标准通用标记语言下的一个应用)方式展示出来。
http://www.ccjz.cn
>