在现代网络应用中，好的性能是非常重要的，尤其是在移动设备上。移动端网页性能优化是一个复杂的过程，需要从各个方面进行优化。本文将介绍从页面加载速度、资源压缩、DOM 操作优化、事件委托等多个方面进行移动端网页性能优化的方法，在实践中帮助你提高你网站的性能指标。
页面加载速度优化
页面加载速度是影响性能的最重要因素之一。一旦用户打开网页，他们期望看到页面和内容尽快的呈现出来。如果加载速度慢，用户体验会受到影响，导致流量下降和用户流失。
压缩资源
压缩资源可以减少HTTP请求的数量，减小资源大小，从而减少加载时间。在移动设备上特别重要，因为网络速度不如桌面端快。JavaScript 和 CSS 文件可以通过压缩工具如 UglifyJS 和 CSSNano 进行压缩。
// 在命令行中运行 UglifyJS 压缩你的 JS 文件 uglifyjs your_script.js -c -m -o your_script.min.js
/* 在命令行中运行 CSSnano 压缩你的 CSS 文件*/ cssnano input.css > output.min.css
图片优化
图片是占用网络带宽的主要因素之一。为了加快加载速度和节省流量，应该优化图片文件。优化图片包括缩小图片大小和压缩图片。
使用图片压缩工具如 ImageOptim 可以自动压缩图片，减小图片的大小。同时，在 CSS 中避免使用大图片背景，可以使用 SVG 代替多张小图标。
/* 用 SVG 代替多张小图标 */
.icon {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M21.5 0h7l-8 20h10l-11 30-11-30h10z'/></svg>") no-repeat;
display: inline-block;
width: 20px;
height: 20px;
}使用CDN
CDN（Content Delivery Network）可以减轻服务器的负载和加速页面加载时间。CDN 功能可以将你的静态资源如 JavaScript、CSS 和图片等缓存在全球各地的服务器上，这样当有人要请求这些资源时，就可以直接从离用户最近的服务器获取，从而减小了网络延迟时间。
DOM 操作优化
Dom 操作一旦过多或者不止一次，就会导致性能下降。比如说，你需要设置多个样式或者多次改变DOM结构，在DOM中交换元素位置，增加或删除DOM节点等等。这些操作都会消耗CPU资源，且刷新会花费时间。
以下是一些减少 Dom 操作的方法：
使用缓存
重复查询DOM节点可能是性能下降的主要原因。处于以下原因，比如查询较慢；
查询未改变的元素(如一个已经缓存的div)，查询该元素时未使用缓存，导致重复的查询；
操作DOM节点过多，引起了浏览器的重绘，从而导致性能下降。
所以，要减少DOM操作，可以采用缓存对象。
-- -------------------- ---- ------- -- ---- ----- --------- - ------------------------------------- ----- --------- - ------------------------------------- -- --- ----------- ------ ------ ------- - - -- ------ - ----------------- - - ------- ---- - -- ---- -- -- ------ ---- ---- ---- -- ----- ------------ -- --- ------- ---- ---- -
操作CSS样式
操作CSS样式会导致浏览器的重绘（UI渲染）和重排(页面的重绘)。webkit内核的浏览器有个优化的机制：在你的CSS更改时，并不会立刻渲染页面，而是将更改缓存起来，然后等下次更改一起重排重绘。在DOM操作中，如果想要改变一个元素的多个样式和元素本身，可以将它们合并指定，如下代码所示：
// 引入对象
const element = document.getElementById('header');
// 将改变样式合并，只有一个重绘或者重排
element.style.cssText = 'padding: 20px; margin: 0 auto; color: #FFF; background: #000;';VDOM
虚拟DOM (Virtual DOM) 使得修改界面状态成为可能，可将整个界面的状态储存在内存中，并通过比对出不同的节点之后，将不同之处的渲染到浏览器中。
// 初始化
let virtualDOM = createElement('div', {class: 'wrapper'}, 'hello world');
// 操作的过程
let newVirtualDOM = createElement('div', {class: 'container'}, 'hello china')
virtualDOM.diff(newVirtualDOM);事件优化
事件处理器很容易使网页变慢。特别是移动设备，单击操作转化为点击会消耗时间，滚动事件和touch事件消耗时间更多。以下是一些减少事件的方法。
事件委托
事件委托是把事件处理器添加到容器上并将事件委托给容器。因为容器较少，所以对性能影响较小。
-- -------------------- ---- -------
----- --------- - -------------------------------------
-- ------- -- ------
----------------------------------- --------------- -
------- --
----------------------- --- ----- -
---- ------
-
---在DOM上添加事件时，每个元素都会有一个事件处理器，这会使DOM的性能受到影响，特别是当有很多元素需要添加事件处理器时。在这种情况下，你可以使用事件委托来减少事件处理器的数量，从而提高性能。
防止滚动事件和touch事件的冒泡
滚动事件和touch事件会导致性能下降。事件的冒泡和捕获是因为事件的传播和冒泡导致的。所以在触摸转换上，我们不能让事件传播。
document.addEventListener('touchmove', (e) => { e.preventDefault() }, {passive: false});结论
移动端网页性能优化是一个长期的过程。在本文中，我们介绍了可行性很高的五种标准来优化你的网站。这些方法并不是所有解决方案——它们得到的好处随着各种情况的变化而变化。
将它们置于实践中，并测试不同的优化方法，以确定哪种方法对你的应用程序工作最佳。随着你的开发经验的增长，你将能够更好地优化你的应用程序，并提升你的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67028f13d91dce0dc847c2f3