前端性能优化

资源的合并与压缩

减少http请求数量尽量合并css和js文件
减少请求资源的大小进行代码压缩

html代码压缩就是压缩在这些文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符,HTML注释等.

css压缩删除无效代码 css语义合并

Js压缩与混乱删除无效字符的删除删除注释代码语义缩减和优化

使用在线网站进行压缩

使用构建工具进行压缩fis3,gulp,webpack,grunt等

使用clean-css对css进行压缩,html-minifier对html进行压缩,uglifyjs2对js进行压缩.
文件合并

使用在线网站进行文件合并

使用nodejs实现文件合并

图片相关的优化

采用雪碧图 将多个小图片整合到一张单独的图片中 减少网站的http请求数量 使用Compass生成雪碧图
使用base64字符
使用svg绘制矢量图
使用iconfont等字体图标
在android中使用webp格式(ios webview中有兼容性问题) 可以使用构建工具或在线网站将png转换成webp格式
对图片进行压缩常用 TinyPNG 或智图

懒加载和预加载

懒加载 图片进入可视区域之后再请求图片资源

<!-- 引入所需js -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<!-- 将图片地址放在data-original属性上 给图片添加class(lazy) -->
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
<script>
$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用默认图片提前占位
  effect: "fadeIn", // 载入使用何种效果
  threshold: 200, // 提前开始加载
  event: 'click',  // 事件触发时才加载
  container: $("#container"),  // 对某容器中的图片实现效果
});
</script>

预加载 `图片等静态资源在使用之前的提前请求
preload.js

<img src="xxx.jpg"  alt="" style='display:none' />
<!-- 或者使用preload.js -->
<script src="../preload.js"></script>
<script>
var queue = new createjs.LoadQueue(false);
  queue.on("complete", handleComplete, this);
  queue.loadManifest([
    {id: "myImage", src:"path/to/myImage.jpg"}
  ]);
  function handleComplete() {
    var image = queue.getResult("myImage");
    document.body.appendChild(image);
  }
</script>

减少浏览器重绘与回流

回流或重排（Reflow） 当render tree中的一部分或全部因为元素的大小尺寸,布局,隐藏等改变而需要重新构建当页面布局和几何属性改变时就需要回流 位置发生变化增加、修改、删除DOM节点等

重绘（Repaint） 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局如(background-color)变化位置不发生改变

注:回流必将引起重绘,但重绘不一定能引起回流

回流何时发生: 页面布局和几何属性改变时,如: 添加或删除可见的DOM元素, 元素位置改变, 元素尺寸改变, 浏览器窗口尺寸改变

减少重绘与回流的方式

用translate替代left,top等位置的改变 (不会触发layout)
用opacity替代visibility
不要一条条地修改DOM样式,预先定义好class,然后修改DOM的className
把DOM离线后修改,比如: 先把DOM给display:none 修改后再显示出来
启用GPU硬件加速 transform:translateZ(0)或translate3D(0,0,0)
减少对DOM的操作,避免频繁操作DOM,使用fragment文档碎片,对DOM节点的操作统一处理后,再插入到DOM中

浏览器存储

cookie 作为客户端浏览器存储大小4kb左右需要设置过期时间expire
localStorage 专门用于浏览器本地缓存大小为5M左右
sessionStorage 会话级别的浏览器存储可用于表单信息的维护
IndexedDB 用于客户端存储大量结构化数据为应用创建离线版本
PWA (Progressive Web App) 渐进式的Web App
1. 在没有网络的环境中也能提供基本的页面访问不会出现”未连接到互联网”的页面
2. 针对网页渲染及网络数据访问有较好优化
3. 应用可以被添加到手机桌面，和普通应用一样有全屏，推送等特性
4. 性能检测及pwa检测lighthouse
Service Workers 是独立于当前页面的一段运行在浏览器后台进程里的脚本。具有拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。
查看service-workers chrome://inspect/#service-workers或chrome://serviceworker-internals

缓存

客户端和浏览器协商缓存 http header

缓存

浏览器通过请求头 Cache-Control 来控制是否使用缓存资源，通过 ETag 来验证缓存是否可用
对于不想缓存的资源，可以使用no-store(不存储)，no-cache(不使用浏览器缓存)
对于想缓存的资源, 使用max-age来控制缓存的寿命(单位秒),只要缓存在有效期内, 那么浏览器就会使用缓存的资源, 返回的状态为 200 from disk或200 from memory 指定文件被缓存多久
如果缓存已过期, 客户端发起请求时, 会携带一个If-None-Match头给服务器, 服务器对资源的缓存进行一次检索, 如果文件没有改变, 那么就返回304, 这样就不用把响应体发送回来, 如果文件改动了, 那么就把新资源返回

强缓存

Cache-Control 相对时间内相对于客户端 http1.1引入Cache-Control
max-age(缓存最大有效时间) 指定文件被缓存多久
s-maxage(缓存最大有效时间，只针对public(CDN)，读取CDN缓存) 优先级高于max-age
private(访问当前浏览器的用户可访问)
public(可以被很多用户访问例如CDN)
no-cache(不会从浏览器读缓存，发请求到服务器端去判断缓存有效期)
no-store(不使用任何缓存策略)
expires 服务器返回的绝对时间可能与本地客户端时间不一致
缓存过期时间，用来指定资源到期时间，是服务器端的具体的时间点，告诉浏览器在过期时间内浏览器可以直接从浏览器缓存,读取文件数据，而无需再次请求。当两者都存在时，cache-control:max-age优先级高于expires, 是http1.0特性, expires使用特定的服务器时间,要求服务器和客户端严格同步,如果服务器设置的时间到期需要重新设置
Expires 和Cache-Control max-age.如果两者同时出现，HTTP规范规定max-age指令将覆盖Expires头。以Cache-Control:max-age=xxx时间为准

协商缓存

last-Modified/If-Modified-Since 基于客户端和服务端协商的缓存机制需要与cache-control共同使用
last-Modified 存在于 response header中
If-Modified-Since 存在于 request header中
服务端文件有更新时，服务器端在response header中返回新的last-Modified,告诉浏览器文件已更新
Etag/If-None-Match 文件内容hash值需要与cache-control共同使用
Etag 存在于 response header中
If-None-Match 存在于 request header中
Etag 优先级高于 last-Modified

Vue-SSR 服务端渲染

SSR(Server Side Readering)

其他

window.performance.timing 监控页面加载速度的api
在js中尽量减少闭包的使用(闭包会产生不释放的栈内存)
尽可能的手动释放不被占用的内存
使用CDN加速

服务器相关优化

开启gzip压缩

gzip on; # 开启Gzip
gzip_static on; # 开启静态文件压缩
gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

开启HTTP2—一个域只建立一次TCP连接，请求和响应的多路复用、头部压缩
使用http2需要配合https使用, 使用https需要ca证书阿里云https证书购买 (有免费的ca证书)
开启缓存