前端面试(基础知识汇总)

前端面试

一、css
css不是前端面试的重头戏，却是前端根底知识必问的，也是前端入门的最低门槛。假如你连根底的css都一问三不知，面试官只会微笑的对你说一句‘回去等通知吧’。
postion
杀了个回马枪，仍是说说position:sticky吧
flex
布局的传统解决方案，根据盒状模型，依赖display特点+position特点+float特点。它关于那些特殊布局十分不方便，比如，笔直居中就不简略完成。但flex两行代码就能够完成
Flex布局语法教程
30分钟彻底弄懂flex布局
页面布局
CSS完成水平笔直居中的1010种方法
CSS常见布局方法
各种常见布局完成+知名网站实例剖析
css盒模型
在最初接触CSS的时分，关于CSS盒模型的不了解，撞了很屡次的南墙呀。盒模型是网页布局的根底，它制定了元素如安在页面中显现，假如足够地把握，那使用CSS布局那将会简略得多。
css盒模型全面解析
h5适配各种设备
从淘宝和网易的font-size考虑移动端怎样使用rem？
细说移动端经典的REM布局与新秀VW布局
BFC
BFC是块级格式化上下文，是一个独立的烘托区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响
什么是BFC？看这一篇就够了
CSS3动画
在CSS3呈现之前，动画都是通过JavaScript动态的改变元素的样式特点来完成了，这种方法尽管能够完成动画，但是在功能上存在一些问题。CSS3的呈现，让动画变得愈加简略，功能也愈加好。
css3动画详解
前端面试题——怎么画一条0.5px的线
CSS预处理器
less和sass咱们必定都用过，今天咱们从另一个角度来谈谈他们
2019年，你是否能够抛弃CSS预处理器？
移动端的问题
移动端web项目越来越多，设计师关于UI的要求也越来越高，比如1px的边框。在高清屏下，移动端的1px会很粗
移动端1px解决方案
在写h5页面时，页面翻滚一定是让开发者头痛的一部分。特别是当页面布局嵌套较深，子元素各种脱离文档流，咱们在获取元素距离值、控制翻滚条时各种犯错。分明代码没有问题，但展现的效果就是和想象的不一样。此刻是不是觉得css很诡异。其实不然，css也是有自己逻辑的，只是你了解的还不够深化，今天带咱们全面解析页面翻滚。
页面滑动和定位全面解析
css篇就到这儿结束了，接下来是前端面试C位的javascript
二、javascript
javascript是前端面试中当之无愧的C位，也是前端程序员终其一生需求探求的言语。js初窥觉得简略易懂，只需深化之后才干体会到它的奥妙以及美丽，让咱们一起由浅入深玩转js。
数据类型
javascript的数据类型、数据检查、深浅复制，是js最根底的内容了。月薪4k的前端开发都知道的经典面试题“JavaScript有几种类型”，但假如让你手写一个深复制，你能写出来吗
JavaScript根底心法——深浅复制
面试题之怎么完成一个深复制
效果域
了解JavaScript中的履行上下文和履行栈
破解前端面试（80%应聘者不及格系列）：从闭包说起
原型
JavaScript深化之创立对象的多种方法以及优缺点
JavaScript深化之从原型到原型链
重新认识结构函数、原型和原型链
一文吃透一切JS原型相关知识点
继承
彻底弄懂JS原型与继承
JavaScript深化之继承的多种方法和优缺点
new、this
JavaScript深化之new的模仿完成
面试官问：JS的this指向
callapplybind
JavaScript根底心法——callapplybind
JavaScript深化之call和apply的模仿完成
JavaScript深化之bind的模仿完成
eventloop
这一次，彻底弄懂JavaScript履行机制
一次弄懂EventLoop（彻底解决此类面试问题）
从eventloop规范探求javaScript异步及浏览器更新烘托时机
浏览器与Node的事情循环(EventLoop)有何差异?
promise
promise平常作业中用到的比较多，一般现在的项目只需你恳求接口都会用到promise。它也是平常面试中的高频考点，尽管平常用到的多，但大部分人面试时遇到原理性的问题仍是一点懵逼。
不管是平常开发仍是面试，promise都是常客。所以引荐的文章比较多，咱们一定要耐性看完，这一次彻底弄懂它。
Promise不会？？看这儿！！！史上最通俗易懂的Promise！！！
当async/await遇上forEach
英文好的同学能够看下这篇文档
Promises/A+
浏览器缓存机制
浏览器缓存机制全解
浏览器缓存原理？—送你满分答案
浏览器烘托原理
浏览器烘托原理（功能优化之怎么减少重排和重绘）
浏览器地址栏里输入URL后的全过程
前端功能优化之重排和重绘
函数式编程
JavaScript函数式编程到底是个啥
函数式编程全书
简明JavaScript函数式编程——入门篇
HTML5WebWorker
浅谈HTML5WebWorker
JavaScript功能利器——WebWorker
ServiceWorker
借助ServiceWorker和cacheStorage缓存及离线开发
JavaScript是怎么作业的：ServiceWorker的生命周期及使用场景
面试官：请你完成一个PWA我：
数据处理
解锁多种JavaScript数组去重姿势
20道JS原理题助你面试一臂之力！
一个合格的中级前端工程师需求把握的28个JavaScript技巧
es6
ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)
近一万字的ES6语法知识点弥补-掘金
我知道内容有些多，咱们能够先收藏，但一定要去看。当你把2020前端面试必会知识点系列专题的文章都看完并且了解了，今后就没有你过不了的前端面试。资源都帮你整理好了，还不学就有些说不过去了。
不想每次面试都像菜市场上廉价的白菜一样让人选择，那就让自己强壮起来。奋斗啊年轻人！！！

前端面试基础知识汇总

1、html5为什么只需求写?
答：html5不是根据sgml(规范通用标记言语)，不需求对dtd文件进行引证，可是需求doctype来规范浏览器的行为，
不然浏览器将开启奇怪模式，而html4.01根据sgml，需求引进dtd，才干奉告浏览器文档运用的文档类型
2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
行内元素有：abspanimginputselectstrong(强调的语气)
块级元素有：divulollidldtddh1h2h3h4…p
闻名的空元素：
鲜为人知的是：
3、页面导入款式时，运用link和@import有什么差异?
两者都是外部引证CSS的办法，可是存在必定的差异：
差异1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务;@import归于CSS领域，只能加载CSS。
差异2：link引证CSS时，在页面载入时同时加载;@import需求页面网页彻底载入今后加载。
差异3：link是XHTML标签，无兼容问题;@import是在CSS2.1提出的，低版别的浏览器不支撑。
差异4：link支撑运用Javascript操控DOM去改动款式;而@import不支撑。
补充：@import最优写法
@import的写法一般有下列几种：
@import‘style.css’//WindowsIE4/NS4,MacOSXIE5,MacintoshIE4/IE5/NS4不辨认
@import“style.css”//WindowsIE4/NS4,MacintoshIE4/NS4不辨认
@importurl(style.css)//WindowsNS4,MacintoshNS4不辨认
@importurl(‘style.css’)//WindowsNS4,MacOSXIE5,MacintoshIE4/IE5/NS4不辨认
@importurl(“style.css”)//WindowsNS4,MacintoshNS4不辨认
由上分析知道，@importurl(style.css)和@importurl(“style.css”)是最优的选择，兼容的浏览器最多。
从字节优化的视点来看@importurl(style.css)最值得引荐。
4、常见的浏览器内核有哪些?
运用Trident内核的浏览器：IE、Maxthon、TT、TheWorld等;
运用Gecko内核的浏览器：Netcape6及以上版别、FireFox、MozillaSuite/SeaMonkey;
运用Presto内核的浏览器：Opera7及以上版别;
运用Webkit内核的浏览器：Safari、Chrome。
5、html5有哪些新特性?移除了哪些元素?怎样处理HTML5新标签的浏览器兼容性问题?怎样区分html和html5?
新增的元素有绘画canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长时刻存储数据，浏览器关闭后数据不丢掉，而sessionStorage的数据在浏览器关闭后主动删去，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，Webworker,Websockt,Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font,s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
怎样处理HTML5新标签的浏览器兼容问题?怎样区分HTML和HTML5?
处理兼容问题有两种办法：
1.IE8/IE7/IE6支撑经过document.办法发生的标签，运用这一特性让这些浏览器支撑HTML5新标签。
2.运用是html5shim结构
别的，DOCTYPE声明的办法是区分HTML和HTML5标志的一个重要要素，此外，还可以根据新增的结构、功用元素来加以区分。
6、iframe有哪些优缺陷?
优点：
1.用来完结长连接，在Websocket不可用的时分作为一种代替，最开始由google创造。Comet：根据HTTP长连接的”服务器推”技能
2.跨域通讯。JavaScript跨域总结与解决办法，类似的还有浏览器多页面通讯，比方音乐播映器，用户假如打开了多个tab页，应该只要一个在播映。
3.历史记录办理，解决ajax化网站呼应浏览器行进后退按钮的计划，在html5的historyapi不可用时作为一种代替。
4.纯前端的utf8和gbk编码互转。比方在utf8页面需求生成一个gbk的encodeURIComponent字符串，可以经过页面加载一个gbk的iframe，然后主页面与子页面通讯的办法完结转换，这样就不用在页面上插入一个十分巨大的编码映射表文件了
缺陷：
1、在网页中运用结构结构最大的弊端是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个结构组成的网页时，它们只看到结构而无法找到链接，因此它们会认为该网站是个死站点，而且很快回身离去。对一个网站来说这无异于一场灾祸。
假如你想销售产品，你需求客户;如想得到客户，你首要要让人们拜访你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时刻、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。
2、结构结构有时会让人感到迷惑，特别是在几个结构中都呈现上下、左右滚动条的时分。这些滚动条除了会抢占现已十分有限的页面空间外，还会分散拜访者的留意力。拜访者遇到这种网站往往会马上回身脱离。他们会想，已然你的主页如此紊乱，那么网站的其他部分也许更不值得浏览。
3、链接导航问题。运用结构结构时，你有必要确保正确设置所有的导航链接，如不然，会给拜访者带来很大的费事。比方被链接的页面呈现在导航结构内，这种状况下拜访者便被陷住了，因为此时他没有其他当地可去。
7、label的作用是什么?是怎样运用的?
Label中有两个特点是十分有用的,一个是FOR、别的一个便是ACCESSKEY了。
FOR特点
功用：表明Label标签要绑定的HTML元素，你点击这个标签的时分，所绑定的元素将获取焦点。
用法：名字
ACCESSKEY特点：
功用：表明拜访Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：名字
局限性：accessKey特点所设置的快捷键不能与浏览器的快捷键冲突，不然将优先激活浏览器的快捷键。
8、完结不运用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持共同的作用?
9、网页验证码是干嘛的?是为了解决什么安全问题?
网页验证码介绍：”验证码”的英文表明为CAPTCHA(CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart)，翻译过来便是”全主动区分核算机和人类的图灵测验”，望文生义，它是用来区分核算机和人类的。在CAPTCHA测验中，作为服务器的核算机会主动生成一个问题由用户来答复。这个问题可以由核算机生成并评判，可是有必要只要人类才干答复。由于核算机无法答复CAPTCHA的问题，所以答复出问题的用户就可以被认为是人类。CAPTCHA是由核算机来考人类，而不是规范图灵测验中那样由人类来考核算机，因此人们有时称CAPTCHA是一种反向图灵测验。
验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显现，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否共同，共同就继续，不然返回提示。攻击者编写的robot程序，很难辨认验证码字符，顺利的完结主动注册，登录;而用户可以辨认填写，所以这就完结了阻挠攻击的作用。而图片的字符辨认，便是看图片上的干扰强度了。就实际的作用来说，验证码只是增加攻击者的难度，而不可能彻底的防止。
10、介绍一下规范的css的盒子模型?与低版别IE的盒子模型有什么不同?
盒子模型有两种，别离是ie盒子模型和规范w3c盒子模型
W3C盒子模型的范围包括margin、border、padding、content，而且content部分不包括其他部分
IE盒子模型的范围也包括margin、border、padding、content，和规范W3C盒子模型不同的是：IE盒子模型的content部分包括了border和pading
11、怎样居中div，怎样居中一个起浮元素?怎样让肯定定位的div居中?
a.margin:xpxauto;
b.确定容器的宽高，这儿宽度是有必要的，高度可以不设，设置外层的上外边距和左外边距别离是宽高的一半。
完结居中关键在于margin设置与position:relative.
.div{
width:500px;
height:300px;
margin:-150px00-250px;
position:relative;
left:50%;
top:50%;
}
c.position:absolute;
top:50%;
left:50%;只能把div定位在以红色圈为起点的方位，加上margin:-100px0px0px-100
12、display有哪些值?阐明他们的作用?
block:块目标的默认值。用该值为目标之后增加新行
none:隐藏目标。与visibility特点的hidden值不同，其不为被隐藏的目标保存其物理空间
inline:内联目标的默认值。用该值将从目标中删去行
compact:分配目标为块目标或根据内容之上的内联目标
marker:指定内容在容器目标之前或之后。要运用此参数，目标有必要和:after及:before伪元素一起运用
inline-table:将表格显现为无前后换行的内联目标或内联容器
list-item:将块目标指定为列表项目。并可以增加可选项目标志
run-in:分配目标为块目标或根据内容之上的内联目标
table:将目标作为块元素级的表格显现
13、position的值relative和absolute的定位原点是什么?
Absolute，CSS中的写法是：position:absolute;他的意思是肯定定位，他是参照浏览器的左上角，合作TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。假如设定TRBL而且父级没有设定position特点，那么当时的absolute则以浏览器左上角为原始点进行定位，方位将由TRBL决定。
Relative，CSS中的写法是：position:relative;他的意思是肯定相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，合作TRBL进行定位，当父级内有padding等CSS特点时，当时级的原始点则参照父级内容区的原始点进行定位。
14、display设置为inline-block时，li与li之间有看不见的空白距离是什么原因引起的?有什么解决办法?
行框的摆放会受到中心空白(回车空格等等)的影响，这些空白也会被应用款式，占有空间，所以会有距离
解决：设置ul的font-size为0，缺陷是有必要从头在li中去设置字体大小
15、请解说下为什么会呈现起浮和什么时分需求铲除起浮?铲除起浮的办法?
a.增加新的元素、应用clear：both;
b.父级定义overflow:auto(留意：是父级div也便是这儿的div.outer)一个对搜索引擎优化比较友好，另个hidden对搜索引擎优化不是太友好
在IE6中还需求触发hasLayout，例如zoom：1;
c.据说是最巨大上的办法:after
办法：(留意：作用于起浮元素的父亲)IE6-7不支撑:after，
运用zoom:1触发hasLayout
{zoom:1;}/*==forIE6/7Maxthon2==*/
:after{clear:both;content:’.’;display:block;width:0;height:0;visibility:hidden;}
d.运用br标签和其自身的html特点,
clear=”all|left|right|one”特点
e.父元素也设置起浮
f.父元素设置display:table盒模型特点现已改动，由此造成的一系列问题，得不偿失，不引荐运用
16、在网页中的应该运用奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和Web规划的其他部分构成比例关系
运用奇数号字体欠好的当地是，文本阶段无法对齐
17、margin和padding别离适合什么场景运用?
何时应当运用margin：
(1)需求在border外侧增加空白时，
(2)空白处不需求有背景(色)时，
(3)上下相连的两个盒子之间的空白需求相互抵消时，比方15px+20px的margin，将得到20px的空白(留意当地见第三点)。
何时应当运用padding
(1)需求在border内侧增加空白时(往往是文字与边框距离的设置)，
(2)空白处需求背景(色)时，
(3)上下相连的两个盒子之间的空白希望等于两者之和时，比方15px+20px的padding，将得到35px的空白。
margin运用时应该留意的当地
margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的鸿沟仍然会堆叠。可是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正鸿沟减去负鸿沟的肯定值，也便是说，把正的鸿沟值和负的鸿沟值相加。
18、元素竖向的百分比设定是相对于容器的高度吗?
答：相对于父容器的宽度
19、什么是呼应式规划?呼应式规划的基本原理是什么?怎样兼容较低版别的IE?
答：一个网站可以兼容多个终端——而不是为每个终端做一个特定的版别。
优点：
面对不同分辨率设备灵活性强
可以快捷解决多设备显现习惯问题
缺陷：
兼容各种设备工作量大，功率低下
代码累赘，会呈现隐藏无用的元素，加载时刻加长
其实这是一种折中性质的规划解决计划，多方面要素影响而达不到最佳作用
必定程度上改动了网站原有的布局结构，会呈现用户混杂的状况
respond.js和css3-mediaqueries-js
20、设置元素起浮后，该元素的display值是多少?
display:block;