前端工程师面试指南——性能篇

在前端方面性能有哪些优化

原则： 多使用内存、缓存或者其他方法；减少CPU计算和网络。

加载资源优化：

1、静态资源的压缩合并（require.js、webpack）；
2、静态资源缓存（通过连接名称控制缓存）；
3、使用CDN让资源加载更快（CDN全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近获得所需内容，解决internet网络拥挤的状况，提高用户访问网站的响应速度。）；
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <link href="https://cdn.bootcss.bom/bootstrap/..." rel="stylesheet" />
  <script src="https://cdn.bootcss.com/zepto/..."></script>
</head>
<body>
</body>
</html>
```
4、使用SSR后端渲染；
5、数据直接输出到HTML中。

渲染优化：

1、CSS放前面，JS放后面；

2、图片懒加载；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<!--事先使用一个小图片替换真正要显示的图片，等真正的图片完全加载后再替换小图片-->
<img id="img1" src="small.jpg" data-realsrc="readlly.jpg" />
<script>
  var img1 = document.getElementById('img1');
  img1.src = img1.getAttribute('data-realsrc');
</script>
</body>
</html>

3、减少DOM查询，对DOM查询做缓存；


//未缓存DOM查询
var i;
for(i=0;i<document.getElementsByTagName('p').length;i++){
//执行代码
}

//缓存了DOM查询 var i; var pList = document.getElementsByTagName('p'); for(i=0;i<pList.length;i++){ //执行代码 }

- 4、减少DOM操作，多个操作尽量合并在一起执行；
```js
var listNode = document.getElementById('list');

//要插入10个li标签
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);
}
listNode.appendChild(frag);

5、事件节流；

//让事件延迟执行
var textar = document.getElementById('text')
var timeoutId;
textar.addEventListener('keyup',function(){
if(timeoutId){
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function(){
//触发change事件
},100)
})

6、尽早执行操作，如DOMContentLoaded）。


window.addEventListener('load',function(){
//页面的全部资源加载完才会执行，包括图片、视频等
})

document.addEventListener('DOMContentLoaded',function(){ //DOM渲染完即可执行，此时图片、视频还可能没有加载完 })

CruxF / Blog

前端工程师面试指南——性能篇 #23

在前端方面性能有哪些优化