浏览器渲染页面、性能优化

2020-03-15 本文已影响0人罂粟1995

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搜索引擎优化。