前端面试题整理-HTML

news2024/9/22 11:31:12

1. 从用户输入 url 到页面展示发生了什么？

（1）首先进行url合法性校验：包括协议域名端口号
（2）进行强缓存判断，判断本地缓存是否已经存在需要的资源文件，存在直接使用本地缓存即可
（3）强缓存未命中进行DNS域名解析
（4）建立连接，用到TCP三次握手协议（客户端发送建立连接的请求，服务端发送可以建立连接的请求并发送确认报文等待客户端确认，客户端发送收到同意建立连接的确认报文。）
（5）发起请求，传输html
（6）此时浏览器进行协商缓存，判断资源的新鲜度来确定资源是否需要重新获取
（7）关闭连接，用到TCP四次挥手协议（客户端发送释放连接的请求，服务端发送确认报文表示收到关闭请求，但是由于数据未发送完无法立刻释放连接，发送完毕后发送释放连接标志位表示没有数据要发送了，并发送确认报文等待客户端的确认，最后客户端发送确认报文表示收到关闭请求）
（8）浏览器渲染：对html进行解析，构建DOM树和CSS规则树以此组成render树，布局渲染最终展示到用户面前
在这里插入图片描述

2. http 缓存，介绍一下，具体到项目中该如何使用？

（1）强缓存（依赖浏览器的本地缓存机制，在缓存有效期内直接从本地获取资源，不向服务器发送请求，用于不经常变化的静态资源，如css、js文件）
（2）协商缓存（通过与服务器验证资源的新鲜度来确定是否需要重新获取资源，用于频繁变化并希望尽可能使用缓存的资源，如html文件）

3. html 解析，为什么 css 放前面，js 放后面？

将 CSS 放在前面确保页面样式优先加载和应用，而将 JavaScript 放在后面则是为了最大程度地减少对页面渲染的阻塞，提高页面加载性能和用户体验。

4. html 解析，js 的 defer, async 有什么用？

defer：异步加载JS文件，不会立即执行，不阻塞html解析，会在解析完成后按顺序执行
async：异步加载和执行JS文件，不会阻塞html解析，下载完就执行，没有执行顺序
没有defer和async：加载和执行都会阻塞html的解析
PS：
加载：浏览器遇到<script>开始下载JS文件
执行：浏览器执行JS代码

5. html 解析，css 加载慢，会阻塞页面展示吗？

会。当浏览器在解析 HTML 文档时遇到 <link> 标签加载 CSS 文件时，如果这些 CSS 文件加载较慢或者服务器响应时间较长，会造成页面的阻塞，影响页面展示的速度和用户体验。
可以通过一些措施优化：减少和精简 CSS 文件、使用压缩和合并 CSS 文件、利用浏览器缓存、使用异步加载或延迟加载、使用预加载。