前端性能优化

前端性能优化

性能优化需要从哪几个方面入手？我们要先了解浏览器打开网页的过程。

1. 浏览器对URL进行DNS解析
2. 浏览器与服务器进行TCP连接
3. 浏览器发出HTTP请求
4. 服务器返回HTTP响应
5. 浏览器进行页面渲染

一 浏览器发送HTTP请求

1.减少请求次数

1.资源合并
	---使用打包工具，使用webpack等工具，对js和css资源进行打包，避免js或css文件过多。
 	---但也要考虑打包文件过大的问题，需要再这之间进行综合考虑。
	---在SPA中常用的实践是，webpack提取出的公用文件先加载，然后路由相关的文件按需加载。减小入口文件体积，常用的手段是路由懒加载，开启			路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小，
2.合理利用缓存 
	--- 强缓存（200）本地缓存是最快速的一种缓存方式，只要资源还在缓存有效期内，浏览器就会直接在本地读取，不会请求服务端
	--- 协商缓存（304） 协商缓存，顾名思义是经过浏览器与服务器之间协商过之后，在决定是否读取本地缓存，如果服务器通知浏览器可以读取本				缓存，会返回304状态码，并且协商过程很简单，只会发送头信息，不会发送响应体。

2.缩小请求体积

1. 资源压缩
 --- Gzip，传输的时候可以在服务器端开启gzip压缩，可以有效减少传输文件的大小，可以在响应头content-encoding: gzip中看到。
 --- 代码压缩
 --- 图片压缩
2.图片选用正确的格式
  PNG
  无损格式，压缩率一般，支持透明背景，常用于透明图片或者Icon等。
  JPG
  有损格式，压缩率较好，常用于复杂的大图，不支持透明背景。
  SVG
  矢量图形，可编程。在各分辨率下不失真，但是渲染复杂图形较消耗性能。常用于简单图形。
  WEBP
  无损格式，相较于PNG和JPG来说，压缩率更好，同时支持透明背景。唯一的缺点是兼容性不好。可用于兼容性好的浏览器，用JPG和PNG做回退机制。

二 服务器发送HTTP响应

1.减少响应时间

1.利用CDN 
	---cdn全称content delivery network。它是依靠部署在各地区的边缘服务器，达到用户就近获取内容，降低网络拥塞，提高用户访问速度和命	中率的目的。它主要的关键技术是内容存储和分发技术。
	--- CDN减少打包体积 使用 cdn 文件来减少工程到打包体积

2.降低页面初始渲染时间

1.服务器渲染 ssr

三 页面渲染

1.减少阻塞

2.减少渲染次数

1.避免回流与重绘
 ---回流又称为重排，即通过某种手段改变了元素的位置大小等信息，导致浏览器需要重新计算和渲染的过程。而重绘只是被改变了样式如背景和颜色等

3.减少渲染节点数量

1. 懒加载
	---对于一些不在用户视图内的元素，我们可以在展示的时候先不进行渲染，直到该元素出现在了视图内再进行渲染。// 一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是：

在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

四 其他

......