网站性能优化

网页性能优化是为了提升网站的加载速度、响应速度和用户体验，从而更好地满足用户的需求，提高用户留存率和转化率。

减少DOM操作

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。

按需加载

按需加载就是根据需要去加载资源。

在js中，我们一般通过一些用户行为或者定时任务去触发一些加载动作。

比如但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。这个就是按需加载。

为什么需要按需加载

浏览器在同一时间内的可以发出的请求数有限制，所以这也是我们采用第三方打包工具将多个文件打包为一个文件的意义。

但是多个文件打包为一个文件时包又比较大，一次性下载下来的速度就比较慢，仍然会有刚进入单页面系统产生首页白屏时间较长的情况。这种用户体验也不好。按需加载可用较好的去解决这些问题。

按需加载HTML

多页面系统本身就是一个按需加载html的过程，因为一个页面对应一个HTML。

我们都知道，所谓的单页面项目在某种意义上就是一个无刷新的局部更新页面。

页面一开始不解析HTML，根据需要来解析HTML。

解析HTML都是需要一定时间，特别是HTML中包含有img标签、引用了背景图片时，如果一开始就解析，那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等，这些一开始是不需要解析，可以按需解析。

性能优化之虚拟列表

当渲染大型列表时，由于浏览器需要处理大量的 DOM 节点，会带来页面卡顿、内存占用过高等问题。此时可以通过将列表虚拟化技术，即只渲染可见区域内的数据项，而不是全部渲染，且在滚动过程中移除旧的添加新的，这样无论列表有多少项，只会有一小部分在DOM中，从而提高性能和内存效率、保持流畅的滚动体验。