提升性能：项目优化策略与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42349528/article/details/120609069

要想学好项目优化，一定要懂得底层原理。

（1）减少HTTP请求次数和大小

资源合并压缩如：css合并，压缩
图片懒加载
音视频走流文件

（2）减少DOM的回流和重绘

放弃传统的DOM的操作，基于vue，react开始数据影响视图

 mvvm  mvc  virtural dom  dom diff ......

分离读写操作（现代浏览器都有渲染队列的机制）

offsetTop offsetLeft offsetWidth offsetHeight clientTop clientLeft clientWidth clientHeight 
scrollTop scrollLeft scrollWidth scrollHeight getComputedStyle currentStyle

<!DOCTYPE html>
<html lang="en">
<head>
    <title>分离读写</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: orange;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        //分离读写
        box.style.width = '200px';
        box.style.height = '200px'; //当代浏览器都有批量渲染的机制
        box.style.margin = '10px';  //以上操作只需要一次渲染
        console.log(box.clientWidth); // 和上面的操作分开写
    </script>
</body>
</html>

样式集中改变

div.style.cssText = 'width:20px;height:20px';
div.className = 'box';

<!DOCTYPE html>
<html lang="en">
<head>
    <title>批量处理</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: orange;
            border: 3px solid red;
        }
        .aa {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        // 批量处理
        //box.style.cssText='width:200px;height:200px;';  //不常用了
        box.className = 'aa';
    </script>
</body>
</html>

缓存处理

<!DOCTYPE html>
<html lang="en">
<head>
    <title>缓存处理</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: orange;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        //缓存处理 和分离读写差不多
        let a = box.clientWidth;
        let b = box.clientHeight;
        box.style.width = a + 10 + 'px';
        box.style.height = b + 10 + 'px';
    </script>
</body>
</html>

元素批量修改

<!DOCTYPE html>
<html lang="en">
<head>
    <title>文档碎片</title>
</head>
<body>
    <ul id="box">

    </ul>
    <script>
        // for(let i = 0;  i < 5; i++) {
        //     let newLi = document.createElement('li');
        //     newLi.innerHTML = i;
        //     box.appendChild(newLi);  //这样五次回流
        // }
        //文档碎片
        let frg = document.createDocumentFragment();
        for(let i = 0; i < 5; i++) {
            let newLi = document.createElement('li');
            newLi.innerHTML = i;
            //创建的li放到文档碎片中
            frg.appendChild(newLi);
        }
        box.appendChild(frg);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>字符串拼接</title>
</head>
<body>
    <ul id="box">

    </ul>
    <script>
        let str = ``;
        for(let i = 0; i < 5; i++) {
            str += `<li>${i}</li>`;
        }
        box.innerHTML = str;
    </script>
</body>
</html>