前端优化【整理】

最新推荐文章于 2025-03-14 10:42:20 发布

原创最新推荐文章于 2025-03-14 10:42:20 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

总结整理专栏收录该内容

3 篇文章

订阅专栏

本文介绍了网页性能优化的方法，包括减少DNS查找次数、合并文件、利用缓存等页面级优化手段，以及减少DOM重绘、代码复用等代码级优化技巧。

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

看了好多前辈关于性能优化的简介，于是东拼西凑，整理整理，方便以后查看

优化目的

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

一、页面级优化

减少DNS查找次数
减少 HTTP请求数
利用缓存
合并文件，CSS，JS文件等
CSS精灵处理图片
CDN加速
把样式表置于顶部 (</head>之前)
将外部脚本置底 (</script>之前)

二、代码级优化

减少DOM的重绘重排
代码复用，如：class选择器
命名空间
变量释放
理解作用域链，减少变量查找

我只收集了我们能用的一些常用的，有些说的太高端，觉得离我太遥远、

代码优化实践整理

1.减少全局查找

//不好的写法
var arr = [1, 2, 3, 4];
function test () {
    for(var i = 0; i < arr.length; i++){

    }
}

//好的写法
var arr = [1, 2, 3, 4];
function test () {
    var array = arr; //注意这里
    for(var i = 0; i < array.length; i++){

    }
}

2.array.length优化

对上面《好的写法》在进行优化

var arr = [1, 2, 3, 4];
function test () {
    var array= arr;
    var bLength = array.length; //.length每次会触发索引长度
    for(var i = 0; i < bLength; i++){

    }
}