seo关键解码:网站营销与搜索引擎优化( 实现网页图片预加载效果的3种技术方法(组图))

　　seo关键解码:网站营销与搜索引擎优化(

实现网页图片预加载效果的3种技术方法(组图))

　　1、预加载

　　对于图片预加载，我在马海翔的博客《实现网页图片预加载效果的三种技术方法》中已经详细介绍过。这里我简单介绍一下两种预加载方式：

　　A、显式加载

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

　　B、隐式加载

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

　　2、按需加载

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

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

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

　　3、压缩图片

　　关于图像压缩，我在马海翔的博客上已经多次提到了。这里我先说一下jpg文件：

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

　　一种。使用大的有损压缩比的大 jpg

　　湾 使用 jpegtran 进行无损压缩

　　至于png格式的图片，我在马海翔的博客《从PNG格式和透明度看PC端和手机端应该使用哪些png格式的图片》中也给大家详细介绍过，这里我主要说一下：

　　一种。使用png24制作彩*敏*感*词*片

　　湾 使用 png8 处理低色度图片

　　C。推荐使用pngquant

　　4、尽量避免重定向

　　为什么我们应该尽量避免重定向？具体原因如下图所示：

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

　　5、用其他方法代替图片

　　图片替换的技术目前有两种方式，

　　第一个是：依靠css3画图

　　第二种：用iconfont代替图片

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

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

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

　　（1），尽量避免DataURI

　　DataUri 在移动端不像 PC 端那么流行，因为经过测试，DataURI 比简单的外链资源慢 6 倍。生成的代码文件相对于图片文件并没有变小而是变大了，浏览器响应的是这种base64。解码过程需要消耗内存和cpu，这对移动终端尤其有害。

　　（2），点击事件优化

　　在移动端，请适当使用touchstart、touchend、touch等事件来代替延迟比较大的点击事件。Click慢的原因是mousedown造成的，如下图：

　　三、渲染阶段有哪些优化方法

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

　　1、*敏*感*词*优化

　　对于*敏*感*词*的优化，简单来说，有以下3种：

　　（1），尽量使用css3*敏*感*词*

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

　　缺点：不支持中间状态监控。

　　(2）、适当使用画布*敏*感*词*

　　优点：可以更快的避免渲染树的计算和渲染

　　缺点：开发成本高；维修麻烦；

　　通过css3*敏*感*词*和canvas*敏*感*词*的对比：

　　结论是：少于5个元素使用CSS3*敏*感*词*，多于5个元素使用canvas*敏*感*词*。

　　（3），合理使用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加速效率高，但内存开销高；加载会让整体体验流畅，但容易造成用户流失；图像压缩降低了带宽成本，但可能会导致视觉效果不佳；类似的矛盾还有很多，请根据业务实际情况进行优化。