前端面试题汇总_页面中的一个内容区块,如章节、页眉、页脚或页面的其他部分,可以和h1、h2...元素!-CSDN博客

本文链接：https://blog.csdn.net/txun123/article/details/124308359

行内元素和块级元素有哪些？

块级元素：div、form、h1-h6、p

行内元素：a、img、input、span、textarea

什么是闭包？闭包有什么用？

闭包就是允许函数访问并操作函数外部的变量，「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

JavasSript 变量的作用域有全局变量和局部变量。JavasSript函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

闭包的用途

闭包常常用来隐藏一个变量（间接访问一个变量），通常闭包访问的变量要被放在一个函数里面作为局部变量去使用，为的是防止将变量定义为全局变量之后容易收到外界的干扰。

http/http2/http3之间的区别

http1.1：

一、改进持久连接

一个TCP连接可以传输多个（6个）http请求,默认持久连接

connect: close 关闭持久连接

二、不成熟的管线化—解决队头阻塞问题

可以不用等一个请求回来再去发另外一个请求

三、提供虚拟主机的支持 —一个主机绑定多个域名，相当于国歌服务器，请求头增加Host字段

四、对动态内容提供完美的支持-----Transfer-Encoding chunked

将大块数据分解成多块小数据，每块都可以自指定长度

五、客户端支持cookie,安全机制

http2：

基于SPDY协议，专注于性能，目标是一个用户和网站只需要进行一次连接

HTTP

SPDY

SSL/TLS

TCP[

二进制传输

将请求和响应分为小的帧，采用二进制编码，以前的headbopdy变成帧数据

头部head压缩

只发送有差异的数据

多路复用

只要建立一个TCP/IP[连接，多路并行，发送响应都在同一个连接进行

服务端推送 server push

提供安全性 https

http3：

基于QUIL的UDP,取了TCP和TLS加密的精华

HTTPS

非对称加密，公钥和私钥

客户端服务端

https/http的区别：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。、

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

移动端适配

一、px + viewport适配

通过动态设置meta标签的viewport让css中的1px等于设备的1px。

首先我们必须要了解到viewport是什么，viewport是用户的网页可视区域。手机浏览器就是页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的窗口比屏幕宽，这样就不会破坏没有针对手机浏览器优化的网页的布局（不会把每个网页挤到很小的窗口中）。用户可以通过平移和缩放来看网页的不同部分。

通常viewport是指视窗、视口，浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况

视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

理想视口：一般来讲，这个视口其实不是真实存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

二、Rem布局

CSS3媒体查询适配meida queries

通过查询设备的宽度来执行不同的CSS代码，最终达到界面的配置

优点：

media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

方法简单，只需修改css文件

调整屏幕宽度时不用刷新页面就可以响应页面布局

缺点：

代码量大，不方便维护

不能够完全适配所有的屏幕尺寸，需要编写多套css样式

为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源

为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

什么是跨域？如何解决跨域？

1、什么是跨域？

跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

由此可知，跨域只会出现在浏览器中

2、如何解决跨域？

2.1、JSONP

JSONP解决跨域问题的原理是通过script标签的src属性来实现跨域请求。由于script标签的src属性不受跨域的限制，所以可以通过将需要请求的服务器的地址及相关参数作为src的值来进行传输。

由于是通过script标签的src属性来发送请求，因此JSONP只能支持GET请求。

浏览器输入url后的过程

大致流程：

URL 解析

DNS 查询

TCP 连接

处理请求

接受响应

渲染页面

浏览器是如何解析html页面的

浏览器收到一个html页面是如何解析成页面呈现给用户的呢？

(1)解析html：会按顺序解析。浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树

(2)构建dom树：它和步骤(1) 是同步进行，可以理解为边解析边构建。

(3)构建呈现树renderTree：将dom树与css结合，就是将样式应用到dom节点上

(4)布局：计算呈现树节点的大小和位置，这一位置是递归进行的。

(5)绘制：布局完成后，便是将呈现树绘制出来显示在屏幕上。

手写过Promise过源码吗

你看Vue源码是怎么看的

Vue2/Vue3响应式原理

1.vue2 响应式

实现原理：

对象类型：通过 Object.difineProperty() 对属性的读取，修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹）

存在问题：

新增属性、删除属性，界面不会更新（需要使用 this.、delete 或Vue.set、Vue.delete）

直接通过下标修改数组，界面不会自动更新

vue3 响应式

实现原理

通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值得读写，属性的添加，属性的删除等

通过 Reflect（反射）：对别代理对象的属性进行操作

Vue2为什么不能检测数组的变化

其实原因并不是因为Object.defineProperty()存在漏洞，而是出于性能问题的考虑。 Object.defineProperty在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key。

通过索引访问或设置对应元素的值时，可以触发 getter 和 setter 方法

通过 push 或 unshift 会增加索引，对于新增加的属性，需要再手动初始化才能被 observe 。

通过 pop 或 shift 删除元素，会删除并更新索引，也会触发 setter 和 getter 方法。

所以，Object.defineProperty是有监控数组下标变化的能力的，只是vue2.x放弃了这个特性。

Vue3中响应式原理做过哪些升级

一基于proxy的Observer

1 什么是proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋值、枚举、函数调用等）。

事件委托/事件冒泡

js事件冒泡

javascript的事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止，这就是事件冒泡现象。

js事件委托

事件委托又可以叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托的益处：我们都知道，减少dom操作可以提高网页性能，当一个页面的父级元素和很多子级元素都需要操作同一件事件的时候，我们不可能每个元素都去给它绑定一个事件

常见的状态码有哪些

100（客户端继续发送请求，这是临时响应）服务器返回此代码表示已收到请求的第一部分，请求者应当继续提出请求。

101 服务器根据客户端的请求切换协议，主要用于websocket或http2升级

200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201 （已创建）请求成功并且服务器创建了新的资源。

202 （已接受）服务器已接受请求，但尚未处理。

203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容）服务器成功处理了请求，但没有返回任何内容。

205 （重置内容）服务器成功处理了请求，但没有返回任何内容。

206 （部分内容）服务器成功处理了部分 GET 请求。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

400 （错误请求）服务器不理解请求的语法。

401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。

403 （禁止）服务器拒绝请求。

404 （未找到）服务器找不到请求的网页。

405 （方法禁用）禁用请求中指定的方法。

406 （不接受）无法使用请求的内容特性响应请求的网页。

407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时）服务器等候请求时发生超时。

409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。

410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型）请求的格式不受请求页面的支持。

416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

500 （服务器内部错误）服务器遇到错误，无法完成请求。

501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

！浏览器加载文件的顺序

！什么情况会导致reflow？

！总结了在哪些情况下会导致reflow发生：

1.改变窗囗大小

2.改变文字大小

3.添加/删除样式表

4.内容的改变，如用户在输入框中敲字(这样也会-_-||)

5.激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)

6.操作class属性

7.脚本操作DOM

8.计算offsetWidth和offsetHeight

9.设置style属性

进程和线程的区别

（1）调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位

（2）并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可并发执行

（3）拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源

（4）系统开销：在创建或撤消进程时，由于系统都要为之分配和回收资源，导致系统的开销明显大于创建或撤消线程时的开销。

Web前端安全

Cookie、sessionStroage、localStroage的区别

cookie是服务器发给客户端的特殊信息, 以文本形式存储在客户端,每次请求都会带上cookie

保存在浏览器端

保存时间设置过期时间,浏览器关闭后不会清除,保存在硬盘中, 过期时间到期后失效不设置过期时间, 保存在内存中, 浏览器关闭后消失单个cookie大小不能超过4kb安全性较低, cookie截获, cookie欺骗

localStorage(本地储存)

永久储存, 除非主动删除, 否则不会消失

sessionStorage(会话储存)

仅在当前会话下有效在同源窗口始终存在, 浏览器关闭之前浏览器打开新的同源页面页面刷新都还存在打开一个新的浏览器窗口同一个页面, 同源的session也是不一样的两者的存储大小都是5MB都保存在客户端不与服务器端进行交互只能储存字符串类型对于复杂的json格式可以进行stringify和parse来处理

说说post和get请求的区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

什么是盒子模型？以及如何转换？

HTML文档中的每个元素都被比喻成矩形盒子，盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）

如何清除浮动

1、使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

2、添加新的元素对其应用 clear:both

3、父级div定义overflow:hidden

4、父级div定义overflow:auto

5、父级定义高度height

6、父级display设置成table

Px、em、rem等长度单位有什么区别？

1.px 是一个绝对单位;em 和 rem 是一个相对单位, em 参考的是当前元

素的字体(font-size)大小, 参考的是页面根元素 html 的字体，也就是(font-size)大小

2.rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

是否了解过媒体查询，如何做响应式布局

是否了解BFC

css布局实现双飞翼和圣杯布局

Display有哪些值

常用的有：

none：此元素不显示。

block：将元素显示为块级元素，前后会带换行符。

inline:默认值，元素会被显示为内联元素，前后没有换行符。

inline-block:行内块级元素。

描述flex布局

原理：

flex是弹性盒子模型。元素被设置display：flex，就变成弹性容器。

flex布局是一维布局模型。大多属性都是作用于主轴，交叉轴被动变化。

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。

每根轴都有起点和终点，这对于元素的对齐非常重要。

弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

HTML5语义化标签有哪些

表示页面中一个内容区块或整个页面的标题。

页面中的一个内容区块，如章节、页眉、页脚或页面的其他地方，可以和h1、h2……元素结合起来使用，表示文档结构。

表示页面中导航链接的部分。

表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及联系方式。

语义化标签有什么好处

1.便于机器和人类阅读

2.便于搜索引擎搜索

3.自然语境的补充

4.结构化文档的分级

5.支持屏读软件

6.根据屏幕可以自动生成目录

常用的dom方法有哪些

获取元素对象方法：

1.document.getElementById() :返回对拥有指定 id 的第一个对象的引用。

2.document.getElementsByName():返回带有指定名称的对象集合。

3.document.getElementsByTagName():返回带有指定标签名的对象集合。

了解哪些ES6的新特性

1.const和let

ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）

let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了

如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行

2.模板字符串

3.箭头函数

AMD和CMD规范有什么区别

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

CMD 推崇依赖就近，AMD 推崇依赖前置

JS获取HTML元素的方法

用指定的 id 属性：调用 document.getElementById（id属性值）。

用指定的 name 属性：调用 document.getElementsByName（name属性值）。

用指定的标签名字：调用document|元素对象.getElementsByTagName（标签名）。

用指定的 CSS 类名：调用document|元素对象.getElementsByClassName（类名）。

用指定的 CSS 选择器：调用document|元素对象.querySelectorAll（选择器）找出所有匹配的元素。

匹配指定的 CSS 选择器：调用document|元素对象.querySelector（选择器）找出第 1 个匹配的元素。

Position属性的区别

1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流

2.position: relative; 相对于自己在文档流中的初始位置偏移定位。

3.position: fixed; 相对于浏览器窗口定位。

4.position: absolute; 是相对于父级非position:static 浏览器定位。

Js事件有几个阶段

js事件的三个阶段分别为：捕获、目标、冒泡

1.捕获：事件由页面元素接收，逐级向下，到具体的元素

2.目标：具体的元素本身

3.冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素

Js有哪些数据类型

8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。

JS数据类型：JS的基本类型和引用类型有哪些呢？

基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。

引用类型：object。里面包含的 function、Array、Date。

Js数组常用的方法有哪些

在数组末尾插入元素

arr.push(value)，在数组的末尾添加一个或多个元素，并返回数组的新长度。

删除数组末尾的元素

arr.pop()删除索引值最大的元素,并返回被删除的元素。

数组和数组（或元素）的合并

concat()合并数组或元素，返回新的数组,原数组不会改变

在数组中添加删除或替换元素

splice();在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;

splice()方法会修改原数组的值;

只有一个值时，从当前位置删除到数组末尾

指定字符连接字符串

join();数组的每个元素以指定的字符连接形成新字符串返回

将数组进行排序

sort()将数组进行排序(升序),返回新数组，原数组也会改变

将数组进行倒序

reverse()；可以将数组进行倒序，并返回新数组，原数组也会随之改变

Apply、call和bind的区别和用法

1.apply，call和bind都是用来改变this的指向

2.apply和call会让当前函数立即执行，而bind会返回一个函数，后续需要的时候再调用执行

Js的作用域链

一、作用域

在 Javascript 中，作用域分为全局作用域和函数作用域

全局作用域：

代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。

函数作用域：

在固定的代码片段才能被访问

二、作用域链

一般情况下，变量取值到创建这个变量的函数的作用域中取值。

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链

简述对Ajax的理解，描述原理

Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新

手写Ajax请求代码

1.创建异步对象

var xmlHttp = new XMLHttpRequest()

2.设置请求

//第一个参数为请求方式（'GET'/'POST'），第二个URL，第三个一般为true（异步），false（同步）

xmlHttp.open('POST',URL,true);

3.设置请求头

//（1）get方式不用设置

//（2）post方法需要设置请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.设置请求体

//（1）get方式不需要设置参数（get中的传递的参数在URL中已经拼接，所以不需要）

xmlHttp.send(null);

//（2）post方式需要设置参数（）例：xmlHttp.send('userName=' + unValue.value + "&userPassword=" + updValue.value)

xmlHttp.send(userBean);

5.让异步对象接受服务器响应数据

xmlHttp.onreadystatechange = function() {

//响应成功有两个条件需满足（1）服务器成功响应（2）异步对象的响应状态为4

if(this.status == 200 && this.readyState == 4){

console.log(this.responseText);

}

};

Js异步请求

异步：

在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

Js事件处理

一、事件流

1、事件冒泡

由IE提出

由下向上

2、事件捕获

由Netscape团队提出

由上向下

由于老版本浏览器不支持，所以很少使用

3、DOM事件流

DOM2级事件

分为三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段