1. 什么是防抖，什么是截流？
在前端开发中，有一部分用户行为会频繁的触发事件，而对于DOM操作、资源加载等耗费性能的处理，很可能会导致卡顿，甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。
防抖：
将几次操作合并为一次操作进行。设置一个计时器，规定在延迟时间后触发函数，但是在延迟时间内如果再次触发，就会取消之前的计时器。如此，只有最后一次操作能触发。
例如回到顶部这一情景，代码如如果在200ms内没有再次触发滚动事件，那么就执行函数；
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时。
function debounce(fn,delay){
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,200) ;
截流：
将多次执行变成每隔一段时间执行。
function flowFun(fn,delay) {
let canRun = true;
return function () {
if (!canRun)
return;
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 在setTimeout执行完毕后再把标记设置为true，表示可以执行下一次循环
canRun = true;
}, delay);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize',flowFun(sayHi,200));
区别：防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。
2. 请描述页面从加载到渲染的全过程。每一个步骤可以分别做哪些优化？
步骤：
- 输入网址url；
- 浏览器获取url，通过DNS解析获得网址的对应IP地址。首先先去各个缓存当中看看有没有DNS缓存，如果有则直接显示，不需要重新发送HTTP请求，如果没有，进行下一步；
- 通过DNS解析获得网址对应的IP地址；
- 浏览器与服务器通过TCP三次握手协商来建立一个TCP连接；
- 浏览器向服务器发送一个HTTP请求报文；
- 服务器处理请求并返回一个HTTP响应报文；
- 浏览器收到响应，解析HTML、CSS、JS等文件；
- 构建DOM树，浏览器绘制页面。
前端方面的优化可以在最后两步进行优化。一是尽量简化css文件，如果样式不是特别多的话可以写内联样式，减少css文件下载；或者使用打包工具。
二是避免head标签中的css和js阻塞渲染，导致页面空白，所以可以把scrip标签放道body之后。
三是尽量js减少dom操作，比如用事件代理将子节点的事件绑定在父节点上。
四是html的文档结构层级尽量少，减少回流和重绘的压力。
五是可以用按需加载的方案加载图片。
3. 浏览器是怎么绘制页面的？
- 解析html树构建DOM树，在构建dom树的同时，浏览器还会构建一个CSSOM。当遇到css文件时，先加载css文件，然后构建CSSOM，但是会阻塞render树的构建。如果将css文件放在底部，render树在之前就已经构建完了，因此用户可能会看到无样式的页面或者闪屏。
- 渲染树（render树） 渲染树又dom树和CSSOM构成，但并不是必须等dom树及CSSOM加载完成后才开始合并构建render树，三者的构建并无先后条件，亦非完全独立，因此会形成一边加载，一边解析，一边渲染的现象。构建render树，根据render树计算每个可见元素的布局，并输出到绘制流程上，将像素渲染到屏幕上。
- 布局render树 有了render树，浏览器已经能知道网页中有哪些节点，各个节点的css定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
- 绘制 绘制包括重绘和回流两个过程。
4. 什么是重绘，什么是回流？区别是什么？
当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变需要重新构建，这就称为回流。每个页面至少回流一次，也就是在页面第一次加载的时候。回流的时候浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
render tree中的一些元素需要更新属性，这些属性只影响元素的外观，风格，而不会影响布局，比如背景色的改变，这便称之为重绘。
区别在于，回流必然引起重绘，重绘不一定引起回流，比如只有颜色改变的时候。当页面的布局和几何属性改变的时候才需要回流，比如添加或删除元素，元素位置改变，元素尺寸改变，内容改变。
5. ssr
服务器端渲染。服务器端读取index.html，在发送给客户端之前，在服务端已经把index.html 渲染处理了。
多数网站既有服务端渲染又有客户端渲染。
为什么需要服务器端渲染：
使用服务器端渲染，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，有利于SEO搜索引擎优化。
网友评论