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

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

你可能感兴趣的:(浏览器渲染页面、性能优化)