性能优化总结

1、减少HTTP请求（减少请求资源大小或者次数）

1、合并和压缩css（将css文件和并为一个）webpack、gulp
代码分割（webpack）一个页面没有用bizchart组件，就不加载
2、雪碧图（用将页面上的背景图合并成一张，然后通过css的（background-position:百分比，数值）属性定义值来取他的背景）；
图片地图（在一个图片上关联多个URL，将多个图片合并成一个图片）
3、尽量所使用的字体图标或者SVG图标来代替传统png图（因为字体图标或者SVG是矢量图，代码编写出来的，放大不会变形，而且渲染速度快）
4、图片的懒加载（　1、页面开始加载时不去发送http请求，而是放置一张占位图
    2、当页面加载完时，并且图片在可视区域再去请求加载图片信息）；尽可能利用 CSS3 效果代替图片

5、（充分利用浏览器缓存也可以减少http请求）

6、前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传送。（相对于使用xml来说，json数据处理方便，资源偏小)------减少资源大小
7、启用Gzip压缩（把文件先在服务器端进行压缩，然后再传输。显著减少文件传输的大小）

8、CDN托管（内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。当服务器离用户越远时，延迟越高。
CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间）

9、防抖debounce和节流（throttle）等优化方式，减少http请求

2、代码优化相关

补充：css放在头部，js放在尾部优化页面原因 - 鸿蒙程序员 - 博客园

href：当CSS使用href引用，浏览器会识别该文档问CSS，并行下载，不会停止对当前文档的加载。
src：当script使用src引用，浏览器解析到该元素时会停止对文档的渲染，直到该资源加载完成。这也是将script放底部而不是头部的原因。

1）html：
    1、CSS放头部，javascript放下方（在加载html生成DOM tree的时候，就可以同时对DOM tree进行渲染。阻塞后面的资源加载）
    2、尽量避免使用iframe（iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析）
    3、不要轻易去使用第三方插件（避免引入第三方大量的库。而自己却只是用里面的一个小功能）
2）CSS
    1、css导入的时候尽量减少@import导入式，因为@import是同步操作，而link是异步的操作
    2、避免使用CSS表达式
3）JS
    1、在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)
    2、在js中尽量减少闭包的使用（使用闭包后，闭包所在的上下文不会被释放）
    3、基于script标签下载js文件时，可以使用defer或者async来异步加载
    4、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画（setTimeout和setInterval在动画执行存在性能问题，且无法准确的控制帧数。）

减少DOM的重绘与回流：
    用innerHTML代替DOM操作，减少对DOM操作；当需要设置的样式很多时设置className而不是直接操作style；将容易产生重绘的元素独立到一个图层
导致回流的一些操作：
    * 页面首次渲染
    * 浏览器窗口大小发生改变
    * 元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）
    * 元素字体大小变化
    * 添加或者删除可见的 DOM 元素
    * 激活 CSS 伪类（例如:hover）
    * 查询某些属性或调用某些方法
    * 一些常用且会导致回流的属性和方法
clientWidth、clientHeight、clientTop、clientLeftoffsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、
getBoundingClientRect()、scrollTo()

3、缓存

1、设置缓存：在HTTP响应头中添加Expire/Cache-Control 头
强缓存：不向服务器发送请求，直接使用客户端本地缓存数据
协商缓存：向服务器发送请求，由服务器判断请求文件是否发生改变。若未发生改变，则返回304状态码，通知客户端直接使用本地缓存；如果发生改变，则直接返回请求文件。

    第一次访问网页提交http请求，通过使用Expire头，可以使那些组件缓存在浏览器端。
    下次请求时客户端都会通过对比本地时间和服务器生存时间来检测缓存是否可用。
    如果缓存没有超出它的生存时间内，客户端就会直接采用本地的缓存。
    强缓存机制如果检测到缓存失效，就需要进行服务器再验证。
    （重命名文件名：想要获得更新时）
当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
当f5刷新网页时，跳过强缓存，但是会检查协商缓存；
    ctrl+f5：http请求头中多了cache-control:no-control;
如果服务器响应头中规定了Last-Modified，我们还需要在http头部加上If-Modified-Since：0。那必定协商缓存验证不成功

    
即： 结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）。
    可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs

2、使用Ajax缓存
在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存

上述缓存是cdn资源的缓存，还有对请求数据的缓存。
当接口内容返回较多时，可以利用浏览器的indexDB进行内容缓存。先展示之前的内容，再进行请求。如果两次有不同，就进行覆盖

f5和ctrl f5    为什么F5不能跳过缓存,而后者可以.答案就是发送的请求头不一样

4、减少DNS查询

一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。
所以减少dns查询的时间可以加快页面的加载速度。

前端性能优化汇总 - 会飞的猪~~ - 博客园

在vue项目中用到的提高性能的方法：

1） Vue-router优化
    1、路由懒加载（把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件）

2）http连接优化
    1、减少HTTP请求
    2、合理使用缓存
    3、使用字体图标
    4、图片懒加载

3）组件优化
    1、按模块划分路由。按照业务模块划分路由及子路由，保证模块间的隔离
    2、能复用的组件尽量复用。布局、功能模块等均可复用，如：导航栏等。

4） 代码优化
    1）第三方引入优化：去除不必要的引入，如jq；
    2）基础优化
        v-if，v-show的选择。权限相关使用v-if、频繁切换使用v-show、不频繁切换使用v-if；
        style中使用<style scoped>避免冲突；
        全局style尽量抽象，提高复用率，减小css文件大小，节省带宽；
        提取共用的方法，放在util.js中，例如防抖函数的封装；


better-scroll插件：实现了上拉加载功能，不需要一次请求所有数据（按需加载数据）

基于vue的web前端性能优化 - 深海鱼veritas - 博客园