seo关键解码:网站营销与搜索引擎优化(1.预加载方式有哪些？-八维教育(组图))

　　seo关键解码:网站营销与搜索引擎优化(1.预加载方式有哪些？-八维教育(组图))

　　1.预加载

　　有两种预加载方法：

　　A. 显式加载

　　

　　类似于用户可以明显感知到的，我称之为显式加载。建议将这种加载方式添加到交互页面中。一方面可以增加页面的趣味性，另一方面可以让后续的页面体验更加流畅。

　　B. 隐式加载

　　

　　这种在加载第一张图片时预加载第二张图片的方式，让页面体验更加流畅。我称之为隐式加载。这种方式的好处是可以节省流量，也可以让页面体验更加流畅。体验得到了提升。

　　2. 按需加载

　　按需加载是必不可少的优化方式，主要有以下两种方式：

　　

　　这样，在首屏加载的时候尽可能多的加载首屏的内容，而位于首屏之外的元素只有出现在首屏时才加载，大大节省了流量，提高了首屏加载时间。

　　

　　这就是所谓的响应式加载方式，就是使用JS或者CSS来确定分辨率，从而选择不同大小的图片进行介绍。这样做的好处是显而易见的，而且还可以加快加载速度，节省流量。

　　3. 压缩图像

　　对于压缩图片，首先要提到的就是jpg文件：

　　

　　对于移动端的JPG文件，有这样的结论：

　　使用大尺寸和大有损压缩比jpg 使用jpegtran 进行无损压缩

　　

　　对于png，有以下结论：

　　彩*敏*感*词*片使用png24，低*敏*感*词*片使用png8，推荐pngquant，尽量避免重定向

　　为什么我们应该尽量避免重定向？因为如图：

　　

　　这是相同网速下的测试结果。重定向较慢的原因是重复了域名查找、tcp链接、发送请求。

　　5.用其他方法代替图片

　　有两种方式，第一种是：依靠CSS 3绘制图片：

　　

　　第二种：用iconfont代替图片

　　

　　但是iconfont不一定比图片好，这里做个实验：

　　

　　对于大图像，iconfont 并不比 Sprite 图像好。建议仅对一侧的小图标使用 iconfont。

　　那么，关于脚本执行中的优化方法，这里只说两点：

　　1. 尽量避免DataURI

　　DataUri 在移动端不像在 PC 端那么流行，因为：

　　

　　经测试，DataURI 比简单的外链资源慢 6 倍。生成的代码文件相对于图像文件并没有减少，而是增加了。另外，浏览器在解码这个base64的过程中需要消耗内存和cpu。这是在移动终端上。缺点特别明显。

　　2. 点击事件优化

　　在移动端，请使用touchstart、touchend、touch等事件代替延迟比较大的click事件。Click慢的原因是mousedown造成的：

　　

　　那么，关于渲染阶段的优化方法，这里只有两点：

　　1.*敏*感*词*优化

　　a) 尝试使用 css3 *敏*感*词*

　　优势：

　　不占用js主线程，可以使用硬件加速浏览器优化*敏*感*词*

　　缺点：

　　不支持中间状态监控

　　b) 适当使用画布*敏*感*词*

　　优势：

　　可以绕过渲染树的计算渲染速度更快

　　缺点：

　　开发成本高，维护麻烦。

　　通过CSS 3*敏*感*词*和Canvas*敏*感*词*的对比：

　　

　　结论是小于5个元素用css3*敏*感*词*，大于5个元素用canvas*敏*感*词*。

　　c) 合理使用 RAF（requestAnimationFrame）

　　优势：

　　可以解决脚本问题导致的丢帧、卡顿问题，支持中间状态监控

　　缺点：

　　兼容性问题

　　

　　通过RAF*敏*感*词*和settimeout*敏*感*词*的对比：

　　

　　结论：如果不需要兼容android4.3浏览器，请使用RAF制作脚本*敏*感*词*

　　2.高频事件优化

　　

　　touchmove 和 scroll 等事件可能会导致多次渲染。对于此类事件，可以使用以下方法进行优化：

　　1.使用requestAnimationFrame监控帧变化，以便在正确的时间进行渲染

　　2. 增加响应变化的时间间隔，减少重绘次数。

　　最后，只提到了一种用于合成/渲染的优化方法：

　　GPU加速

　　触发GPU加速的方式有：

　　CSS3 转换 CSS3 3D 转换 WebGL 3D 绘图视频 ……

　　使用GPU加速之前有对比实验：

　　

　　GPU加速实际上大大减少了合成/绘制时间，从而大大提高了页面速度，但GPU加速有其自身的不足：

　　过多的GPU层会带来性能开销。主要原因是GPU加速的使用实际上是利用了GPU层缓存，从而可以复用渲染资源。因此，一旦有更多层，缓存的增加会导致其他性能问题。.

　　总结

　　

　　本文针对页面呈现的四个阶段提出了典型的优化方法。最后提醒读者，优化是一把双刃剑。

　　按需加载提高了速度，但可能会造成大量的重绘；

　　触摸反应快，但不适合很多场景；

　　GPU加速效率高，但内存开销大等。

　　加载会让整体体验流畅，但容易造成用户流失

　　图像压缩降低带宽成本，但可能导致视觉效果不佳

　　这样的矛盾很多，请根据业务实际情况进行优化。

　　以上就是从四个方面来帮助大家优化移动页面性能的介绍。更多内容，请继续关注脚本之家！