初级前端必看——2020最完整大厂高频面试真题分享（含答案）！

缺乏、安全感 2022-12-21 02:26 196阅读 0赞

# HTML部分 #

## 1.你是怎么理解HTML语义化 ##

Step 1：先举例说明  
HTML语义化简单来说就是用正确的标签来做正确的事。  
比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。  
Step 2：说说为什么需要使用语义化标签  
前期：前端工作主要由后端人员完成，也就是打野阶段，使用的是table布局  
中期：美工人员使用div+css来完成  
当前：专业的前端开发应该使用合适的标签来表达正确含义的页面结构  
让页面具有良好的结构和含义，可以有效提高：  
可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；  
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；  
国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；  
互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护

## 2. meta viewport 是做什么用的，怎么写？ ##

Step 1：使用目的  
是为了在移动端不让用户缩放页面使用的  
Step 2：怎么写

Step 3：解释每个单词的含义 with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度 maximum-scale=1 指定用户能够放大的最大比例 minimum-scale=1 指定用户能够缩小的最大比例

## 3.H5是什么 ##

简单粗暴：就是一种移动端页面  
深入点：微信上的一种移动营销页面  
总之不是HTML5

## 4.label标签的作用 ##

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。  
Number:Date:

## 5.CSS3新增伪类有哪些： ##

CSS3新增伪类举例：  
p:first-of-type 选择属于其父元素的首个元素的每个  
元素。  
p:last-of-type 选择属于其父元素的最后元素的每个  
元素。  
p:only-of-type 选择属于其父元素唯一的元素的每个  
元素。  
p:only-child 选择属于其父元素的唯一子元素的每个元素。  
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。  
:enabled :disabled 控制表单控件的禁用状态。:checked 单选框或复选框被选中。

## 6.a标签中 如何禁用href 跳转页面 或 定位链接 ##

e.preventDefault();href="javascript:void(0);

## 7. canvas在标签上设置宽高 和在style中设置宽高有什么区别 ##

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。

## 8.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? ##

IE: trident内核  
Firefox：gecko内核  
Safari:webkit内核  
Opera:以前是presto内核，Opera现已改用GoogleChrome的Blink内核  
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

## 9.iframe有哪些缺点？ ##

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

## 10.HTML5新特性 ##

1.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除;  
新的技术webworker, websocket, Geolocation;

## 11.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ ##

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。  
离线的情况下，浏览器就直接使用离线存储的资源。

## 12.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? ##

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。  
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。  
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。  
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。复制代码  
你知道多少种Doctype文档类型？  
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。  
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。  
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。  
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks  
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

## 13.HTML与XHTML——二者有什么区别 ##

区别：  
1.所有的标记都必须要有一个相应的结束标记  
2.所有标签的元素和属性的名字都必须使用小写  
3.所有的XML标记都必须合理嵌套  
4.所有的属性必须用引号""括起来  
5.把所有<和&特殊符号用编码表示  
6.给所有属性赋一个值  
7.不要在注释内容中使“–”  
8.图片必须有说明文字复制代码

> 由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~

# CSS部分 #

## 1. 页面渲染时，dom 元素所采用的 布局模型,可通过box-sizing进行设置。根据计算宽高的区域可分为： ##

content-box (W3C 标准盒模型) border-box (IE 盒模型) padding-box (FireFox 曾经支持) margin-box (浏览器未实现)

Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

## 2. ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法如下： ##

标准模型 :box-sizing:content-box; IE模型:box-sizing:border-box

## 3.几种获得宽高的方式 : ##

dom.style.width/height     
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。  
dom.currentStyle.width/height     
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。  
window.getComputedStyle(dom).width/height     
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。  
dom.getBoundingClientRect().width/height     
这种方式是根据元素在视窗中的绝对位置来获取宽高的  
dom.offsetWidth/offsetHeight     
这个就没什么好说的了，最常用的，也是兼容最好的。

## 4.拓展各种获得宽高的方式 : ##

获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width  
获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth  
网页全文的高度和宽度： document.body.scrollHeight/Width  
滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft  
网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

## 5.css优先确定级： ##

每个选择器都有权值，权值越大越优先  
继承的样式优先级低于自身指定样式  
！important优先级最高 js也无法修改  
权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

> 由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~

![034f01f0407303b5a9d08330964c688b.png][]

# JavaScript #

## 1.JS中的垃圾回收机制 ##

必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。  
这段话解释了为什么需要系统需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：

var a="hello world";
    var b="world";
    var a=b;
    //这时，会释放掉"hello world"，释放内存以便再引用

垃圾回收的方法：标记清除、计数引用。  
标记清除  
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。  
垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。  
引用计数法  
另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值没引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减1，当这个值的引用次数为0的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为0的这些值。  
用引用计数法会存在内存泄露，下面来看原因：

function problem() {
    var objA = new Object();
    var objB = new Object();
    objA.someOtherObject = objB;
    objB.anotherObject = objA;
    }

在这个例子里面，objA和objB通过各自的属性相互引用，这样的话，两个对象的引用次数都为2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为0，这样的相互引用如果大量存在就会导致内存泄露。  
特别是在DOM对象中，也容易存在这种问题：

var element=document.getElementById（’‘）；
    var myObj=new Object();
    myObj.element=element;
    element.someObject=myObj;

这样就不会有垃圾回收的过程。

## 2.说一下Commonjs、AMD和CMD ##

一个模块是能实现特定功能的文件，有了模块就可以方便的使用别人的代码，想要什么功能就能加载什么模块。  
Commonjs：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载require()引入模块。  
AMD：中文名异步模块定义的意思。  
requireJS实现了AMD规范，主要用于解决下述两个问题。  
1.多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器  
2.加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长。  
语法：requireJS定义了一个函数define，它是全局变量，用来定义模块。  
requireJS的例子：

//定义模块
    define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
    console.log(name);
    }
    return {
    printName: printName
    };
    });

//加载模块
    require(['myModule'], function (my){
    my.printName();
    }

requirejs定义了一个函数define,它是全局变量，用来定义模块：

define(id?dependencies?,factory)

在页面上使用模块加载函数：

require([dependencies],factory)；

总结AMD规范：require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。  
因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。

## 3.对象深度克隆的简单实现 ##

ES5的常用的对象克隆的一种方式。注意数组是对象，但是跟对象又有一定区别，所以我们一开始判断了一些类型，决定newObj是对象还是数组~

> 由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~

![571753daf9cd5622408d5d9ce00363dc.png][]

# Vue部分 #

## 1.nextTick ##

在下次dom更新循环结束之后执行延迟回调，可用于获取更新后的dom状态  
新版本中默认是microtasks, v-on中会使用macrotasks  
macrotasks任务的实现:

osetImmediate / MessageChannel / setTimeout

## 2.什么是vue生命周期 ##

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

## 3.vuex ##

state: 状态中心  
mutations: 更改状态  
actions: 异步更改状态  
getters: 获取状态  
modules: 将state分成多个modules，便于管理

## 4.vue中 key 值的作用 ##

使用key来给每个节点做一个唯一标识  
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，  
否则vue只会替换其内部属性而不会触发过渡效果。

## 5.Vue 组件中 data 为什么必须是函数？ ##

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。  
当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

## 6.v-for 与 v-if 的优先级 ##

v-for的优先级比v-if高。

## 7.说出至少 4 种 vue 当中的指令和它的用法 ##

v-if(判断是否隐藏)  
v-for(把数据遍历出来)  
v-bind(绑定属性)  
v-model(实现双向绑定)

## 8.vue中子组件调用父组件的方法 ##

第一种方法是直接在子组件中通过this. p a r e n t . e v e n t 来 调 用 父 组 件 的 方 法 。 第 二 种 方 法 是 在 子 组 件 里 用 parent.event来调用父组件的方法。 第二种方法是在子组件里用 parent.event来调用父组件的方法。第二种方法是在子组件里用emit向父组件触发一个事件，父组件监听这个事件就行了。  
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。

## 9.vue中父组件调用子组件的方法 ##

父组件利用ref属性操作子组件方法。  
父：

<child ref="childMethod"></child>
    子：
    method: {
      test() {
         alert(1)
      }
    }

在父组件里调用test即 this.$refs.childMethod.test()

## 10.vue页面级组件之间传值 ##

1.使用vue-router通过跳转链接带参数传参。  
2.使用本地缓存localStorge。  
3.使用vuex数据管理传值。

## 11.说说vue的动态组件。 ##

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。  
主要考查面试这 component的 is属性。

> 由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~

![572db4ac1466350cae3287cabd31cbd4.png][]

# 服务端与网络部分 #

## 1.常见状态码 ##

1xx: 接受，继续处理  
200: 成功，并返回数据  
201: 已创建  
202: 已接受  
203: 成为，但未授权  
204: 成功，无内容  
205: 成功，重置内容  
206: 成功，部分内容  
301: 永久移动，重定向  
302: 临时移动，可使用原有URI  
304: 资源未修改，可使用缓存  
305: 需代理访问  
400: 请求语法错误  
401: 要求身份认证  
403: 拒绝请求  
404: 资源不存在  
500: 服务器错误

## 2.get / post ##

get: 缓存、请求长度受限、会被历史保存记录  
o无副作用(不修改资源)，幂等(请求次数与资源无关)的场景  
post: 安全、大数据、更多编码类型  
两者详细对比如下图:

## 3.Websocket ##

Websocket 是一个 持久化的协议， 基于 http ， 服务端可以 主动 push  
兼容：  
oFLASH Socket  
o长轮询： 定时发送 ajax  
olong poll： 发送 --> 有消息时再 response  
new WebSocket(url)  
ws.onerror = fn  
ws.onclose = fn  
ws.onopen = fn  
ws.onmessage = fn  
ws.send()

## 4.TCP三次握手 ##

建立连接前，客户端和服务端需要通过握手来确认对方:  
客户端发送 syn(同步序列编号) 请求，进入 syn\_send 状态，等待确认  
服务端接收并确认 syn 包后发送 syn+ack 包，进入 syn\_recv 状态  
客户端接收 syn+ack 包后，发送 ack 包，双方进入 established 状态

## 5.TCP四次挥手 ##

客户端 – FIN --> 服务端， FIN—WAIT  
服务端 – ACK --> 客户端， CLOSE-WAIT  
服务端 – ACK,FIN --> 客户端， LAST-ACK  
客户端 – ACK --> 服务端，CLOSED

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kVdEf4ku-1605263004468)(https://upload-images.jianshu.io/upload\_images/24944724-59f7ea650d911aaa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\]

## 最后 ##

面试是跳槽涨薪最直接有效的方式，现在可以开始准备明年春季的面试了，各位做好面试造飞机，工作拧螺丝的准备了吗？

掌握了这些知识点，面试时在候选人中又可以夺目不少，暴击9999点。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。

### 快速入手通道：（**[点这里][Link 1]**）下载！诚意满满！！！ ###

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~你的支持，我的动力；祝各位前程似锦，offer不断！！！

[034f01f0407303b5a9d08330964c688b.png]: /images/20221120/a3980fd751254288b2069c788a56735e.png
[571753daf9cd5622408d5d9ce00363dc.png]: /images/20221120/79acfa12c8584b0389f59a19c9c27bc3.png
[572db4ac1466350cae3287cabd31cbd4.png]: /images/20221120/0ad0e3f44d6e4510b370b4e271b18e56.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=1Zabp37b