移动网站页面制作解析-网站建设分享移动网站页面性能如何优化

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