使用RAIL模型优化web性能

2024年2月14日 365次阅读 来源: Jeffrey

简介

RAIL模型是一种以用户为中心的性能模型。最终目标不是让网站在任何设备上都可以运行很快，而是使用户满意。RAIL代表四个指标：

  • Response 响应：在100ms内响应
  • Animation 动画：在10ms内生成一帧
  • Idle 空闲：将推迟的工作分为50ms的块，利用空闲时间完成
  • Load 加载：在1000ms内呈现内容

加载优化

可以通过Lighthouse PageSpeed WebPageTest Pingdom等工具来检测加载的时间。
加载的主要内容有：

文本内容

  • 文本内容需要压缩。在不影响代码功能的情况下，通过删除空格缩进和不必要的字符来压缩。可以借助很多压缩的工具，比如Minifer、HTML Minifer等。
  • 在服务端设置Gzip压缩，Gzip擅长文本压缩，可以减少70%以上的体积，但对非文本的压缩效果很不好，比如图片。以apache服务器为例，设置.htaccess文件如下
<IfModule deflate_module>
    # Enable compression for the following file types
    AddOutputFilterByType           \
     DEFLATE                        \
      application/javascript        \
      text/css                      \
      text/html                     \
      text/javascript               \
      text/plain                    \
      text/xml
</IfModule>
  • 减少第三方库的体积，比如，如果没有使用到jQuery的大部分功能，仅仅是使用其单个功能，可以用其他方式来替代，而不是引入整个库。

图形内容

  • 移除不必要的图片，或者延迟其加载
  • 选择合适的图片格式，在需要透明背景时选择png，普通照片选择jpg，动画选择gif。png的质量并没有明显比jpg好，适当的选择jpg而不是png可以大幅度减少图片的体积。
  • 删除图片的meta信息，meta信息包括相机硬件信息、时间戳、软件信息、文件格式、地理信息等，对于大多数网站来说，这些信息都不重要。使用工具(VerExif)可以移除这些信息，压缩效果大约在10%左右。
  • 减小图片尺寸或裁剪图片：根据设备使用尺寸合适的图片；裁剪图片，只保留关键的图片内容；
  • 压缩图片：使用在线工具tinypng可以大幅度压缩图片，大约可以压缩50%~70%。

HTTP请求

所有的资源都需要从服务器请求，请求优化方式有：

  • 合并文本文件
  • 合并图片资源，雪碧图
  • 使用HTTP2，HTTP2可以多路请求，大大提升了HTTP的请求速度
  • 将关键的script提取出来作为内联脚本，优先执行，而不是和其他script一切放到外置文件中

HTTP缓存

当浏览器首次加载一个页面时，会缓存页面资源到http cache，这样在下一次访问这个页面时，就可以利用之前的缓存，从而加快访问。

  • 启用缓存，缓存那些很久都不会改变的资源，比如网站logo
  • 设置缓存头，cache-control(no-cache no-store public private max-age)与expires

参考

Measure Performance with the RAIL Model

    原文作者：Jeffrey
    原文地址: https://segmentfault.com/a/1190000014743918
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞