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

一、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
图片[1]-前端面试(基础知识汇总)-小白之家

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论