【前端面试题】：HTTP与浏览器篇

最新推荐文章于 2024-08-23 16:42:59 发布

诗意栖心间

最新推荐文章于 2024-08-23 16:42:59 发布

阅读量960

点赞数 20

CC 4.0 BY-SA版权

分类专栏： #前端面试题合集文章标签：前端 http 网络协议面试

本文链接：https://blog.csdn.net/Anislandwhale/article/details/136838901

1.静态网页和动态网页区别？

当然可以，以下是简洁版的静态网页与动态网页的区别分析：

静态网页：

代码组成：主要由 HTML、CSS、JavaScript 构成，直接嵌入或外部链接。
运行环境：主要在客户端（浏览器）上运行。
文件后缀：通常为.html或.htm。
URL链接：直接指向具体的 HTML 文件。

特点：内容固定，每次请求返回相同内容；交互性和功能相对有限。

动态网页：

代码组成：涉及 HTML、CSS、JavaScript 及后端语言（如 PHP、Python 等）和数据库。
运行环境：在服务器和客户端（浏览器）上共同运行，服务器处理请求并生成动态内容。
文件后缀：可能因后端语言而异，但最终生成的 HTML 通常也有.html后缀。
URL 链接：可能指向后端处理程序，根据请求动态生成内容。

特点：内容根据请求和数据库状态动态生成；可实现复杂交互和功能，如用户认证、实时数据更新等。

总结：静态网页内容固定，交互简单；动态网页内容动态生成，交互复杂。静态网页开发维护简单，动态网页则涉及更多技术和组件。

2.简述浏览器缓存机制?

浏览器缓存机制 是指通过在一段时间内保留已接收到的 Web 资源的一个副本，如果在资源的有效时间内，发起了对这个资源的再一次请求，那么浏览器会直接使用缓存的副本，而不是向服务器发起请求
。浏览器缓存机制一般分为强缓存策略和协商缓存策略。使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。而使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。

3.从输入 url 到浏览器显示页面发生了什么？

从输入 URL 到浏览器显示页面的过程中，主要发生了以下步骤：

DNS 解析：当用户在浏览器中输入 URL 后，浏览器首先会从 URL 中提取出域名，并向 DNS 服务器发起域名解析请求，以获取该域名对应的 IP 地址。如果 DNS 缓存中已经存在该域名的 IP 地址，浏览器会直接获取并使用；否则，浏览器会进行递归查询，直到最终获取到对应的 IP 地址。
TCP 连接：得到 IP 地址后，浏览器会尝试与服务器建立 TCP 连接。这个过程中，浏览器和服务器会进行三次握手，确保连接的建立和数据传输的可靠性。
HTTP 请求：一旦 TCP 连接建立成功，浏览器会向服务器发送 HTTP 请求报文。这个请求报文包含了请求方法（如 GET、POST 等）、URL、协议版本以及请求头等信息，用于告诉服务器浏览器需要获取哪些资源。
服务器响应：服务器在接收到浏览器的请求后，会处理该请求并返回相应的响应报文。响应报文包括响应状态码、响应头以及响应内容等，其中响应内容通常是 HTML、CSS、JavaScript 等网页资源。
解析渲染：浏览器接收到服务器的响应内容后，会开始解析和渲染页面。首先，浏览器会解析 HTML 文档，构建 DOM 树。然后，根据 CSS 样式信息构建 CSSOM 树。接着，浏览器将 DOM 树和 CSSOM 树结合，生成渲染树。最后，浏览器根据渲染树进行布局和绘制，将页面内容呈现在屏幕上。

4.浏览器渲染原理，回流、重绘的概念和原理？

浏览器渲染原理：主要指的是浏览器如何将网页的源代码转换为用户可见的页面的过程。具体来说，浏览器首先将接收到的 HTML、CSS、JavaScript 等文件解析为 DOM 树、CSSOM 树和执行环境等结构。然后，浏览器将 DOM 树和 CSSOM 树结合起来，生成渲染树（Render Tree），表示页面中可见的元素及其样式。接下来，浏览器根据渲染树计算每个元素在视口（viewport）内的位置和大小，这个过程叫做回流（Reflow）或重排（Layout）。最后，浏览器将节点绘制到浏览器上，用户便能看到渲染后的页面。

回流和重绘是浏览器渲染过程中的两个重要概念。回流是指元素的位置或大小发生变化，影响布局的情况，如添加或删除元素、改变窗口大小等，浏览器需要重新计算布局并绘制所有受影响的元素。而重绘则是指元素的外观发生变化，但不影响布局的情况，如颜色、背景等，浏览器只需要重新绘制该元素。需要注意的是，回流必然会引起重绘，但重绘不一定会引起回流。

为了优化渲染性能，浏览器本身会进行一些优化操作，如缓存所有变化，然后一次性全部绘制。然而，某些操作，如读取元素属性，可能会引发强制回流，这可能会降低性能。因此，在编写代码时，应尽量避免频繁触发回流和重绘，以提高页面的渲染性能。

总的来说，理解浏览器渲染原理、回流和重绘的概念和原理，对于前端开发者来说是非常重要的，这有助于他们写出更高效、更优化的代码，提升用户体验。