前端性能优化

1、雪碧图技术
这个很简单，把每个小图标都整合到一张大图上面，极大的减轻http请求数，同时能够让图片快速加载进来。

考虑到当前的5g的发展前景，以后图片不会造成加载延迟的现象。

2、浏览器渲染机制
输入一个网址：我们得到服务端html文件。

根据html文件，从头到尾的一个个的依次渲染页面渲染页面。

但是遇到图片——不会等待图片的加载完毕，会直接渲染下面的标签。

如果图片加载出来——根据图片选择，由于图片要占用空间，决定是否重新加载页面，这个概念叫reflow。（优化的方式——给图片宽高）。

reflow和什么相关：占位面积、定位方式、边距。

对于样式中的颜色变化，叫做repaint、这个就只需要把颜色改变。所以性能上来说，repaint稍微比reflow高点。

repaint和什么相关：和颜色变化相关

3、webpack、gulp等打包工具的使用
压缩代码，减少了代码体积。

可以把多个css文件，多个js文件，合并为一个css文件/js文件。

合并文件，让我们减少了http请求数。

4、避免页面跳转，也就是使用单页面应用的开发。
每次页面跳转，就是一次html文件的下载过程。而这个过程，我们首先从服务端下载网页，再进行渲染，网页性能体验会很差。而单页面应用，它从一开始，就把完整的网页给加载到本地。

5、延迟加载、懒加载技术
什么是懒加载技术：

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

6、将css放在HEAD中
如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

7、Vue项目的按需加载
vue中的懒加载是通过webpack的代码分割来实现的，下面是官网文档：https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

主要是在加载路由的时候，使用：
const Main = r => require.ensure([], () => r(require(‘…/views/main/Main’)))

require.ensure就是webpack提供的异步加载的方式。

8、关于React的性能优化
react中，进行性能优化的核心就是shouldComponentDidMount周期函数。
下面是我写的性能优化的博客：
react性能优化

9、设置合理的http缓存
http请求中，我们可以合理的设置headers，就能达到缓存的目的。

有两种常见的缓存，强制缓存和对比缓存：

第一种：强制缓存。

直接访问浏览器中的缓存数据，如果存在，则直接使用浏览器中的数据。如果不存在，则再向服务器发送请求，然后得到服务器的数据，再把这些数据存在浏览器中。

第二种：对比缓存。

首先，获取浏览器中的数据缓存标识，再获取服务器上面的数据缓存标识，如果相匹配，则直接从浏览器中获取数据，如果不匹配，则从服务器上获取数据。

关于缓存标识，有两类标识：

第一类：
第一次请求，服务器会返回一个Last-Modified。
下一次请求，浏览器会自动在headers中添加一条If-Modified-Since属性，记录的就是上一次数据发生修改的时间。

第二类：
第一次请求，服务端返回一个Etag资源唯一标识符。
第二次请求，浏览器会自动携带一个If-None_Match标识符。

应用程序缓存
创建cache manifest文件，通过给html文件中的HTML标签添加一个manifest属性来实现的。

文档内容......