怎么理解Web性能，以及如何优化Web性能

 一、怎么理解Web性能

Web 性能说简单点就是网站打开速度快不快，页面中的动画够不够流畅，表单提交的速度是否够快，列表滚动页面切换是否卡顿等。

性能优化就是让网站变得快。

在 MDN 上对 Web 性能的定义是网站或应用程序的客观度量和可感知的用户体验。比如减少页面加载事件(减少文件体积，减少HTTP请求，使用预加载)，让网站尽快可用(懒加载或者分片加载)，平滑的交互性(使用CSS替代JS动画，减少UI重绘)，感知表现(加载动画，loading等给用户感觉快)，性能测定(性能指标，性能测试，性能监控以便持续优化，毕竟性能优化是个持续的过程)。

页面性能关乎到用户的留存，网站的转换率，用户体验和网站的传播，甚至影响搜索排名遭到用户投诉，当然也会影响开发的效率。

二、前端性能优化从哪些方面执行？

优化是一个比较大的话题，从开始开发到开发完成，都会涉及到前端的优化。一般开发中，我们会借助Web性能优化辅助工具：Lighthouse（灯塔），根据页面性能的报告查看需要优化的地方。

具体优化可以分为以下几类：

1、对内容的优化：

尽量减少HTTP请求次数：合并文件、使用CSS精灵图和对资源文件进行压缩；

减少DOM元素数量、减少iFrame数量、保证favicon.ico小并且可缓存；

减少DNS查询的次数、使用浏览器缓存

2、 对CSS的优化：

主要是两方面： 减少加载CSS所消耗的时间和提高CSS代码性能

将CSS样式表置顶；尽量减少样式的多层嵌套；避免CSS表达式；尽量减少重排和重绘操作；用 link 标签代替 @import；

3、对JS的优化：

将JS脚本放到页面底部；设计合理的事件监听器；减少DOM操作；

 JS用defer放在头部，提前加载时间，又不阻塞DOM解析；

script标签添加crossorigin，方便错误收集；

4、对图片的优化：

避免空的图片src；小图使用雪碧图；图片使用懒加载；采用合适的图片格式；

图片一定要压缩；不要在HTML上缩放图片；

可以使用的img的srcset，根据不同分辨率显示不同尺寸图片。这样既保证显示效果，又能节省带宽，提高加载速度；

5、渲染优化：尽量减少重排和重绘

用变量缓存DOM样式，不要频繁读取；
通过 DocumentFragment文档碎片 或 innerHTML批量操作DOM;
动画元素一定要脱离文档流，不影响其他元素；

动画不要用 left、top 等操作，要使用 transform 和 opacity，同时开启染层(will-change 或translate3d(0.0.0)；
动画尽量用 requestAnimationFrame，不要用定时器；
采用更优的API替代消费高的api，转换优化消费高的集合：

• 用querySelectorAll()替代getElementByXX()；

• 开启动画的GPU加速（如通过3D加速），把渲染计算交给GPU；

• 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高；

• 用事件委托来减少事件处理器的数量；

6、加载优化：

对资源压缩合并；第三方模块放在CDN；

对代码分割(code spliting)，可以基于路由或动态加载；
大模块异步加载，例如: Echarts可以使用 require.ensure，在加载成功后再显示对应图表；
小模块适度合并，将一些零散的小模块合并一起加载，速度较快；

可以使用 pefetch 预加载，在分步场景中非常适合；

7、首屏优化：

原则：显示快，滚动流畅，懒加载，懒执行，渐进展现

代码分离，将首屏不需要的代码分离出去；

服务端渲染或预渲染，加载完 HTML直接渲染，减少白屏时间；

DNS prefetch，使用dns-prefetch减少DNS查询时间，PC端域名发散，移动端域名收敛；

减少关键路径 CSS，可以将关键的 CSS 内联，这样可以减少加载和渲染时间；

8、打包优化(主要是 webpack 优化)

拆包 extemals dllPlugin；

提取公共包 commonChunkPlugin 或 splitChunks；
缩小范围 各种 loader 配置 include和 exclude，noParse 跳过文件；
开启缓存 各种 loader 开启 cache；多线程加速 happypack或 thead-loader；
tree-shaking ES 模块分析，移除死代码；
Scope Hoisting ES6 模块分析，将多个模块合并到一个函数里，减少内存占用，减小体积，提示运行速度

9、webpack 长缓存优化

js文件使用 chunkhash，不使用 hash；
css文件使用 contenthash，不使用chunkhash，不受js变化影响;

提取vendor，公共库不受业务模块变化影响;
内联webpack runtime 到页面，chunkld 变化不影响 vendor；
保证module ld稳定，不使用数字作为模块 id，改用文件内容的 hash值，使用HashedModuleldsPlugin，模块的新增或删除，会导致其后面的所有模块 id 重新排序，为避免这个问题；
保证chunkhash稳定，使用webpack-chunk-hash，替代 webpack自己的 hash算法，webpack 自己的 hash 算法，对于同一个文件，在不同开发环境下，会计算出不用的 hash 值，不能满足跨平台需求。

10、服务器端方面优化：

使用CDN；添加Expires或者Cache-Control响应头；配置ETag；避免空src的img标签；

对组件使用Gzip压缩；Flush Buffer Early；Ajax使用GET进行请求

11、cookie 方面优化：

减小cookie大小；引入资源的域名不要包含cookie

12、Vue优化：

路由懒加载组件；keep-alive 缓存组件，保持原显示状态；

列表项添加 key，保证唯一；

列表项绑定事件，使用事件代理v-for；

v-if 和 v-for 不要在一个标签上；

13、seo优化

添加各种meta信息；预渲染；服务端渲染

 自己的总结：

 谈一谈你知道的前端性能优化方案有哪些？_小草莓蹦蹦跳的博客-CSDN博客