前端性能优化

1.dns-prefetch

2.请求合并

合并请求减少http请求消耗，提升访问性能

-  css sprite

- 静态资源合并（css，js合并）

- 接口合并

3.压缩

压缩代码使css、js等静态文件变小。
压缩图片使图片变小。

- Css、js等静态资源压缩
- 图片压缩，在不影响显示质量的情况下。
- Gzip压缩

4. http缓存

基于http缓存的机制，我们可以做预加载的优化，提升交互速度。文件内容更新采用url变更到方式更新。

强制缓存
协商缓存

5.CDN

使用cdn，可以根据访问就近原则，提供就近机房访问服务。

图片、视频、css、js等静态资源
可缓存内容的接口内容

6.合理减少cookie使用

可以启动无cookie的域名，避免http请求携带cookie，减少请求大小。
在一些场景下使用localstorage替代cookie。

7. 首屏css内嵌&非首屏样式按需加载
随着html的解析，直接渲染首屏样式，加快样式展现。后续样式按需动态加载。
8. 避免请求重定向
每一次302跳转，都会有一次http请求，造成总请求时间变长。
9.减少服务器运算时间
减少http请求到达后进行的数据库、IO等操作，对于非实时性内容提前build进模版成为新模版。
动态个性内容浏览器端异步加载（jsonp || ajax）。
10.lazyload
非首屏html和css内容按需加载
非首屏图片显示再加载
11.Html内联js+本地存储
在html结构区，js直接操作本地数据展现
12.非主要内容js放在页面底部
Js后置，减少js加载对html渲染的阻塞。
13.Js重复操作Dom进行缓存
减少reflow和repaint
公共内容抽象提取，减少重复代码
避免使用css表达式。
css选择器尽量明确，快速定位，避免全部查找。
……
 

可以启动无cookie的域名，避免http请求携带cookie，减少请求大小。

在一些场景下使用localstorage替代cookie。

压缩代码使css、js等静态文件变小压缩图片使图片变小。

 

Css、js等静态资源压缩

图片压缩，在不影响显示质量的情况下。

Gzip压缩

2. 请求合并