web前端性能优化

前言

性能优化是每一个项目都须要注意的问题，在这里结合项目实际状况较为系统的整理下

web前端性能优化简单能够归纳为如下几点

1 减小须要加载资源的体积

1.1 按需加载

就是每一个页面之加载须要的内容，这一点在多页应用中通常都有注意，单页应用能够用webpack的import与vue的异步组件实现；react因为本人不熟，确定也有相应的解决方案

1.2 资源压缩

在目前的webpack4+中，只要将mode设置为production，webpack就会将对应的资源（html、css、js）进行压缩；gulp也有对应的模块（html-min,uglify）

1.3 懒加载

将首屏不须要展现内容作懒加载处理，在须要展现时（好比滚动屏幕）再加载须要的内容

2 加快加载的速度

2.1 css精灵图

这是一种比较经常使用的技术，就是jiang将页面须要展现的小图片图标集中到一整张图片中，经过background-position设置来展现，原理是因为浏览器对同一域名下的请求有并发个数限制（通常在4-10个）

2.2 cdn加速

cdn原理简单来讲就是经过dns的负载均衡，将访问解析到最近的服务器，该服务器首次会到目标服务器加载内容，同时会缓存该内容，此后该地区访问此资源的时候就能直接读取服务器上的缓存内容；从而块加载的速度；同时还能够突破浏览器的并发个数限制于服务器的带宽限制

3 http协议相关(须要对服务器软件进行相应配置)

3.1 缓存

3.1.1 Last-Modified(http1.0)与ETag(http1.1)，浏览器会对响应头中有此两个字段的内容进行缓存，下次访问此资源的时候会带上f-Modified-Since(与Last-Modified相对应)If-None-Match(与ETag相对应);服务器在识别到文件没有变化的时候，会返回状态码304,同时也不会返回响应体；浏览器接收到服务器返回的内容后就会从缓存中读取相应内容；
关于为何会有两个字段，http1.0与http1.1各一个，由于http1.0中的约定会有服务器于客户端时间不一致的状况；下同

3.1.2 Expires（http1.0）与Cache-Control: max-age=86400（http1.1），此个字段与3.1.1相似，不一样的是浏览器读到对应缓存后，若是没过时，就不会请求服务器，直接使用缓存里的内容

3.1.3 keep-alive，与tcp协议的三次握手相关，有此字段将会保持tcp连接，省去再次握手的过程；保持的时间可经过服务器软件进行配置

3.1.4 Accept-Encoding，这个须要浏览器处理

4 浏览器相关

4.1 defer与async

因为script会阻塞浏览器对html的解析，对与没有依赖关系的script加上defer或async

4.2 图片用背景图的形式展现

此方法是因为img标签会阻塞html的解析

结语

性能优化认证道远，目前只想到这些，算是抛砖引玉了，有没涉及到或者错误之处请大佬们不吝指正，谢谢~~