使用RAIL模型优化web性能

简介

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