前端开发面试题(前端面试八股文)

本篇文章给大家谈谈前端开发面试题，以及前端面试八股文对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1.渐进增强与优雅降级

渐进增强

并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

1.渐进增强是向上兼容，优雅降级是向下兼容;

2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;

3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)

2.DOCTYPE

作用

DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML

的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。

DOCTYPE是用来声明文档类型和DTD

规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5的文档类型声明：

HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML

元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：

"">

标准模式与怪异模式

怪异模式(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[1]

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前端 面试必问的几个问题有那些

web前端面试必问的几个问题?有那些?根据面试官的不同，面试的内容页不一样的。一般的话就是+css布局占一部分，例如各浏览器的相容性，然后就是js的ajax，闭包，冒泡什么的，js会占很大一部分，也有一部分面试官会抛开这些，直接问公司需要的内容，这样的话就是考验你的实际操作了，这类的面试官我很喜欢，就是直接问布局，资料填充之类的，能学到很多东西，建议面试时偷偷用手机录音，回来之后听一听，研究一下自己不会的问题，因为面试完之后，你可能就会忘了面试时都问过什么了

web前端面试会问哪些问题对公司这个行业有什么样的看法，未来的职业规划，自己做好该职位工作的优势，个人缺点是什么，还有就是一些技术性问题了。web前端面试会问哪些问题

web前端开发的几个问题 1.巢状表单一般不会有什么问题，主要是看业务需求，不过尽量还是不要使用巢状。

2.name只是标签的属性，一般的网页标签元素都可以使用这个属性，并非只能表单域里的标签才能使用。比如 div、span、input等等都可以有name属性。

3.JQuery已经成为JS指令码开发的标配了，本身的体积也比较小，最主要的是简化了很多JS操作，而且我们基本不用考虑JS的浏览器相容问题了。至于效能和原生的JS没什么区别，放心使用吧。

面试Web前端需要注意什么？会面试哪些问题？将这些问题作为参考。

希望你的面试官有点经验，不会用以下这样的问题开场。以防万一，还是准备一些答案。

1.为什么选择程式设计师这个职业生涯?

2.截至目前，你所从事的专案中最喜欢的是哪个?

3.描述一下你梦想中的研发专案。

另外一些面试官会问一些通用的技术问题，来测试你的技术能力。有可能部分人不知道这些问题是什么意思，而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同，你的答案也会有所不同。这些问题简单易答，因此把这些问题记下来。

1.描述一下建立一个新网页的过程

2.怎样减少页面载入时间?

3.标准和标准体(standards and standards bodies)为什么重要?

4.你使用怎样一个过程来组织程式码?

5.你喜欢用什么工具来测试程式码效能?[page]

既然你从事前端工作，理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题，如果不能回答出来，将对你很不利。

1.CSS中的 resetting和 normalizing之间的区别有哪些?

2.什么是floats，它是如何工作的?

3.absolute、relative、fixed和 static定位的区别是什么?

4.解释visiblity hidden和display none之间的区别

5.你是如何修复特定浏览器预设样式的问题?

6.你是否用过网格系统?目的是?

7.如果计算CSS权重?

8.解释如何优化CSS选择器。

9.为什么需要使用预编译器?

10.你是如何测试网站的跨浏览器相容性?

现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚，就把下面这些问题牢记在心。

1.前端开发的框架是什么?

2.响应式web app和原生应用程式的区别是什么?

3.原生app相对web app的优点是什么?

4.客户端和伺服器端开发的区别是什么?

5.什么是SASS和LESS?它们是如何工作的?

面试官会更多关注你是如何表达对这些问题的解释。他们会追问支援你的答案的工作案例。前面的问题你可能可以通过记忆而过关，你可能还会遇到这些问题的扩充套件，但这些答案的深度，将让你与众不同。通过你参与过的实际专案，来展示你的思考过程。

web前端jquery面试题有哪些常见的几个如下：他们的答案可以百度搜。

1. jQuery库中的$()是什么？

2.网页上有 5个<div>元素，如何使用 jQuery来选择它们？

3. jQuery里的 ID选择器和 class选择器有何不同？

4.如何在点选一个按钮时使用 jQuery隐藏一个图片？

5.$(document).ready()是个什么函式？为什么要用它？

6. JavaScript window.onload事件和 jQuery ready函式有何不同？

7.如何找到所有 HTML select标签的选中项？

8. jQuery里的 each()是什么函式？是如何使用它的？

web前端面试必考的基础面试题有哪些？切图，css盒模型，js基础语法，ajax,面向物件，模组化，效能优化，自动化这想相对的考核会多一些。大公司重基础，小公司重能力，所以与时间的话多去刷一刷基础的题目吧。

祝你顺利通过面试！

web前端面试经常问到的面试题有哪些 web前端面试经常问到的面试题实在太多了，建议你去网上搜索一下，或者直接下载一些面试题的集锦，然后看看就好了。

1、列举web效能优化？

1)

减少请求次数。合并档案、利用css sprite把零散的图片整合到一张图上。

2)

减少DNS查询。

3)

减少从定向。

4)

响应时间。使用AJAX进行快取，减少请求。

5)

延迟载入元件.

6)

预载入元件。

7)

减少节点的数量。

8)

切分元件到多个域。

9)

最小化iframe。

10)

杜绝404错误。

2、介绍一下XMLHttpRequest物件的常用方式和属性?

open(“method”,”URL”)建立对伺服器的呼叫，第一个引数是HTTP请求方式

可以为GET，POST或任何伺服器所支援的您想呼叫的方式。

第二个引数是请求页面的URL。

send()方法，传送具体请求

abort()方法，停止当前请求

readyState属性请求的状态有5个可取值 0=未初始化，1=正在载入

2=以载入，3=互动中，4=完成

responseText属性伺服器的响应，表示为一个串

reponseXML属性伺服器的响应，表示为XML

status伺服器的HTTP状态码，200对应ok 400对应not found

web前端问题 IE浏览器类似银行网银安全密码输入控制元件，使用键盘钩子防止被键盘记录器监听密码，使用des对密码加密传输，输入框禁止选择复制

或者

只要是ActiveX，必须要进行IE的安全设定。

网银一般都是一个安装程式，安装的时候都给你设定好了。

ActiveX在页面里面和普通的DOM物件一样，只要ActiveX建立成功，就可以用js直接访问该元件的方和和属性。

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="";

}

加载中

前端开发面试题的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端面试八股文、前端开发面试题的信息别忘了在本站进行查找哦。