❶ 2020年Web前端面试题汇总(一)
今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。
1.说几条写JavaScript的基本规范?
1)不要在同一行声明多个变量;
2)请使用===/!==来比较true/false或者数值;
3)使用对象字面量替代newObject这种形式;
4)减少使用全局函数,全局变量;
5)switch语句必须带有default分支;
6)if语句必须使用大括号;
7)for-in循环中的变量;
应该使用var关键字明确限定作用域;
从而避免作用域全局污染。
2.说说平衡二叉树?
平衡二叉搜索树(Self-balancingbinarysearchtree)
又被称为AVL树。
具有以下渣瞎性质：
1)它是一棵空树或它的左右两个子树
的高度差的绝对值不超过1，
并且左右两个子树都是一棵平衡二叉树。
2)平衡二叉树必定是二叉搜索树，反之则不一定。
3)平衡二叉树的常用实现方法有红黑树、AVL、
替罪羊树、Treap、伸展树等。
最小二叉平衡树的节点的公式如下：
F(n)=F(n-1)+F(n-2)+1备注：1是根节点，
F(n-1)是左子树的节点数量，
F(n-2)是右子树的节点数量。
3.清除浮动和解决垂直外边距重叠的解决方案?
问题描述:
1)父元素没有设置宽高，尺寸由子元素撑起;
子元素一旦浮动，父元素高度会发生塌陷。
2)子元素设置margin-top会作用的父元素的margin-top;
此时会造成垂直外边距重叠。
.clearfix::after,.clearfix::before{
content:''
display:table;
clear:both;
}
4.sessionStorage、localStorage和cookie?
相同点:
都用于浏览器端存储的缓存数据;
不同点:
1)存储内容是否发送到服务器端
当设置了Cookie后，数据会发送到服务器端，
造成一定的宽带浪费;xxxstorage则会将数据保存
到本地，不会造成宽带浪费;
2)数据存储大小不同
Cookie数据不能超过4K，适用于会话标识;
xxxstorage数据存储可以达到5M;
3)数据存储的有效期限不同
cookie只在设置了Cookid过期时间
之前一直有效，即使关闭窗口或者浏览器;
sessionStorage,仅在关闭浏览器之前有效;
localStorage,数据存储永久有效;
4)作用域不同
cookie和localStorage是在同源同窗口中
都是共享的;
sessionStorage不在不同的浏览器窗口
中共享，即使是同一个页面;
5.判断一个单词是否是回文?
回文是指把相同的词汇或句子，
在下文中调换位置或颠倒过来，
产生首尾回环的情景，
叫做回文，也叫回环。
比如cacac，redivider。
letcheckPalindrom=(str)=>{
returnstr===
str.split('').reverse().join('');
}
6.不借助临时变量，进行两个整数的交换?
输入a=3,b=1,
输出a=1,b=3
letswap=(a,b)=>{
b=b-a;
a=a+b;
b=a-b;
return[a,b];
}
7.请写如芦空出至少5个html5新增的标签，并说明其语义和应用场景?
section：定义文档中的一个章节;
nav：定义只包含导航链接的章节;
header：定义页面或章节的头部;
它经常包含logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部;
它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容，
如果被删除，剩下的内容仍然很合理。
8.get和post请求在缓存方面的区别?
get请求类似于查找的过程，用户获取数据，
可以不用每次都与数据库连接，所以可以使用缓存。
post不同，post做的一般是修改和删除的工作，
所以必须与数据库交互，所以不能使用缓存。
因此get请求适合于请求缓存。
9.如哗漏何解决异步回调地狱?
promise、generator、async/await
10.图片的懒加载和预加载?
预加载：提前加载图片，
当用户需要查看时可直接
从本地缓存中渲染。
懒加载：懒加载的主要目的
是作为服务器前端的优化，
减少请求数或延迟请求数。
两种技术的本质：
两者的行为是相反的，
一个是提前加载，
一个是迟缓甚至不加载。
懒加载对服务器前端有一定
的缓解压力作用，
预加载则会增加服务器前端压力。
11.bind，apply，call的区别?
通过apply和call改变函数的this指向，
这两个函数的第一个参数都是一样的，
表示要改变指向的那个对象，
第二个参数，apply是数组，
而call则是arg1,arg2...这种形式。
通过bind改变this作用域
会返回一个新的函数，
这个函数不会马上执行。
12.js怎么控制一次加载一张图片，加载完后再加载下一张?
方法一:
varobj=newImage();
obj.src="#/21.jpg";
obj.onload=function(){
document.getElementById("pic")
.innnerHTML="
}
❷ js基础面试题131-160道题目
131.用原生 JavaScript 的实现过什么功能吗？
参考答案：轮播图、手风琴、放大镜、3D动画效果等，切记，所答的一定要知道实现原理！，不知道还不如不说！
参与互动
132.javascript 代码中的"use strict"; 是什么意思 ? 使用它区别是什么？
参考答案：意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持
参与互动
133.简述创建函数的几种方式
参考答案：
参与互动
134.window.location.search() 返回的是什么？
参考答案：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值：?ver=1.0&id=timlq 也就是问号后面的！
参与互动
135.window.location.hash 返回的是什么？
参考答案：锚点 ， 返回值：#love ；
参与互动
136.window.location.reload() 作用？
参考答案：刷新当前页面
参与互动
137.为什么不能定义 1px 左右的 p 容器？
参考答案： IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px
参与互动
138.BOM 对象有哪些，列举 window 对象？
参考答案：
参与互动
139.简述 readonly 与 disabled 的区别
参考答案：
参与互动
140.为什么扩展 javascript 内置对象不是好的做法？
参考答案：
参与互动
141.什么是三元表达式？“三元”表示什么意思？
参考答案：三元如名字表示的三元运算符需要三个操作数。
语法是 条件 ? 结果1 : 结果2; .这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。
参与互动
142.我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
参考答案：所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
参考
参与互动
144.简述一下 Handlebars 的基本用法？
参考答案：没有用过的话说出它是干什么的即可
参与互动
143.简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
参考答案：
参与互动
145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
参考答案：
参与互动
146.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?
参考答案：Webkit 是浏览器引擎，包括 html 渲染和 js 解析功能，手机浏览器的主流内核，与之相对应的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也称 MSHTML，IE 使用）。 对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js 调试工具使用，熟练使用这些工具可以快速提高解决问题的效率
参与互动
147.如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
参考答案：了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念
参与互动
148.JavaScript 的循环语句有哪些？
参考答案：while for do while forEach
参与互动
149.作用域-编译期执行期以及全局局部作用域问题
参考答案：js 执行主要的两个阶段：预解析和执行期
参与互动
150.如何添加 html 元素的事件，有几种方法？请列举
参考答案：直接在标签里添加；在元素上添加、使用事件注册函数添加
参与互动
151.列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个
参考答案：
对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
参与互动
152.事件绑定的方式
参考答案：
参与互动
153.事件循环
参考答案：事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。
参与互动
154.事件模型
参考答案：
解析：参考
参与互动
155.如何自定义事件
参考答案：
1.原生提供了 3 个方法实现自定义事件 2.createEvent，设置事件类型，是 html 事件还是 鼠标事件 3.initEvent 初始化事件，事件名称，是否允许冒泡，是否阻止自定义事件 4.dispatchEvent 触发事件
MDN
参与互动
156.target 和 currentTarget 区别
参考答案：
参与互动
157.prototype 和__proto__的关系是什么
参考答案：
所有的对象都拥有__proto__属性，它指向对象构造函数的 prototype 属性
所有的函数都同时拥有__proto__和 protytpe 属性 函数的__proto__指向自己的函数实现 函数的 protytpe 是一个对象 所以函数的 prototype 也有__proto__属性 指向 Object.prototype
Object.prototype.__proto__指向 null
参与互动
158.什么是原型属性？
参考答案：从构造函数的prototype属性出发找到原型，这时候就把原型称之为构造函数的原型属性
参与互动
159.什么是原型对象？
参考答案：从实例的__proto__出发，找到原型，这时候就把原型称之为实例的原型对象。
参与互动
160.使用 let、var 和 const 创建变量有什么区别
参考答案：
let 和 const 的区别在于：let 允许多次赋值，而 const 只允许一次。
❸ Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望则宽本篇文章能够对大家有所帮助。1.渐进增强与优雅降级
渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。
优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。
这两种思想的区别在于：
1.渐进增强是向上兼容，优雅降级是向下兼容;
2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;
3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明：
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。
怪异模式与标准模式的主要区别：
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。
3.怪异模式下，在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析，如盲人阅读器根据语义渲染网页。
·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
语义化标签
·
·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;
·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;
·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;
·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;
·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);
·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?
:link表示未访问的链接状态;
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA，即:link:visited:hover:active。理由如下：
·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;
·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;
·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;
·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外，还有下面几个长度单位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;
·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;
·rem当用在根元素()的font-size上面时，它代表了它的初始值;
·ch代表元素所用字体font中“0”这一字形的宽度;
·vh1vh相当于视口高度的1%，100vh就是视口的高度;
·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;
·vmax视口高度vw和宽度vh两者中的最小值
·vmin视口高度vw和宽度vh两种中的最大值;
·%相对于父级元素的大小来确定;
参考：CSS
CSSpercentage[2]
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：
·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;
而冒泡与捕获恰恰相反：
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;
而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义：
·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;
·当布尔值是true时，表示向下捕获触发事件;
不能冒泡的事件
有些事件是不会冒泡的。比如：
·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;
·focus元素获取焦点时触发;
·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;
·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;
事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;
·preventDefault()阻止默认事件的发生;
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;
比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。
paragraph
❹ 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!
❺ 前端面试会提问到哪些
在面试前端的过程中，有些问题是经常会被提问到的
一、基础篇
1. 在不使用第三个变量的情况下，如何调换a与b的值？
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时，使用link和@import有什么区别？
5. 简述一下事件代理
二、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
三、CSS类的题目
01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有哪些？
05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure)，如何使用它，为什么要使用它？
04、.call 和.apply的区别是什么？
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别？
06、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”; ？ 使用它的好处和坏处分别是什么？
09、什么是事件循环 (event loop)？
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题？
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法？
05、前端开发中，如何优化图像？图像格式的区别？
06、浏览器是如何渲染页面的？
07、页面重构怎么操作？
08、什么叫优雅降级和渐进增强？
09、前端需要注意哪些SEO？如何做SEO优化？
10、平时如何管理你的项目？