7.22 百度一面提前批面试记录总结_百度提前批面试一轮-优快云博客

本文详细阐述了浏览器从URL输入到页面渲染的过程，包括HTML解析、CSSOM构建、渲染树形成、布局计算与绘制。重点讨论了CSS选择器优化、CSS与JS加载顺序对性能的影响，以及回流和重绘的原理。同时，提到了块级作用域、伪元素和伪类、布局技巧、防抖与节流函数的应用，以及斐波那契数列的实现。文章还探讨了如何通过缓存和异步处理提升前端性能，并强调了数据定义的重要性。

从输入url到浏览器到页面渲染发生了什么
里面需要优化的地方再哪。重绘和回流有哪些优化的地方

具体要讲的：

3.浏览器的渲染原理和优化方向：

3.1 浏览器渲染过程

浏览器的内核分为：渲染引擎和js引擎
渲染引擎里面有：html解释器 css解释器布局网络存储图形音频解码
webkit (safari) Blink (chrome)

以 Webkit 为例

html+css+js -> 浏览器内核 -> 图像

html解释器：将html文档经过词法分析输出DOM树 (在解析html的过程中发出了页面渲染所需要的各种外部资源请求)
css解释器：解析css文档，生成样式规则
图层布局计算模块：布局计算每个对象的精确位置和大小
视图绘制模块：进行具体节点的图像汇总，将像素渲染到屏幕上
js引擎：编译执行javascript代码

具体的步骤如下:

解析html 在解析 HTML 的过程中发出了页面渲染所需的各种外部资源请求。
计算样式浏览器将识别并加载所有的 CSS 样式信息与 DOM 树合并，最终生成页面 render 树（:after :before 这样的伪元素会在这个环节被构建到 DOM 树中）。
计算图层布局页面中所有元素的相对位置信息，大小等信息均在这一步得到计算。
绘制图层把每一个页面图层转换为像素，并对所有的媒体文件进行解码。
整合图层，得到页面
将数据由 CPU 输出给 GPU 最终绘制在屏幕

首先是基于 HTML 构建一个 DOM 树，这棵 DOM 树与 CSS 解释器解析出的 CSSOM 相结合，就有了布局渲染树。最后浏览器以布局渲染树为蓝本，去计算布局并绘制图像，我们页面的初次渲染就大功告成了

之后每当一个新元素加入到这个 DOM 树当中，浏览器便会通过 CSS 引擎查遍 CSS 样式表，找到符合该元素的样式规则应用到这个元素上，然后再重新去绘制它。

查表是个花时间的活，我怎么让浏览器的查询工作又快又好地实现呢？第一个可转化为代码的优化点——CSS 样式表规则的优化！

3.2 基于渲染流程的css优化；

css 选择符是从右到左进行匹配的。

#myList  li {}

避免使用通配符，只对需要用到的元素进行选择
关注可以通过继承实现的属性，避免重复匹配重复定义（可继承的属性 font- color）

3.3 基于css 与 js的加载顺序优化

css阻塞：

浏览器在构建cssom的过程中，不会渲染任何已处理的内容，只要cssom不ok，那么渲染就还在
css是阻塞渲染的资源，需要将它尽早尽快的下载到客户端，以便减少首次渲染实践
比如css放到head标签里面和cdn实现静态资源加载速度的优化

js阻塞
js的三种加载方式

正常模式
js会阻塞浏览器，浏览器必须等待index.js加载和执行完毕才能去做其他时期

<script src="index.js"></script>

defer
js加载时异步的，执行时被推迟的.等到整个文档解析完成，DOMContentLoaded事件即将被触发时，才会执行

<script defer src="index.js"></script>

async
JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的，当它加载结束，JS 脚本会立即执行。

<script async src="index.js"></script>

当涉及DOM操作，所需要的开销就比较昂贵，那么 DOM 到底为什么慢，我们如何去规避这种慢呢？

3.4 CSS 中的回流（Reflow）与重绘（Repaint）

js引擎和渲染引擎时独立的，当我们用js去操作dom时，其实是跨界

对dom的修改引发样式的更迭

回流当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。
重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。

4. 伪元素和伪类伪类

5. let const 如何用es5 实现es6 let

{
    var a = 1;
    let b = 2;
}
console.log(a)
console.log(b)

需要达成像上面let定义变量的效果，也就是块级作用域外部不能访问到。

function output(count) {
    (function () {
        for (var i = 0; i < count; i++) {
            console.log(i) // 1，2，3，4，5
        }
    })() 
    console.log(i) // 报错
}
output(5)

6. 垂直居中 & 两列布局 & 0.5px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            width: 100px;
            background-color: cadetblue;
        }
        .son {
            height: 20px;
            width: 20px;
            background-color: red;
        }
        .contaner {
            display: flex;
            width: 100%;
        }
        .left {
            width: 100px;
            background-color: chocolate;
        }
        .right {
            flex: 1;
            background-color: red;
        }
        .test {
            margin-top: 20px;
            border-bottom: 1px solid rebeccapurple;
            transform: scale(0.5);
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <!-- 左 100  -->
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="contaner">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="test"></div>
</body>
</html>

7. 防抖节流

节流代码：单位时间内执行一次，常用于scoll 滚动

function throttle(fn, delay) {
    let lastTime = null
    return function () {
        let content = this;
        let arg = arguments;
        let nowTime = new Date();

        if (nowTime - lastTime > delay) {
            lastTime = new Date()
            return fn.apply(content,arg)
        }
    }
}

防抖代码：设定一个时间，如果在这个时间内用户又触发了，重新计时。

function debounce(fn, wait) {
    let timer = null;
    return function () {
        let content = this;
        let arg = arguments;

        if (timer) {
            clearTimeout(timer);
            timer = null;
        }

        timer = setTimeout(() => {
            return fn.apply(content,arg)
        },wait)
    }
}

8. fib数列

function fib(n) {
    if (n < 2) return n;
    let p = 0, q = 1, r = 1;
    for (let i = 2; i < n; i++) {
        p = q;
        q = r;
        r = p + q;
    }
    return r;
}

console.log(fib(5))