（一）前端开发面试会问到的问题有哪些？

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。 

 

 

 

目录

1.在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

2.常见的 HTTP 的头部 

3.浏览器在生成页面的时候，会生成那两颗树？

4.csrf 和 xss 的网络攻击及防范

5.怎么看网站的性能如何

6.介绍 HTTP 协议(特征)

7.输入 URL 到页面加载显示完成发生了什么?

8.说一下对 Cookie 和 Session 的认知，Cookie 有哪些限制？

9.知道 304 吗，什么时候用 304？

10.具体有哪些请求头是跟缓存相关的？

11.cookie 和 session 的区别

12.cookie 有哪些编码方式？

---

 

 

1.在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

输入 url 后，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻

找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由

器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务

器，得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一个 http 请

求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数

据，并将这个 http 请求封装在一个 tcp 包中，这个 tcp 包会依次经过传输层，网络层，

数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的 html

给浏览器，因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 dom

树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载

相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面，之

后根据外部央视，内部央视，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成

后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如 script，meta 标签和

排除 display 为 none 的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，

之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过

程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一

般是 4-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过

Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别

在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器 端的绝对时间，因为存

在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先 查看

是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修

改，如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给

服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证

Last-Modified，再决定是否返回 304。

 

2.常见的 HTTP 的头部 

可以将 http 首部分为通用首部，请求首部，响应首部，实体首部

通用首部表示一些通用信息，比如 date 表示报文创建时间，

请求首部就是请求报文中独有的，如 cookie，和缓存相关的如 if-Modified-Since

响应首部就是响应报文中独有的，如 set-cookie，和重定向相关的 location，

实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描述主

题类型，content-Encoding 描述主体的编码方式。

 

3.浏览器在生成页面的时候，会生成那两颗树？

构造两棵树，DOM 树和 CSSOM 规则树，

当浏览器接收到服务器相应来的 HTML 文档后，会遍历文档节点，生成 DOM 树，

CSSOM 规则树由浏览器解析 CSS 文件生成。

 

4.csrf 和 xss 的网络攻击及防范

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶

意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造

攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候 CSRF

就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改

数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验

证码，检查 https 头部的 refer，使用 token。

 

XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻

击，比如获取 cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻

击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的

话不存储在数据库中，往往表现为将攻击代码放在 url 地址的请求参数中，防御的话为

cookie 设置 httpOnly 属性，对用户的输入进行检查，进行特殊字符过滤。

 

5.怎么看网站的性能如何

检测页面加载时间一般有两种方式，一种是被动去测：就是在被检测的页面置入脚本或

探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，另一种主动监测

的方式，即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数

据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客。

 

6.介绍 HTTP 协议(特征)

HTTP 是一个基于 TCP/IP 通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）

HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式

超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。

目前在 WWW 中使用的是 HTTP/1.0 的第六版，HTTP/1.1 的规范化工作正在进行之中，

而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务

端架构为上。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所

有请求。Web 服务器根据接收到的请求后，向客户端发送响应信息。

 

 

7.输入 URL 到页面加载显示完成发生了什么?

DNS 解析

TCP 连接

发送 HTTP 请求

服务器处理请求并返回 HTTP 报文

浏览器解析渲染页面

连接结束

 

8.说一下对 Cookie 和 Session 的认知，Cookie 有哪些限制？

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。

2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗

考虑到安全应当使用 session。

3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

考虑到减轻服务器性能方面，应当使用 COOKIE。

4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个

cookie。

 

9.知道 304 吗，什么时候用 304？

304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自

上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。

 

10.具体有哪些请求头是跟缓存相关的？

缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定。

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话，

cache-control 的优先级高于 expires。

协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

 

11.cookie 和 session 的区别

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。

2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗

考虑到安全应当使用 session。

3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

考虑到减轻服务器性能方面，应当使用 COOKIE。

4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个

cookie。

 

12.cookie 有哪些编码方式？

参考回答：encodeURI（）

 

 

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。 

 

 

 

 

后续会继续更新面试题，关注收藏一下随时查看。