提升頁面性能的方法有哪些?

1. 資源壓縮合并,減少 HTTP 請(qǐng)求

2. 非核心代碼異步加載

   • 異步加載的方式
     1. 動(dòng)態(tài)腳本的加載(通過document.create一個(gè)script標(biāo)簽,然后再添加到body中去)
     2. defer
     3. async
   • 異步加載的區(qū)別
     1. defer 是在html文檔加載完畢后執(zhí)行,如果是多個(gè)js,則按照加載的順序依次執(zhí)行
     2. async 是在加載完成后立即執(zhí)行,如果是多個(gè)js,加載和執(zhí)行的順序不是依次進(jìn)行

3. 利用瀏覽器緩存(最重要)

   • 緩存的分類
     1. 強(qiáng)緩存 問都不問服務(wù)器,直接拿過來就用了,強(qiáng)制緩存
        • Expires (http響應(yīng)頭上): Expires:Tue, 12 Jun 2018 08:30:15 GMT 這是一個(gè)絕對(duì)時(shí)間
        • Cache-Control: Cache-Control:max-age=31536000 這是一個(gè)相對(duì)時(shí)間,在這個(gè)時(shí)間內(nèi)我不會(huì)再向服務(wù)器去請(qǐng)求資源,都會(huì)在瀏覽器直接拿緩存
        • 總之就是在這個(gè)時(shí)間之前,我不會(huì)和服務(wù)器通信了,直接從副本中拿出來給頁面用
        • 如果這兩個(gè)時(shí)間都下發(fā)了以后者為準(zhǔn)
     2. 協(xié)商緩存 瀏覽器發(fā)現(xiàn)本地有這個(gè)副本,但我又不確定用不用它,那怎么辦啊,我得向服務(wù)器問一下它,這個(gè)文件要不要用
        • Last-Modified if Modified Sence : Last-Modified Wed, 25 Nov 2015 07:48:07 GMT 上次修改的時(shí)間
        • ETag If-None-Match: ETag:"AFxUj3Ewv5-31T_T8ldpjkSkJy8D" 哈希值 當(dāng)過了強(qiáng)緩存的時(shí)間,瀏覽器再向服務(wù)器請(qǐng)求問它這個(gè)資源我可不可以再用,就需要 If-None-Match了
   • 緩存的原理

4. 使用CDN

5. 預(yù)解析DNS

   <meta http-equiv="x-dns-prefetch-control" content="on" />
   <link rel="dns-prefetch"  />
   

   ?