web前端面试题？web前端面试题

　　本文目录

　　

1. Web前端面试的常见面试题汇总
2. Web前端岗位面试题有哪些
3. 2020年Web前端面试题汇总(一)

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[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前端岗位面试题有哪些

　　HTML+CSS

　　1.对WEB标准以及W3C的理解与认识

　　标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外

　　链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维

　　护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

　　2.xhtml和html有什么区别

　　HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

　　最主要的不同：

　　XHTML元素必须被正确地嵌套。

　　XHTML元素必须被关闭。

　　标签名必须用小写字母。

　　XHTML文档必须拥有根元素。

　　3.Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

　　用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档

　　加入XMl声明可触发，解析方式更改为IE5.5拥有IE5.5的bug

　　4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

　　块级元素：div p h1 h2 h3 h4 form ul

　　行内元素: a b br i span input select

　　Css盒模型:内容，border,margin，padding

　　5.CSS引入的方式有哪些? link和@import的区别是?

　　内联内嵌外链导入

　　区别：同时加载

　　前者无兼容性，后者CSS2.1以下浏览器不支持

　　Link支持使用javascript改变样式，后者不可

　　6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

　　标签选择符类选择符 id选择符

　　继承不如指定 Id>class>标签选择

　　后者优先级高

　　7.前端页面有哪三层构成，分别是什么?作用是什么?

　　结构层 Html表示层 CSS行为层 js

　　8.css的基本语句构成是?

　　选择器{属性1:值1;属性2:值2;……}

　　9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

　　Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)

　　10.写出几种IE6 BUG的解决方法

　　1.双边距BUG float引起的使用display

　　2.3像素问题使用float引起的使用dislpay:inline-3px

　　3.超链接hover点击后失效使用正确的书写顺序 link visited hover active

　　4.Ie z-index问题给父级添加position:relative

　　5.Png透明使用js代码改

　　6.Min-height最小高度！Important解决’

　　7.select在ie6下遮盖使用iframe嵌套

　　8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

　　11.标签上title与alt属性的区别是什么?

　　Alt当图片不显示是用文字代表。

　　Title为该属性提供信息

　　12.描述css reset的作用和用途。

　　Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

　　13.解释css sprites，如何使用。

　　Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

　　14.浏览器标准模式和怪异模式之间的区别是什么?

　　盒子模型渲染模式的不同

　　使用 window.top.document.compatMode可显示为什么模式

　　15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

　　文件合并

　　文件最小化/文件压缩

　　使用CDN托管

　　缓存的使用

　　16.什么是语义化的HTML?

　　直观的认识标签对于搜索引擎的抓取有好处

　　17.清除浮动的几种方式，各自的优缺点

　　1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）

　　2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

　　3.是用afert伪元素清除浮动(用于非IE浏览器)

　　Javascript

　　1.javascript的typeof返回哪些数据类型

　　Object number function boolean underfind

　　2.例举3种强制类型转换和2种隐式类型转换?

　　强制（parseInt,parseFloat,number）

　　隐式（==–===）

　　3.split() join()的区别

　　前者是切割成数组的形式，后者是将数组转换成字符串

　　4.数组方法pop() push() unshift() shift()

　　Push()尾部添加 pop()尾部删除

　　Unshift()头部添加 shift()头部删除

　　5.事件绑定和普通事件有什么区别

　　6.IE和DOM事件流的区别

　　1.执行顺序不一样、

　　2.参数不一样

　　3.事件加不加on

　　4.this指向问题

　　7.IE和标准下有哪些兼容性的写法

　　Var ev= ev

　　 window.event

　　document.documentElement.clientWidth

　　 document.body.clientWidth

　　Var target= ev.srcElement

　　ev.target

　　8.ajax请求的时候get和post方式的区别

　　一个在url后面一个放在虚拟载体里面

　　有大小限制

　　安全问题

　　应用不同一个是论坛等只需要请求的，一个是类似修改密码的

　　9.call和apply的区别

　　Object.call(this,obj1,obj2,obj3)

　　Object.apply(this,arguments)

　　10.ajax请求时，如何解释json数据

　　使用eval parse鉴于安全性考虑使用parse更靠谱

　　11.b继承a的方法

　　12.写一个获取非行间样式的函数

　　function getStyle(obj,attr,value)

　　{

　　if(!value)

　　{

　　if(obj.currentStyle)

　　{

　　return obj.currentStyle(attr)

　　}

　　else

　　{

　　obj.getComputedStyle(attr,false)

　　}

　　}

　　else

　　{

　　obj.style[attr]=value

　　}

　　}

　　13.事件委托是什么

　　让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

　　http://www.webasily.com/?p=78例子可见此链接

　　14.闭包是什么，有什么特性，对页面有什么影响

　　闭包就是能够读取其他函数内部变量的函数。

　　深入理解JavaScript的闭包特性如何给循环中的对象添加事件此链接可查看（问这个问题的不是一个公司）

　　15.如何阻止事件冒泡和默认事件

　　canceBubble return false

　　16.添加删除替换插入到某个接点的方法

　　obj.appendChidl()

　　obj.innersetBefore

　　obj.replaceChild

　　obj.removeChild

　　17.解释jsonp的原理，以及为什么不是真正的ajax

　　动态创建script标签，回调函数

　　Ajax是页面无刷新请求数据操作

　　18.javascript的本地对象，内置对象和宿主对象

　　本地对象为array obj regexp等可以new实例化

　　内置对象为gload Math等不可以实例化的

　　宿主为浏览器自带的document,window等

　　19.document load和document ready的区别

　　Document.onload是在结构和样式加载完才执行js

　　Document.ready原生种没有这个方法，jquery中有$().ready(function)

　　20.”==”和“===”的不同

　　前者会自动转换类型

　　后者不会

　　21.javascript的同源策略

　　一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

　　22.编写一个数组去重的方法

　　function oSort(arr)

　　{

　　var result={};

　　var newArr=[];

　　for(var i=0;i<arr.length;i++)

　　{

　　if(!result[arr])

　　{

　　newArr.push(arr)

　　result[arr]=1

　　}

　　}

　　return newArr

　　}

　　

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

　　}

　　加载中