[TOC]
# 前端優化
這里的前端優化目的是提高頁面的加載速度，提升可訪問性。使用的方法和針對的有如下方面：
### 靜態資源（css,js,images,html）文件
在前面的某些章節已經涉及到圖片優化，其實針對CSS，JS,HTML文檔的優化也是一樣道理，壓縮這些文件。可以使用的工具：
1. [FileOptimizer](http://sourceforge.mirrorservice.org/n/ni/nikkhokkho/FileOptimizer/)(速度較慢)
2. sublime插件(Sublime-Minifier)
(https://github.com/bistory/Sublime-Minifier)（需要搭配sublime）
3. 第三個可以在服務器端配置pagespeed，通過服務器的能力實現靜態資源優化,無需在長傳服務器前做優化(https://chaihongjun.me/os/linux/146.html)
### 服務端升級壓縮模式增加`brotli`壓縮模式
使用前提是服務器端使用的是`https`協議發布（https://chaihongjun.me/os/linux/185.html）
### 部署CDN
如果已經升級到`https`，則推薦使用又拍云聯盟(https://www.upyun.com/league),可以保證https協議也使用CDN
### 代碼端優化
1. 使用預加載等技術
~~~
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//example.com">
<link rel="prefetch" href="image.png">
<link rel="prerender" href="//example.com">
<link rel="preload" href="image.png">
~~~
參考資料：https://css-tricks.com/prefetching-preloading-prebrowsing/
2. 減少http(s)的請求數量
將圖片合并為雪碧圖，小尺寸圖片轉化為base64編碼等操作
3. 其他操作
影響頁面加載的腳步放置在頁面的底部等.
以及為了增加并發能力，將靜態資源分布部署在不同的域名下,比如`css.example.com`，`js.example.com`,`img.example.com`等等
4.增加一個視口內內容預先加載**`quicklink`**
項目地址：[https://github.com/GoogleChromeLabs/quicklink](https://github.com/GoogleChromeLabs/quicklink)
配置方式很簡單，直接在公共庫文件內引入
> [https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js](https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js)
這個項目的文件內容，然后再寫入配置內容:
```
//初始化 quicklink
window.addEventListener('load', () =>{
quicklink({
//啟動fetch
priority:true,
//過濾掉的內容
ignores:[
/baidu/,
/kuaishang/,
uri => uri.includes('.php'),
],
// 本域名或者跨域的域名,當前本域名一定要寫
origins:[
'm.example.com',
'www.example.com',
'uploads.example.com',
'js.example.com',
'css.example.com',
'img.example.com'
]
});
});
```
### 靜態資源禁止發送cookie
請求靜態資源發送cookie的由來是因為同域名下面的任何內容都會在HTTP頭部請求中加載cookie信息。然而靜態文件(圖片，JS，CSS)攜帶cookie沒有任何的意義，反而請求了過多無效的內容。所以，禁止靜態資源的HTTP請求攜帶cookie也是優化頁面的一個方向。
具體做法可以參考：
> [http://ju.outofmemory.cn/entry/27052](http://ju.outofmemory.cn/entry/27052)
按照上述內容描述方法就是給靜態資源單獨設置一個域名，當然，還可以做的更極致，針對圖片，JS和CSS分別設置3個或者更多的域名（cookie-free）用來請求圖片。
