JS前端面试问答（二）

1.对于前端的事件流，你是怎么理解的？

答：事件流是浏览器中页面接收到事件的顺序，从最外层的元素到最里层的元素为事件捕获流(如html>body>div)，从最里层元素传到最外层元素是事件冒泡流（如div>body>html）。开发中建议使用事件冒泡，因为容易理解，阻止冒泡等。

2.简要介绍下事件委托并举个例子，使用事件委托有什么好处？

（1）事件委托即利用事件冒泡机制指定一个事件处理程序，管理事件委托元素下的所有元素事件。
（2）如给ul父元素添加事件，li元素被点击后，ul父元素可监听到li元素被点击。
（3）使用事件委托的好处是节省内存并减少DOM操作。

3.使用图片懒加载和预加载的区别，原理和优缺点？

（1）图片预加载与懒加载的区别：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
（2）图片预加载和懒加载的原理和优缺点
图片预加载：在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

4.mouserover和mouseenter的区别？

答：mouseenter不会触发事件冒泡。

5.clientHeight，scrollHeight,offsetHeight,以及scrollTop,offsetTop,clientTop的区别？

（1）clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。clientHeight=padding+height-横向滚动轴高度。
（2）offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。offsetHeight=padding+height+border+横向滚动轴高度。
（3）scrollHeight：包括当前不可见部分的元素的高度，只有出现滚动条的情况下才有意义