javascript考点 —— 性能优化_js 多数据加载考点-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanghuali0210/article/details/82184118

博客介绍前端性能优化相关内容。包括优化原则，如多用内存、缓存，减少CPU计算和网络；加载资源优化，如静态资源压缩合并、缓存、用CDN、SSR后端渲染；渲染优化，如CSS放前JS放后、懒加载、减少DOM查询和操作等，还给出了具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、原则

多使用内存、缓存或者其他方法
减少CPU计算、较少网络

二、加载资源优化

静态资源的压缩合并
静态资源缓存
使用CDN让资源加载更快
使用SSR后端渲染，数据直接输出到HTML中

三、渲染优化

CSS放前面，JS放后面
懒加载（图片懒加载，下拉加载更多）
减少DOM查询，对DOM查询做缓存
减少DOM操作，多个操作尽量合并在一起
事件节流
今早执行操作（如DOMCOntentLoaded）

四、示例

1、资源合并。比如将多个js合并为一个js，最后就请求一个js（通过构建工具合并）

2、使用缓存。通过连接名称控制缓存，只有内容改变的时候，链接名称才会改变（添加哈希码）

3、使用CDN。

<script src="https://cdn.bootcss.com/zepto/1.0rc1/septo.min.js"></script>

4、使用SSR后端渲染（其实jsp，php，asp都属于后端渲染）

5、懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png">
<script>
    var img1 = document.getElementById('img1')
    img1.src=img1.getAttribute('data-realsrc')
</script>

6、缓存DOM查询

//不缓存
var i
for(i = 0; i<document.getElementsByTagName('p').length; i++){
    
}


//有缓存
var pList = document.getElementsByTagName('p')
var i
for(i = 0; i < pList.length; i++){
    
}

7、合并DOM插入


    var listNode = document.getElementById('list')
    var frag = document.createDocumentFragment();     //定义一个临时片段
    var x, li;
    for(x = 0; x < 10; x++ ){
        li = document.createElement("li");
        li.innerHTML = "List item" + x;
        frag.appendChild(li)           //将10个li一次插入片段中
    }
    listNode.appendChild(frag)           //只需要将片段一次插入DOM中就好

8、事件节流

    var textarea = document.getElementById('text')
    var timeoutId
    textarea.addEventListener('keyup', function() {
        if(timeout){
            clearTimeout(timeoutId)
        }
        timeoutId = setTimeout(function() {
            //触发事件
        }, 100)
    })

9、今早执行

    window.addEventListener('load', function() {
        
    })

    //尽早执行
    document.addEventListener('DOMContentLoaded', function () {
        
    })