初级前端必看——2020最完整大厂高频面试真题分享(含答案)!
HTML部分
1.你是怎么理解HTML语义化
Step 1:先举例说明
HTML语义化简单来说就是用正确的标签来做正确的事。
比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。
Step 2:说说为什么需要使用语义化标签
前期:前端工作主要由后端人员完成,也就是打野阶段,使用的是table布局
中期:美工人员使用div+css来完成
当前:专业的前端开发应该使用合适的标签来表达正确含义的页面结构
让页面具有良好的结构和含义,可以有效提高:
可访问性:帮助辅助技术更好的阅读和转译你的网页,利于无障碍阅读;
可检索性:有了良好的结构和语义,可以提高搜索引擎的有效爬取,提高网站流量;
国际化:全球只有13%的人口是英语母语使用者,因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构;
互用性:减少网页间的差异性,帮助其他开发者了解你网页的结构,方便后期开发和维护
2. meta viewport 是做什么用的,怎么写?
Step 1:使用目的
是为了在移动端不让用户缩放页面使用的
Step 2:怎么写
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
Step 3:解释每个单词的含义
with=device-width 将布局视窗(layout viewport)的宽度设置为设备屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户能够放大的最大比例
minimum-scale=1 指定用户能够缩小的最大比例
3.H5是什么
简单粗暴:就是一种移动端页面
深入点:微信上的一种移动营销页面
总之不是HTML5
4.label标签的作用
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>
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> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
(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也无法修改
权值相同时,靠近元素的样式优先级高 顺序为内联样式表(标签内部)> 内部样式表(当前文件中)> 外部样式表(外部文件中)
由于文章篇幅限制,不可能将所有面试题以文字形式展示出来,本篇为大家精选了一些面试题,有需要的程序猿(媛)可以到文末领取哦~
![](https://upload-images.jianshu.io/upload_images/24944724-84c94b482d9f1619.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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.对象深度克隆的简单实现
function deepClone(obj){
var newObj= obj instanceof Array ? []:{};
for(var item in obj){
var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
newObj[item] = temple;
}
return newObj;
}
ES5的常用的对象克隆的一种方式。注意数组是对象,但是跟对象又有一定区别,所以我们一开始判断了一些类型,决定newObj是对象还是数组~
由于文章篇幅限制,不可能将所有面试题以文字形式展示出来,本篇为大家精选了一些面试题,有需要的程序猿(媛)可以到文末领取哦~
![](https://upload-images.jianshu.io/upload_images/24944724-78855b3699dac6b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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.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属性。
由于文章篇幅限制,不可能将所有面试题以文字形式展示出来,本篇为大家精选了一些面试题,有需要的程序猿(媛)可以到文末领取哦~
![](https://upload-images.jianshu.io/upload_images/24944724-3467c3f016ec2c20.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
服务端与网络部分
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
![](https://upload-images.jianshu.io/upload_images/24944724-59f7ea650d911aaa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后
面试是跳槽涨薪最直接有效的方式,现在可以开始准备明年春季的面试了,各位做好面试造飞机,工作拧螺丝的准备了吗?
掌握了这些知识点,面试时在候选人中又可以夺目不少,暴击9999点。机会都是留给有准备的人,只有充足的准备,才可能让自己可以在候选人中脱颖而出。
快速入手通道:(点这里)下载!诚意满满!!!
整理不易,觉得有帮助的朋友可以帮忙点赞分享支持一下小编~你的支持,我的动力;祝各位前程似锦,offer不断!!!