面试前端八股文十问十答第二期

面试前端八股文十问十答第二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）从输入URL到页面加载的全过程

• 浏览器根据输入的URL进行DNS解析，获取对应的服务器IP地址；
• 浏览器向服务器发起HTTP请求，请求页面的HTML文档；
• 服务器响应请求，返回HTML文档给浏览器；
• 浏览器解析HTML文档，构建DOM树；
• 浏览器解析CSS样式文件，构建CSSOM树；
• 将DOM树和CSSOM树合并，生成渲染树（Render Tree）；
• 根据渲染树计算每个节点的样式和位置，进行布局（Reflow/Reflow）；
• 浏览器将页面内容绘制到屏幕上。

2）浏览器重绘与重排的区别？

• 重排（Reflow）是指当页面布局发生变化，需要重新计算元素的位置和大小，从而影响整个页面的布局。这会触发浏览器重新布局、重新计算元素位置和大小，消耗较大的性能。
• 重绘（Repaint）是指当元素的样式发生变化，但不影响布局的情况下，浏览器只需重新绘制受影响的部分，而不需要重新计算元素的位置和大小。这比重排消耗的性能要小。

3）如何触发重排和重绘？

• 修改DOM结构：添加、删除、移动DOM元素都会触发重排和重绘；
• 修改DOM元素的样式：修改元素的样式属性（如颜色、大小、位置等）会触发重排和重绘；
• 获取某些属性：获取一些会引起元素大小、位置变化的属性（如offsetTop、offsetLeft、clientWidth等）会触发重排；
• 改变窗口大小：当浏览器窗口大小改变时，会触发页面的重排和重绘。

4）如何避免重绘或者重排？

• 使用CSS的transform和opacity属性来进行动画，而不是直接修改元素的位置和大小；
• 避免在循环中频繁操作样式，可以先将需要操作的元素进行隐藏，完成所有操作后再显示；
• 使用文档片段（DocumentFragment）来批量操作DOM，减少重排和重绘的次数；
• 将需要频繁操作的元素设置为position: absolute或position: fixed，脱离文档流，减少影响的元素；
• 避免频繁获取会引起重排的属性（如offsetTop、offsetLeft等），可以将这些属性缓存起来。

5）介绍下304过程

HTTP状态码304表示“未修改”，当浏览器发送请求时，如果资源在服务器上没有发生变化，服务器会返回状态码304，告诉浏览器可以直接使用本地缓存的资源，无需重新下载。这样可以减少网络传输，提高页面加载速度。

6）浏览器的缓存机制 强制缓存 && 协商缓存

• 强制缓存：浏览器在请求资源时，会先检查缓存是否过期，如果未过期则直接使用本地缓存，不发送请求到服务器。常见的设置强制缓存的响应头字段有Cache-Control和Expires。
• 协商缓存：当强制缓存失效时，浏览器会发送请求到服务器，服务器会根据资源的缓存标识（如ETag或Last-Modified）来判断资源是否有更新。如果资源未发生变化，服务器返回304状态码，告诉浏览器可以直接使用缓存。常见的设置协商缓存的响应头字段有ETag和Last-Modified。

7）说下进程、线程和协程

• 进程（Process）是计算机中运行中的程序的实例，每个进程都有独立的内存空间和系统资源，进程之间相互独立，互不干扰。
• 线程（Thread）是进程中的执行单元，一个进程可以包含多个线程，线程共享进程的内存空间和系统资源，线程之间可以共享数据和通信。
• 协程（Coroutine）是一种用户态的轻量级线程，协程可以在同一个线程中实现多个不同的任务之间的切换，避免了线程切换的开销，提高了程序的执行效率。

8）HTML5 新特性、语义化

• 新的语义化标签（如<header>、<footer>、<nav>、<section>等）；
• 增强的表单元素（如<input type="date">、<input type="email">等）；
• 多媒体元素（如<video>、<audio>）；
• Canvas绘图功能；
• Web存储（LocalStorage和SessionStorage）；
• 新的API（如Geolocation、Web Workers、WebSockets等）。

HTML5强调语义化，即通过标签的选择和使用，使页面的结构更加清晰、可读性更强，有利于搜索引擎的理解和优化。

9）CSS 选择器及优先级

• 内联样式（Inline Styles）：通过style属性直接定义在HTML元素上，具有最高优先级；
• ID选择器（ID Selectors）：通过#符号定义，具有比类选择器更高的优先级；
• 类选择器（Class Selectors）：通过.符号定义，可以同时应用于多个元素；
• 元素选择器（Element Selectors）：通过标签名称定义，作用于相应的元素；
• 通配符选择器（Universal Selector）：使用*定义，作用于所有元素；
• 继承（Inheritance）：从父元素继承样式。

选择器的优先级遵循内联样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器。

10）position 属性的值有哪些及其区别

• static：默认值，元素遵循正常的文档流，不受top、bottom、left、right等属性的影响。
• relative：相对定位，元素相对于其正常位置进行定位，但仍占据原本的空间。
• absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块进行定位。
• fixed：固定定位，元素相对于浏览器窗口进行定位，不随页面滚动而移动。
• sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。

这些position属性可以通过配合top、bottom、left、right等属性来调整元素的位置。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

前后端总计已经 900+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐