移动端Web开发性能优化

最新推荐文章于 2026-06-24 10:47:26 发布

原创最新推荐文章于 2026-06-24 10:47:26 发布 · 652 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

移动Web开发专栏收录该内容

4 篇文章

订阅专栏

什么是性能：

性能指的是页面的响应速度，页面的响应速度具体指的是：

1.打开页面到实际能够正常使用的时间：网络请求的时间、页面加载和渲染的时间

2.与页面进行交互的流畅程度：JavaScript脚本的执行速度

注意点：要更快地加载页面首屏内容，无需考虑整张页面。（首屏内容指的是打开网站可以看到的内容，不包含下滑滚动条才能看到的内容）

为什么需要优化移动端的性能：
提升用户体验；与PC端相比，移动端网络速度较慢；与PC端相比，移动端的设备性能较低

各阶段的性能优化点

1.网络请求过程中的优化点

网络请求过程：

1.1：减少请求时间

将多个资源分布在不同域上，减少请求队列的等待时间。

原因：浏览器为每个域名分配的并发通道有限；

多个域意味着更多的DNS查询时间，通常把域名拆分为3~5个比较合适。

通过dns-prefetch减少DNS查询时间。

尝试在请求资源之前解析域名：

仅对跨域域上的DNS查找有效，已经解析过的域名不要再添加dns-prefetch。

1.2：减少HTTP请求数量

资源的合并（合并css/js文件）：合并后的资源不能过大、考虑缓存的问题。

内联首屏相关代码：将首屏相关的代码使用内联写法写在html中，从而键少HTTP请求数量。

使用缓存（浏览器缓存、localStorage等）

1.3：减少请求资源的大小

资源的压缩（HTML、CSS的压缩以及JS的压缩和混淆（混淆是指把较长的常量或变量名用一个字符代替））；

开启Gzip压缩（服务器端）；

减少cookie的体积：由于我们每次请求时都会将cookie携带到服务器端，所以我们要减少cookie的体积。

2.页面加载和渲染过程中的优化点

浏览器的渲染过程：

2.1：css一般在head中引入，JavaScript一般在body末尾引入。

2.2：减少回流/重布局（Reflow/Relayout）与重绘制（Repaint）：

元素的尺寸、位置、隐藏等属性改变时，了浏览器需要重新计算，就称为回流。

元素的外观、风格等属性改变时，浏览器只需要重新绘制，就称为重绘；

回流一定会引起重绘，重绘不一定会引起回流。

3.JavaScript脚本中的优化点

3.1：DOM操作优化

3.2：事件优化

3.3：图片懒加载和预加载

4.具体优化

4.1：图片优化：

减少HTTP请求数量：

使用css画图（动画）代替简单的图片；合并小图标（CSS Sprites）;将小图标直接内嵌到html中；

减少请求资源的大小：

使用图标字体代替简单的图标；压缩图片；选择合适的图片大小；

选择合适的图片类型：

jpg:有损压缩，压缩率高，不支持透明，支持2^24种颜色；适用于色彩丰富、渐变色且不需要透明图片的场景；

png:png-8：支持256色+支持透明； png-24：支持2^24色+不支持透明； png-32:支持2^24色+支持透明；适用于大部分需要透明图片的场景；

webp :webp是谷歌开发的新的图片格式，与png、jpg想必比，相同的视觉体验下图片更小；支持有损压缩、无损压缩、透明和动画；理论上完全可以替代png、jpg、gif等图片格式；存在一定的兼容性，在条件允许的情况下尽量使用webp。

4.2:动画优化

优先使用CSS3过渡和动画，优先使用translate3d做运动；必须使用JavaScript做动画时，使用requestAnimationFrame,不要使用setTimeout和setInterval。

4.3：CSS优化

选择器优化：

不要使用嵌套过多过于复杂的选择器，可以通过样式直接选择；

保持简单，不要画蛇添足；

避免过多的通配符选择器，少量完全可以；

移除无匹配的样式。

其他优化：

提取公用部分；

避免使用CSS中的@import导入CSS（避免发送多余的HTTP请求）；

4.4：DOM优化

渲染优化：

减少DOM元素数量和嵌套层级；

尽量避免使用table布局，用其他标签代替（table会作为整体去解析，且可能很小的一点改动，也会造成整个table的重新布局）；

选择器优化：

优先使用id来获取单个元素，document.getElementById();

获取多个元素时，尽量直接通过元素本身的className获取;

减少DOM操作次数：

总是将选择器的选择结果缓存起来；

避免在循环中多次使用innerHTML，在循环结束后使用一次就可以了。（可以使用变量保存要赋给innerHTML的值）；

使用DocumentFragment优化多次的appendChild，新创建的元素完成必要操作后再添加到页面中；

 const todoDatas = ['洗衣','做饭','lababa'];
        const $list = document.getElementById('list');
        //创建碎片
        const $liFragment = document.createDocumentFragment();
        for (const item of todoDatas) {
            const $li = document.createElement('li');
            //对没有渲染的DOM元素进行操作不会影响性能，如刚刚创建的$li
            $li.className = 'item';
            $li.innerHTML = item;
            $liFragment.appendChild($li);
        }
        $list.appendChild($liFragment);

不要直接通过js修改元素的style，通过添加移除class修改元素样式；

注意强制回流：当获取的属性值包括但不限于offsestTop/offsetLeft/scrollTop/clientTop这些“全局属性”时，需要此时页面上的其他元素的布局和样式处于最新状态，这会引起多次的回流和重绘。这样的操作称为强制回流。可以将其结果缓存起来，需要更新的时候再更新。更多会引起强制回流的属性参考：https://gist.github.com/paulirish/5d52fb081b3570c81e3a

事件优化

什么是事件代理：事件代理也叫事件委托，把元贝在子元素上监听的事件委托给父元素，让父元素监听。

什么是事件稀释：有些事件在一段时间内会多次触发，事件稀释就是减少这些事件的触发频率。比如scroll resize mousemove touchmove等。

防抖debounce：在某个时间期限内，事件处理函数只执行一次;

节流throttle：事件处理函数执行一次后，在某个时间期限内不再执行；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖/节流函数中的 args 和 context</title>
    <style>
      body {
        height: 2000px;
      }
      .backtop {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        color: #fff;
        font-size: 60px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
      }
      .none {
        display: none;
      }
    </style>
  </head>
  <body>
    <a href="#" id="backtop" class="backtop none">&uarr;</a>

    <script>
      const $backtop = document.getElementById('backtop');
      let winHeight = window.innerHeight;

      window.addEventListener(
        'resize',
        () => {
          winHeight = window.innerHeight;
        },
        false
      );

      window.addEventListener(
        'scroll',
        // 这里指定 scrollHandler 中的 this 为 $backtop，参数为 winHeight
        debounce(scrollHandler, 250, $backtop).bind(null, winHeight),
        false
      );
      // threshold 是我们希望按钮显示或隐藏的临界值
      function scrollHandler(threshold) {
        // console.log(this, threshold);

        if (document.documentElement.scrollTop >= threshold) {
          this.classList.remove('none');
        } else {
          this.classList.add('none');
        }
      }

      // 防抖 debounce
      function debounce(fn, milliseconds = 250, context) {
        let timer = null;

        // debounce 调用后生成的函数 a
        return function (...args) {
          const self = context || this;

          if (timer) {
            clearTimeout(timer);
          }

          timer = setTimeout(() => {
            fn.apply(self, args);
            timer = null;
          }, milliseconds);
        };
      }
    </script>
  </body>
</html>

图片懒加载

什么是图片懒加载：图片懒加载又叫图片延迟（按需）加载，在需要的时候加载图片。

图片预加载

什么是图片预加载：在浏览当前图片时，利用浏览时间预先加载下一张图片。