面试前端八股文十问十答第二期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
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+ 访问!
⭐点赞⭐收藏⭐不迷路!⭐