性能优化篇

1.CDN的概念及作用

答：CDN(Content Delivery Network, 内容分发网络)是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠的将数据发送给客户。

作用：

1.用户收到的内容来自最近的服务器，延迟更低
2.请求量过大时，可以将资源请求均匀分配，降低服务器负载。

2.懒加载是什么？

答：懒加载也叫作延迟加载，比如在加载长网页时，如果全部加载出来，用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。懒加载就是解决这种问题，在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载，这样会使网页的加载速度更快，减少服务器的负载。

3.懒加载的实现原理？（如何用js实现懒加载？）

答：图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源，根据这个原理，我们使用HTML5data-xxx属性来存储图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就可以实现按需加载，即懒加载。

知识点补充：

1.window.innnerHeight是浏览器可视区的高度。
2.document.body.scrollTop || document.ducumentElement.scrollTop是浏览器滚动过的距离。
3.imgs.offsetTop是元素顶部距离文档顶部的高度。（包括滚动条的距离）
4.图片加载条件： img.offsetTop < window.innerHeight + document.body.scrollTop;

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winHeight= window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winHeight ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
  window.onscroll = lozyLoad();
</script>

4.回流和重绘的概念及触发条件？

答：

1.回流

当渲染树中部分或全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程，称为回流。回流一定会导致重绘，重绘不一定会回流。

以下操作会导致回流：

页面的首次渲染
浏览器的窗口大小发生变化
元素的内容发生变化
元素的尺寸或者位置发生变化
元素的字体大小发生变化
激活CSS伪类
添加或删除可见的DOM元素

2.重绘

当页面中某些元素的样式发生变化，比如透明度，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程称为重绘。

以下操作会导致重绘：

color、background属性：background-color、background-image等
outline相关属性
border-radius、visibility、box-shadow

5.如何避免回流与重绘？

答：

1.使用transform属性，transform属性可以在不改变元素布局的情况下对元素进行移动，缩放等。不会触发回流和重绘。
2.批量修改DOM，减少频繁的DOM操作，将多个DOM操作合并一次。
3.避免频繁访问布局属性，offsetTop、offsetLeft、offsetWidth、offsetHeight等属性的访问会引起回流。
4.不要使用table布局，一个小的改动table会进行重新布局。

6.如何优化动画？

答：一般情况下，动画需要频繁操作DOM，就会导致页面性能问题，我们可以将动画position属性设置为absolute或者fixed，将动画脱离文档流，这样回流就不会影响到页面了。

7.节流和防抖的理解？

答:

函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

应用场景：按钮提交场景：防止多次提交按钮，只执行最后一次提交

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行。应用场景：

1.拖拽场景，固定时间只执行一次，防止超高频触发位置变动。

2.缩放场景：监控游览器的resize。

3.动画场景：避免短时间内多次触发动画引起性能问题。

8.如何对项目中图片进行优化?

答：

小图使用base64格式。
多个图标文件整合到一张图片中（css sprite）
选用正确的图片格式，比如照片使用jpeg，采用了压缩算法。

9.如何提高webpack的打包速度？

答：

1.优化loader: Loader中影响打包效率最大的应该是Babel,Babel会将代码转换成AST(抽象语法树)，然后解析成为低版本的代码。项目越大，转换代码就会越多，效率就会越慢。

优化Loader的文件搜索范围：

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

2.开启代码压缩，在webpack4中，将mode设置为production
3.使用HappyPack，可以将使用多线程进行编译。

10.如何减少webpack打包体积？（如何⽤webpack来优化前端性能？）

答：

1.使用Tree Shaking，只打包引入和使用代码。
2.代码压缩：使用webpack的压缩代码功能，开启代码压缩。对静态资源以及代码进行压缩。

前端性能优化篇