1、了解8s原则

  • 用户在访问网页的时候,如果超过8s就会感到不耐烦,大部分用户都希望网页在2s内进入;因为加载时间每多1s,就会流失7%的用户;而8s不是准确的,只是向开发者表明加载时间的重要性

2、常见优化方法

2.1 资源压缩与合并

2.1.1 html压缩

  • html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩

2.1.2 css压缩

  • css代码压缩简单来说就是无效代码删除和css语义合并

2.1.3 js的压缩和混乱

  • 无效字符的删除
  • 剔除注释
  • 代码语义的缩减和优化
  • 代码保护(代码逻辑变得混乱，降低代码的可读性，这点很重要)

2.1.4 文件合并

  • 文件与文件之间有插入的上行请求，增加了N-1个网络延迟，受丢包问题影响更严重
  • keep-alive方式可能会出现状况，经过代理服务器时可能会被断开，也就是说不能一直保keep-alive的状态
  • 压缩合并css和js可以减少网站http请求的次数，但合并文件可能会带来问题:首屏渲染和缓存失效问题。那该如何处理这问题呢？——公共库合并和不同页面的合并

2.2 非核心代码异步加载异步加载的方式

2.2.1 异步加载的方式

async方式

  1. // async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
  2.     // async属性规定一旦脚本可用，则会异步执行
  3.     // async属性仅适用于外部脚本
  4.     // 如果是多个脚本，该方法不能保证脚本按顺序执行
  5.     <script type="text/javascript" src="xxx.js" async="async"></script>

defer方式

  1. // 兼容所有浏览器
  2.     // defer属性规定是否对脚本执行进行延迟，直到页面加载为止
  3.     // 如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行
  4.     // 如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度
  5.     <script type="text/javascript" src="xxx.js" defer="defer"></script>

动态创建script标签

  1. // 在还没定义defer和async前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中
  2.     function addScriptTag(src){  
  3.         var script = document.createElement('script');  
  4.         script.setAttribute("type","text/javascript");  
  5.         script.src = src;  
  6.         document.body.appendChild(script);  
  7.     }  
  8.     window.onload = function(){  
  9.         addScriptTag("js/index.js");  
  10.     }

2.2.2 异步加载的区别

  • defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
  • async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

2.3 利用浏览器缓存

  • 对于web应用来说，缓存是提升页面性能同时减少服务器压力的利器

2.3.1 强缓存

  • 不会向服务器发送请求,直接从缓存中读取资源【在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache】

  • 相关header

    • Expires ：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。它的值为一个绝对时间的GMT格式的时间字符串， 比如Expires:Thu,21 Jan 2018 23:39:02 GMT
    • Cache-Control ：这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示。当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。比如Cache-Control:max-age=300，

2.3.2 协商缓存

  • 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；另外协商缓存需要与cache-control共同使用

2.4 使用CDN

  • 大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存，因为浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载

2.5 预解析DNS

  • 通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。