Web前端开发进阶：Web前端性能优化详解

前端性能优化是指资源的合并与压缩，图片编码的原理，以及类型的选择，浏览器的渲染机制，懒加载，预加载，浏览器存储，缓存机制，PWA和Vue-SSR等。

前端优化，一般是先基础优化(图片编码原理等问题)，高一点即为进阶优化(浏览器的渲染机制，浏览器的存储，优化)，结合服务端进行优化(首屏渲染等问题)等。

前端性能优化方案，最小化HTTP的请求，使用内容交付网络，避免空src或是href，添加过期或者是缓存控制标头，gzip组件，将styleSheets放在顶部，将脚本放在最下面，避免css表达式，减少dns的查找，将js和css设置为外部，避免重定向，配置etag，使用ajax缓存，减少dom元素的数量，没有404，减少cookie的大小，不缩放HTML中的图像，避免使用过滤器，使用favicon.icon小型且可缓存。

合并文件是一种通过将所有脚本合并为一个脚本，类似将所有css合并为一个样式表来减少HTTP请求数量的方法。

实现性能优化，一，减少我们的HTTP请求的数量，以及减少请求的资源大小;二，资源的压缩与合并的原理是什么。压缩与合并前是什么样的效果，压缩与合并后又有什么区别。

如何减少我们HTTP请求的大小，每一个HTTP请求都要走网络环境才能达到我们的服务器，每一次请求都有网络环境的损耗，把多次HTTP请求减少到一次，减少网络环境中的损耗。也可以从服务器端出发，先把反映到页面中效果进行渲染，然后直出到网页上。

每一次请求都有网络环境的损耗，我们可以把多次HTTP请求合并成一次，从而减少相同的环境损耗。

带宽，一个HTTP的请求大小能够较小的话，访问就比较快一些，浏览器端的渲染过程，使用框架，就要从浏览器中进行渲染，框架中的模板是要在浏览器中进行渲染的，这个在框架中进行渲染，不利于首屏，对首屏有很大的损耗，不利于前端的性能。

服务器的渲染，将HTML渲染后直出到我们浏览器页面，不是在浏览器中进行渲染了。

前端性能优化点，通过HTTP请求的过程，可以了解到，我们可以通过dns进行缓存从而减少dns查询的时间，网络请求的过程走最近的网络环境，相同的静态资源进行缓存，减少HTTP请求的大小，减少HTTP请求，服务器端渲染，从业务中进行前端优化点。