关于前端性能优化
2019-02-24 本文已影响0人
夜半暖人心
前端性能优化:
前端性能优化是个经久不息的话题，也是面试常客，今天简单总结下，让大家有初步的了解
1.代码级的优化:优化DOM操作，减少闭包的使用
| NO. | 优化方式 |
|---|---|
| 1. | 查找dom元素优化(尽可能的通过ID或者类来查找元素，避免用属性选择器，速度最慢) |
| 2. | 减少dom操作,多个操作尽量合并到一起 |
| 3. | 减少dom样式设置,多个操作尽量合并到一起 |
| 4. | 减少闭包的使用 |
减少dom操作示例代码
<body>
<div id="sample"></div>
<script>
//代码执行时间的计算,单纯的计算时间
/**
console.time("XXX");
<code></code>
console.timeEnd("XXX");
**/
var time1
console.time("time1");
var sample = document.getElementById("sample")
//错误示范:
sample.innerHTML = "";
for (var i = 0; i < 100; i++) {
sample.innerHTML += "<sapn> error method! </span>";
}
console.timeEnd("time1");//time1: 36.87109375ms
//更改后:
var time2
console.time("time2");
var str = "";
for (var i = 0; i < 100; i++) {
str += "<span>This is faster because it uses a string! </span>";
}
sample.innerHTML = str;
console.timeEnd("time2");//time2: 0.34765625ms
</script>
</body>
减少dom样式设置示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: black;
}
.son {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div class="son"></div>
</div>
<script>
//错误示例
var box = document.getElementById('box');
box.style.paddingLeft = '10px';
box.style.paddingTop = '30px';
//更改后
var box = document.getElementById('box');
box.style.cssText = 'padding-left:10px;padding-top:30px;';
</script>
</body>
</html>
2.页面级的优化:
(1)减小资源体积:
| NO. | 优化方式 |
|---|---|
| 1. | html代码打包复用压缩，css代码压缩，js代码混淆压缩 |
| 2. | 图片压缩 |
| 3. | 使用JSON格式(代替XML)来进行数据交互 |
(2)优化页面渲染:
| NO. | 优化方式 |
|---|---|
| 1. | CSS样式放在header中，JS逻辑放在关闭标签</body>之前 |
| 2. | 尽量别使用iframe标签，会消耗大量的时间 |
| 3. | 懒加载(图片懒加载、下拉加载更多) |
iframe标签:一般用来包含别的页面
1.标签示例代码:
<iframe src="demo.html" height="300" width="500" name="demo"></iframe>
2.缺点: 它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能
3.服务器端的优化:
减少http请求:
| NO. | 优化方式 |
|---|---|
| 1. | 合并css文件，合并js文件(webpack打包工具可以实现) |
| 2. | 使用CDN和缓存来提高速度 |
| 3. | 把多余的模块/插件去掉，(element-ui模块按需引入，比如下拉菜单，面包屑) |
| 4. | 精灵图 |
本文同步发表在我的个人博客：https://www.lubaojun.com/
