2024年Web前端最全前端面试题及答案汇总(2)，面试简历模板

2401_84447362

于 2024-05-11 12:32:26 发布

阅读量871

点赞数 26

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447362/article/details/138710185

版权

程序员专栏收录该内容

146 篇文章 2 订阅

订阅专栏

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

1. 浏览器篇

1.1 常用那几种浏览器测试？主流浏览器的内核有哪些？

Q1：IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。

1.2 说说你对浏览器内核的理解？

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器
JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：
a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
b.服务器将得到的 HTML 文件发送给浏览器；
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
5.断开连接

1.4 浏览器缓存

1.sessionStorage
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能存储持久化
2.localStorage
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3.cookie
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
4.userData
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB

1.5. HTTP

1.5.1 http状态码

以 2xx 为开头的都表示请求成功响应.

状态码	含义
200	请求成功
204	请求处理成功，但是没有资源可以返回
206	对资源某一部分进行响应，由Content-Range 指定范围的实体内容。

以 3xx 为开头的都表示需要进行附加操作以完成请求

状态码	含义
301	永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI
302	临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。
303	该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
304	该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307	临时重定向。该状态码与 302 Found 有着相同的含义。

以 4xx 的响应结果表明客户端是发生错误的原因所在。

状态码	含义
400	该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401	该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。
403	该状态码表明对请求资源的访问被服务器拒绝了。
404	该状态码表明服务器上无法找到请求的资源。

以 5xx 为开头的响应标头都表示服务器本身发生错误

状态码	含义
500	该状态码表明服务器端在执行请求时发生了错误。
503	该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

1.5.2 URL和URI有什么区别？

URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

1.5.3 HTTP和HTTPS的区别

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

2. HTML篇

2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

1. Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式与兼容模式各有什么区别?
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
3. 你知道多少种Doctype文档类型
HTML 4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）

2.2 说说你对语义化的理解？

语义化的优点有:

代码结构清晰，易于阅读，利于开发和维护
提高用于体验，在样式加载失败时，页面结构清晰
方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

2.3 HTML与XHTML有什么区别?

其基础语言不同
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。
语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。

2.4 页面导入样式时，使用link和@import有什么区别？

1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.5 HTML5有哪些新特性？

语义化标签
语义化标签使得页面的内容结构化，见名知义

标签	描述
`<header></header>`	定义了文档的头部区域
`<footer></footer>`	定义了文档的尾部区域
`<nav></nav>`	定义文档的导航
`<section></section>`	定义文档中的节（section、区段）
`<article></article>`	定义页面独立的内容区域
`<aside></aside>`	定义页面的侧边栏内容
`<detailes></detailes>`	用于描述文档或文档某个部分的细节
`<summary></summary>`	标签包含 details 元素的标题
`<dialog></dialog>`	定义对话框，比如提示框

增强型表单
新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年
新增表单元素：

表单元素	描述
`<datalist>`	元素规定输入域的选项列表，使用元素的 list 属性与元素的 id 绑定
`<keygen>`	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
`<output>`	用于不同类型的输出
新增表单属性

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定元素中可选择多个值。

新增视频和音频标签
Canvas绘图
SVG绘图
地理定位
拖放API
Web Worker
Web Storage
WebSocket

2.6 iframe的优缺点？

优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

2.7 img中的alt与title属性

alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；
alt是img必要的属性，而title不是；
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。

2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？

3. CSS篇

3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？

3.2 清除浮动有哪些方式？

3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？

3.4 CSS3新增伪类有哪些？

3.5 如何居中div？

3.6 为什么要初始化CSS?

3.7 说说你对BFC规范的理解？

一、什么是BFC？
　　BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
　　1、float：给元素添加浮动（属性值为left、right，但none除外）
　　2、position：给元素添加定位（属性值为absolute或fixed）
　　3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）
　　4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）
三、BFC形成后出现的常见问题
　　1、margin重叠问题
　　2、浮动相关问题

3.8 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

3.9 纯CSS实现三角形

.box {
	width:0px;
	height:0px;
	border-top:50px solid rgba(0,0,0,0);
	border-right:50px solid  rgba(0,0,0,0);
	border-bottom:50px solid red;
	border-left:50px solid  rgba(0,0,0,0);
}

/\* 或者用transparent \*/
.div{
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

4. JS篇

4.1 面向对象

4.2 什么是闭包？闭包的特性是什么？

闭包是能够读取其他函数内部变量的函数
要理解闭包，首先必须理解Javascript特殊的变量作用域
闭包的特性：
1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。