面试前端八股文十问十答第二期
面试前端八股文十问十答第二期
作者：程序员小白条，个人博客
相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐
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+ 访问！
⭐点赞⭐收藏⭐不迷路！⭐