多彩图片使用png8推荐使用尽量避免重定向呢？

　　多彩图片使用png8推荐使用尽量避免重定向呢？

　　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.尽量避免使用DataURIs

　　DataUri在移动端不像在PC端那样受欢迎，因为：

　　

　　经过测试，DataURI比简单的外部链接资源慢6倍。相对于图像文件，生成的代码文件不会减少，但会增加大小。另外，浏览器在解码此base64的过程中需要消耗内存和cpu。缺点在移动终端上特别明显。

　　2.点击事件优化

　　在移动终端上，请使用touchstart，touchend，touch和其他事件，而不要使用具有较大延迟的click事件。单击缓慢的原因是由于鼠标按下：

　　

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

　　1.*敏*感*词*优化

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

　　优势：

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

　　缺点：

　　不支持中间状态监视

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

　　优势：

　　可以避免渲染树的计算渲染更快

　　缺点：

　　开发成本高，维护麻烦。

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

　　

　　得出结论：css3*敏*感*词*使用少于5个元素，canvas*敏*感*词*使用超过5个元素。

　　c）合理使用RAF（requestAnimationFrame）

　　优势：

　　它可以解决由脚本问题引起的帧丢失和冻结问题。支持中间状态监视。

　　缺点：

　　兼容性问题

　　

　　RAF*敏*感*词*和settimeout*敏*感*词*之间的比较：

　　

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

　　2.高频事件优化

　　

　　触摸移动和滚动之类的事件可能会导致多个渲染。对于此类事件，可以使用以下方法进行优化：

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

　　2.延长了响应更改的时间间隔并减少了重画次数。

　　最后，仅提及一种针对构图/绘图的优化方法：

　　GPU加速

　　触发GPU加速的方法是：

　　CSS3转换CSS3 3D转换WebGL 3D渲染视频……

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

　　

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

　　过多的GPU层将带来性能开销。主要原因是使用GPU加速实际上使用了GPU层缓存来允许重用渲染资源。因此，一旦有更多的层，缓存将增加，这将引起问题。性能问题。

　　摘要

　　

　　本文为页面渲染的四个阶段提出了典型的优化方法。最后，我提醒读者，优化是一把双刃剑。

　　按需加载可以提高速度，但可能会导致大量重绘；

　　触摸反应很快，但不适用于许多场景；

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

　　加载将使整体体验流畅，但很容易导致用户流失

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

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

　　以上是对四个方面的介绍，可帮助您优化移动页面的性能。有关更多内容，请继续关注脚本首页！