全栈面试题|爽爽学编程

# 浏览器面试题 by 爽爽学编程

本文作者：爽爽学编程 (opens new window)

本站地址：https://code-wss.com (opens new window)

# 重绘和回流 ( 重排) 是什么， 如何避免？

DOM的变化影响到了元素的⼏何属性 ( 宽高) ,浏览器重新计算元素的⼏何属性， 其他元素的⼏何属性和位置也会受到影响， 浏览器需要重新构造渲染树， 这个过程称为重排， 浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘 。

  • 引起重排的原因有

    • 添加或者删除可见的DOM元素，
    • 元素位置 、尺⼨ 、内容改变，
    • 浏览器页面初始化
    • 浏览器窗⼝尺⼨改变， 重排⼀定重绘， 重绘不⼀定重排，

  • 减少重绘和重排的方法：

    • 不在布局信息改变时做 DOM 查询
    • 使用 cssText 或者 className ⼀次性改变属性
    • 使用 fragment
    • 对于多次重排的元素， 如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

# 页面渲染过程

  • 解析html，构建DOM树
  • 解析css，生成css树
  • DOM树和css树结合，生成render tree（渲染树）
  • 生成渲染树以后，就会根据渲染树来进行布局（也叫回流），得到各个节点的几何信息（位置、大小）
  • 将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点

# 说说从输入URL到看到页面发生的全过程，越详细越好

  • 首先浏览器主进程接管， 开了⼀个下载线程。

  • 然后进⾏HTTP请求 ( DNS查询 、IP寻址等等)， 中间会有三次捂手， 等待响应， 开始下载响应报文。

  • 将下载完的内容转交给Renderer进程管理。

  • Renderer进程开始解析css rule tree和dom tree， 这两个过程是并⾏的，所以⼀般我会把link标签放在页面顶部。

  • 解析绘制过程中， 当浏览器遇到link标签或者script、img等标签， 浏览器会去下载这些内容， 遇到时候缓存的使用缓存，不适用缓存的重新下载资源。

  • css rule tree和dom tree生成完了之后， 开始合成render tree， 这个时候浏览器会进⾏layout， 开始计算每⼀个节点的位置，然后进⾏绘制。

  • 绘制结束后， 关闭TCP连接， 过程有四次挥手

# 谈谈你对重构的理解

网站重构：在不改变外部⾏为的前提下， 简化结构 、添加可读性， 而在网站前端保持⼀致的⾏为 。也就是说是在不改变UI的情况下， 对网站进⾏优化， 在扩展的同时保持⼀致的UI

对于传统的网站来说重构通常是：表格( table )布局改为 DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的 CSS 、如对Im6有效的)

对于移动平台的优化

针对于 SEO 进⾏优化

# 浏览器内核

  • IE : trident 内核

  • Firefox ： gecko 内核

  • Safari : webkit 内核

  • Opera :以前是 presto 内核， Opera 现已改用Google - Chrome 的 Blink 内核

  • Chrome:Blink (基于 webkit ， Google与Opera Software共同开发)

# 同步任务和异步任务：

  1. 同步任务：
    • 同步任务是按照程序顺序执行的任务。
    • 当一个同步任务开始执行时，程序会等待该任务执行完成，然后再继续执行下一个任务。
    • 在执行同步任务期间，程序会阻塞（即暂停）其他任务的执行，直到当前任务完成。
  2. 异步任务：
    • 异步任务是在程序执行过程中，不会等待其完成，而是继续执行后续的代码。
    • 异步任务通常会在后台或者另外的线程中执行。
    • 异步任务的执行结果通常会通过回调函数、Promise对象或者async/await等方式来处理。

在前端开发中，常见的同步任务包括但不限于：

  1. DOM 操作：例如修改元素的内容、样式、属性等。
  2. 计算操作：例如数学计算、字符串处理等。
  3. 函数调用：同步执行的函数调用，例如调用一个普通的JavaScript函数。
  4. 循环：通常情况下，for 循环、while 循环等都是同步执行的。
  5. 条件语句：例如 if 语句、switch 语句等。

在前端开发中，常见的异步任务包括但不限于：

  1. Ajax 请求：通过 XMLHttpRequest 对象或者 Fetch API 发起网络请求，从服务器获取数据。
  2. 定时器：使用 setTimeout()、setInterval() 等方法设置定时器，在一定时间后执行指定的代码。
  3. 事件监听：通过addEventListener()方法添加事件监听器，等待事件触发后执行相应的回调函数。
  4. Promise：使用 Promise 对象处理异步操作，可以通过 then() 方法注册成功或失败的回调函数。
  5. 异步函数：使用 async/await 关键字来定义异步函数，使函数内部的异步操作以同步的写法表达，提高代码可读性。
  6. Web Workers：在后台线程中执行脚本，以便在主线程不受阻塞的情况下执行耗时操作。
  7. DOM 事件：例如在页面加载完成后执行的回调函数，或者监听用户输入、鼠标移动等事件。
  8. 文件读取：使用 File API 中的 FileReader 对象来读取本地文件内容。

# 从浏览器地址栏输入url到显示页面的步骤

  • 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ， 向服务器发起请求；
  • 服务器交给后台处理完成后返回数据， 浏览器接收⽂件 ( HTML、JS、CSS 、图象等)；
  • 浏览器对加载到的资源 ( HTML、JS、CSS 等) 进行语法解析， 建立相应的内部数据结构：如 HTML 的 DOM
  • 载⼊解析到的资源⽂件， 渲染页面， 完成

# 介绍⼀下你对浏览器内核的理解？

  • 主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎
  • 渲染引擎：负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加⼊CSS 等)， 以及计算网页的显示⽅式，然后会输出至显示器或打印机 。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同 。所有网页浏览器 、电子邮件客户端以及其它需要编辑 、显示网络内容的应用程序都需要内核
  • JS 引擎：解析和执⾏ javascript 来实现网页的动态效果最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立， 内核就倾向于只指渲染引擎

# cookies ， sessionStorage 和 localStorage 的区别

  • cookie 是⽹站为了标示用户身份而储存在用户本地终端 ( Client Side)上的数据 ( 通常经过加密)

  • cookie数据始终在同源的http请求中携带 ( 即使不需要)， 记会在浏览器和服务器间来回传递

  • sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

  • 存储⼤小：

    • cookie 数据⼤小不能超过4k
    • sessionStorage 和 localStorage 虽然也有存储⼤小的限制，但比 cookie ⼤得多， 可以达到5M或更⼤

  • 有期时间：

    • localStorage 存储持久数据， 浏览器关闭后数据不丢失除⾮主动删除数据
    • sessionStorage 数据在当前浏览器窗⼝关闭后自动删除
    • cookie 设置的 cookie 过期时间之前⼀直有效， 即使窗⼝或浏览器关闭
浏览器面试题 by 爽爽学编程
爽爽学编程   |