Preface性能优化是每个项目都需要关注的问题。这里，结合项目的实际情况，web前端的性能优化可以归纳为以下几点：1.减少需要加载的资源量。1.1按需加载就是每个页面加载需要的内容，一般在多页面应用中会被注意到。单页应用可以通过webpackimport和vue异步组件来实现；由于对react不熟悉，肯定有相应的解决方案1.2目前资源压缩在webpack4+中，只要设置mode为production，webpack就会压缩相应的资源（html,css,js）；gulp也有相应的模块（html-min、uglify）1.3Lazyloading不需要在首屏显示内容做lazyloading处理，在需要显示的时候（比如滚动屏幕）再加载需要的内容。在整个画面中，通过background-position设置来展示。原理是浏览器对同一域名下的并发请求数有限制（一般为4-10个）。2.2CDN加速的原理CDN简单来说就是通过DNSBalanced进行负载，解析访问就近的服务器，服务器会在第一时间加载内容到目标服务器，同时缓存内容，然后当region访问这个资源，可以直接读取服务器上的缓存内容；从而阻止加载速度；同时也可以突破浏览器的并发数限制和服务器的带宽限制3http协议相关（需要相应配置服务器软件）3.1缓存，浏览器会在响应头中缓存这两个字段的内容,并且下次访问该资源时会带上f-Modified-Since(对应Last-Modified)和If-None-Match(对应ETag)；当服务器识别出文件没有变化时，会返回状态码304，不会返回响应体；浏览器收到服务器返回的内容后，会从缓存中读取相应的内容；关于为什么会有两个字段，一个是http1.0的，一个是http1.1的，因为http1.0中的约定可能会导致服务端和客户端的时间不一致；下面和3.1.2Expires(http1.0)和Cache-Control:max-age=86400(http1.1)一样，这个字段和3.1.1类似，不同的是浏览器读取对应的缓存之后，如果还没有过期，就不会请求服务器，直接使用缓存中的内容。3.1.3keep-alive，与tcp协议的三次握手有关，有这个字段来保持tcp连接，省去另外一个握手过程；保留时间可以通过服务端软件配置3.1.4Accept-Encoding，这个需要浏览器处理或者async4.2图片以背景图的形式显示。这个方法是因为img标签会屏蔽html的解析。结语性能优化认证任??重而道远。目前，我只想到这些。欢迎指正，谢谢~~
