性能优化与调试技巧

前端性能优化是提升网页加载速度和响应性能的关键任务之一。下面介绍一些性能优化与调试技巧：

1. 减少重绘和重排

重绘和重排是浏览器渲染网页时的开销大的操作。为了减少这些操作，可以采取以下措施：

使用 CSS3 动画代替 JavaScript 动画，因为 CSS3 动画利用了 GPU 加速，性能更好。
避免频繁修改样式属性，可以通过修改 class 或一次性修改样式属性来实现。

比起修改style，修改class更好。
使用文档片段（DocumentFragment）来避免频繁操作 DOM，可以将多个 DOM 操作放在文档片段中进行，然后一次性插入到页面中。

DocumentFragment，文档片段接口，表示一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。
```
var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);
```

2. 使用节流和防抖技术

节流和防抖本质上是优化高频率执行代码的一种手段。浏览器的 scroll、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率。节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。

function throttled(fn, delay = 500) {
    let timer = null;
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        }
    }
}

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次

3. 延迟加载和懒加载

加载大量资源会影响网页的加载速度。为了提高性能，可以采用懒加载和延迟加载的方式：

延迟加载（Deferred loading）是推迟资源的加载，直到页面其他内容加载完毕。可以使用defer属性或动态创建script标签的方式实现。
懒加载（Lazy loading）是延迟加载页面中的图片或其他资源，直到用户滚动到它们的位置。这样可以减少首次加载的资源数量，提高页面加载速度。可以将懒加载视为延迟加载的一种具体应用

JavaScript 图片懒加载哔哩哔哩_bilibili

4. 使用性能分析工具

性能分析工具可以帮助我们检测和解决性能问题，优化 JavaScript 代码。常用的性能分析工具有：

Chrome DevTools：提供了 Performance 面板和 Memory 面板，可以监测函数的执行时间、内存占用等信息，帮助定位性能瓶颈。
Lighthouse：是一个开源的自动化工具，可通过分析并生成报告来评估网页的性能和质量。
WebPageTest：可以测试网站在不同网络状况下的加载速度，并提供详细的性能分析报告。

性能优化与调试技巧 | 青训营

性能优化与调试技巧

1. 减少重绘和重排

2. 使用节流和防抖技术

3. 延迟加载和懒加载

4. 使用性能分析工具