Web前端性能优化

最新推荐文章于 2024-05-21 23:21:19 发布

Kitior123

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量102

点赞数

文章标签：前端性能优化 javascript html

本文链接：https://blog.csdn.net/Hushingiwkw/article/details/131404193

版权

一.效率优化

优化图片：

使用适当的图片格式，如JPEG、PNG、WebP等，并根据实际需求选择合适的压缩率。
```
<img src="image.jpg" alt="Image" />
```

使用CSS Sprites或SVG Sprites来减少HTTP请求数量。

.icon {
  background-image: url("sprites.png");
  background-position: -10px -20px;
  width: 20px;
  height: 20px;
}

使用懒加载技术延迟加载图片，只在需要时才进行加载。

<img src="placeholder.jpg" data-src="image.jpg" alt="Image" />
<script>
  window.addEventListener("load", function() {
    const lazyImages = document.querySelectorAll("img[data-src]");
    lazyImages.forEach(function(img) {
      img.setAttribute("src", img.getAttribute("data-src"));
      img.onload = function() {
        img.removeAttribute("data-src");
      };
    });
  });
</script>

为图片设置适当的尺寸，避免使用CSS或HTML缩放图片。

2、v8隐藏类优化

V8在将解释后的JavaScript代码编译为实际的机器码时会利用“隐藏类”提升性能。共享同一个构造函数和原型的实例会共享相同的隐藏类，动态添加属性和delete删除属性会导致实例不在共享同一“隐藏类”。因此，尽可能使用赋值null替代delete，这样可以保持隐藏类共享，养成良好的编程习惯，同时也能达到删除引用值供垃圾回收程序回收。

3、压缩和合并文件

使用工具如Webpack或Gulp进行文件压缩和合并。

4、使用异步加载：

将脚本放在页面底部：

<body>
  <header></header>
  <main></main>
  <footer></footer>
  <script src="script.js" defer></script>
</body>

使用defer或async属性：

<script src="script.js" defer></script>
<script src="script.js" async></script>

5.减少重绘和重排，避免频繁的DOM操作和样式修改

6、尾调用优化

尾调用优化的条件：
1.代码在严格模式下执行；
2.外部函数的返回值是对尾调用函数的调用；
3.尾调用函数返回后不需要执行额外的逻辑；
4.尾调用函数不是引用外部函数作用域中自由变量的闭包。
示例:递归计算斐波纳契数列

//无优化：
function fib(n) {
  if (n < 2) {
    return n;
  }

  return fib(n - 1) + fib(n - 2);
}
有优化：
"use strict";

// 基础框架
function fib(n) {
  return fibImpl(0, 1, n);
}

// 执行递归
function fibImpl(a, b, n) {
  if (n === 0) {
    return a;
  }
  return fibImpl(b, a + b, n - 1);
}

二.内存优化

1.解除无用变量的引用

现代主流的垃圾回收算法都采用标记清理的方式来回收内存。但在一些旧版本IE中使用的是引用计算算法来进行垃圾回收。解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引用都应该在不需要时解除引用。

2.闭包注意事项

在执行闭包函数时,如果存在闭包函数不依赖的外部作用域属性,尽量将那些属性置为null,因为闭包函数的作用域链中会保存外部函数的活动对象,因此那些没有用到的属性不会被回收。主动置为null可以释放掉那部分被闭包锁住的无用内存。

3.Dom事件委托与删除事件

当大量需要添加类似点击事件的DOM元素在同一个父元素之下,可以给父元素添加一个点击事件，通过事件冒泡机制触发此次点击,并用target属性确定当前点击的对象。可以避免先期延迟,占用内存更少。适合使用这种方式处理的事件:click、mousedown、mouseup、keydown和keypress。在删除某个元素时,确保移除了元素上的事件,最常见情况是使用innerHTML整体替换页面。如果被替换元素上有事件处理程序，则不会被垃圾处理程序正常清理。需要注意的是,在事件处理程序中,如果事件目标不存在于文档中,则不会冒泡。

4.console.log打印

在上生产环境之前切记要将console.log打印给去掉。console.log打印的对象因为需要在控制台显示信息，所以不会被垃圾回收。

5.响应式设计和移动优化

使用媒体查询和响应式布局来适应不同的设备和屏幕尺寸。

5.使用性能分析工具

使用工具如Lighthouse、WebPageTest或Chrome开发者工具来分析网页性能，并找到优化的潜在问题。

Kitior123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端性能优化

当大量需要添加类似点击事件的DOM元素在同一个父元素之下,可以给父元素添加一个点击事件，通过事件冒泡机制触发此次点击,并用target属性确定当前点击的对象。共享同一个构造函数和原型的实例会共享相同的隐藏类，动态添加属性和delete删除属性会导致实例不在共享同一“隐藏类”。现代主流的垃圾回收算法都采用标记清理的方式来回收内存。在执行闭包函数时,如果存在闭包函数不依赖的外部作用域属性,尽量将那些属性置为null,因为闭包函数的作用域链中会保存外部函数的活动对象,因此那些没有用到的属性不会被回收。
复制链接

扫一扫