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

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

　　1.预加载

　　预加载有两种方式：

　　A. 显式加载

　　

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

　　B. 隐式加载

　　

　　这种在加载第一张图片时预加载第二张图片的方法，让页面体验更加流畅。我称之为隐式加载。这种方式的好处是节省了流量，增强了体验。

　　2. 按需加载

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

　　

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

　　

　　这称为响应式加载，即使用JS或CSS来确定分辨率，从而选择不同尺寸的图片进行导入。这样做的好处是显而易见的，而且还可以加快加载速度，节省流量。

　　3. 压缩图片

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

　　

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

　　使用 jpegtran 进行无损压缩，使用具有大有损压缩比的大尺寸 jpg

　　

　　对于 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 加速效率很高，但内存开销很高，等等。

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

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

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

　　以上就是从四个方面对移动端页面性能优化的全部内容的介绍。更多内容请持续关注脚本之家！