[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）用来请求图片。
