2025年前端常见面试题(附答案) .pdfVIP

人人好公，则天下太平；人人营私，则天下大乱。——刘鹗

前端常见⾯试题（附答案）

1.讲讲输⼊完⽹址按下回车，到看到⽹页这个过程中发⽣了什么

a.域名解析

b.发起TCP的3次握⼿

c.建⽴TCP连接后发起http请求

d.服务器端响应http请求，浏览器得到html代码

e.浏览器解析html代码，并请求html代码中的资源

f.浏览器对页⾯进⾏渲染呈现给⽤户

2.谈谈你对前端性能优化的理解

a.请求数量：合并脚本和样式表，CSSSprites，拆分初始化负载，划分主域

b.请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体

c.缓存利⽤：使⽤CDN，使⽤外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存

d.页⾯结构：将样式表放在顶部，将脚本放在底部，尽早刷新⽂档的输出

e.代码校验：避免CSS表达式，避免重定向

3.前端MV*框架的意义

早期前端都是⽐较简单，基本以页⾯为⼯作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。

随着AJAX的出现，Web2.0的兴起，⼈们可以在页⾯上可以做⽐较复杂的事情了，然后前端框架才真正出现了。

如果是页⾯型产品，多数确实不太需要它，因为页⾯中的JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应⽤软件类产

品，这就太需要了。

长期做某个⾏业软件的公司，⼀般都会沉淀下来⼀些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，

在前端很少有相应的组织。

从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的MV框架，这个状况会⼤有改观。

之所以感受不到MV*框架的重要性，是因为Model部分代码较少，View的相对多⼀些。如果主要在操作View和Controller，那当然jQuery这

类库⽐较好⽤了。

4.请简述盒模型

IE6盒⼦模型与W3C盒⼦模型。

⽂档中的每个元素被描绘为矩形盒⼦。盒⼦有四个边界：外边距边界margin,边框边界border,内边距边界padding与内容边界content。

CSS3中有个box-sizing属性可以控制盒⼦的计算⽅式，

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C

盒⼦模型）

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒⼦模型）

5.请你谈谈Cookie的弊端

a.每个特定的域名下最多⽣成的cookie个数有限制

b.IE和Opera会清理近期最少使⽤的cookie，Firefox会随机清理cookie

c.cookie的最⼤⼤约为4096字节，为了兼容性，⼀般不能超过4095字节

d.安全性问题。如果cookie被⼈拦截了，那⼈就可以取得所有的session信息。

6.浏览器本地存储

在HTML5中提供了sessionStorage和localStorage。

sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之

销毁，是会话级别的存储。

百学须先立志。——朱熹

localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。

7.webstorage和cookie的区别

a.Cookie的⼤⼩是受限的

b.每次你请求⼀个新的页⾯的时候Cookie都会被发送过去，这样⽆形中浪费了带宽

c.cookie还需要指定作⽤域，不可以跨域调⽤

d.WebStorage拥有setItem,getItem等⽅法，cookie需要前端开发者⾃⼰封装setCookie，getCookie

e.Cookie的作⽤是与服务器进⾏交互，作为HTTP规范的⼀部分⽽存在，⽽WebStorage仅仅是为了在本地“存储”数据⽽⽣

f.IE7、IE6中的UserData通过简单的代码封装可以统⼀到所有的浏览器都⽀持webstorage

8.对BFC规范的理解

BFC全称是BlockFormattingContext，即块格式化上下⽂。它是CSS2.1规范定义的，关于CSS渲染定位的⼀个概念。

BFC是页⾯CSS视觉渲染的⼀部