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

一、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;