页面渲染速度增加的方法和建议

减少渲染阻塞的js和css

为了产生最快的渲染速度，你需要减少关键资源的熟练，减少下载所有关键资源所需要的网络往返的数量，减少关键资源大小总和的字节数！

异步执行js

js资源会默认进行解析阻塞，除非使用async关键字。

解析阻塞强迫浏览器等待CSSOM并且停止DOM的构造，这将会大大延迟页面的渲染。

异步脚本解锁了页面的阻塞解析且不阻塞cssom提前于js脚本的执行。通常，js脚本被异步执行意味着js文件对页面第一次渲染不重要。

Avoid synchronous server calls

使用 navigator.sendBeacon() 方法限制使用unload处理函数使用XMLHttpRequest来发送的数据，它们通常会趁你不注意来减慢页面的传输。

下面的代码展示了怎样使用navigator.sendBeacon()来发送数据到服务器，在pagehide处理函数而不是unload处理函数。

<script>
  function() {
    window.addEventListener('pagehide', logData, false);
    function logData() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
        'Sent by a beacon!');
    }
  }();
</script>

最新的fetch()方法提供了一个简单的方法来异步请求数据。

因为这个方法不是对所有浏览器兼容，所以你应该使用特征检测来测试这个方法是否可以使用。

这个方法使用Promises来处理响应，而不是使用一大堆事件处理函数。

从Chrome43开始，一个fetch响应是一个流对象（a stream object），这意味着我们调用json()同样返回一个Promise

<script>
fetch('./api/some.json')  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem. Status Code: ' +  response.status);  
        return;  
      }
      // Examine the text in the response  
      response.json().then(function(data) {  
        console.log(data);  
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error :-S', err);  
  });
</script>

fetch()方法同样可以处理POST请求

<script>
fetch(url, {
  method: 'post',
  headers: {  
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
  },  
  body: 'foo=bar&lorem=ipsum'  
}).then(function() { // Aditional code });
</script>

推迟js的解析

不重要的脚本可推迟执行解析。

避免长时间运行js

避免长时间运行js，因为长时间运行js将导致CSSOM，DOM和渲染页面的阻塞。如果必须执行一系列的js文件，可以将其细分成更多的状态来允许浏览器在不同的状态中间执行其他操作。

优化css使用

css被要求用来构造render tree并且在页面的最初渲染的时候页面css阻塞js的执行。

你需要确保不必要的css文件被标记为不必要（例如 @media参数设置等），还要确保关键css文件最小化，以及关键css文件加载时间最小化。

将css放置在文档头部

所有的css资源应该被放在文档头部，这样浏览器可以尽快的执行它们。

避免使用@import

CSS 导入 (@import) 可以检测和导入其他的css文件，但是最好不要使用，因为被导入的文件只有在@import规则本身被接受和解析后才会执行，增加了网络往返。

将css写在文档内部

为了最好的性能，你可能会考虑将css写在文档内部，因为这样将会减少外部css文件下载时所耗费的网络往返次数，且只有一个HTML文档被当成关键资源。

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations?hl=en