web前端最全面试题及答案含vuereact.docx

1、web前端最全面试题及答案含vuereact2020年web前端最全面试题目及答案HTML篇1,doctype的作用是什么DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析文档解析类型有： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式） CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。IE8还有一种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

2、2, 这三种模式的区别是什么 标准模式(standards mode)：页面按照 HTML 与 CSS 的定义渲染 怪异模式(quirks mode)模式： 会模拟更旧的浏览器的行为 近乎标准(almost standards)模式： 会实施了一种表单元格尺寸的怪异行为（与IE7之前的单元格布局方式一致），除此之外符合标准定义3, HTML、XHTML、XML有什么区别 HTML(超文本标记语言): 在之前HTML先有实现再有标准，导致HTML非常混乱和松散 XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越

3、小了 XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。4, 什么是data-属性HTML的数据属性，用于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的目的。5, 你对HTML语义化的理解语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义，比如标签就代表段落，代表正文内容等等。语义化的好处主要有两点： 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结构，也更为便于团队的开发

4、和维护 机器友好：带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，语义类还可以支持读屏软件，根据文章可以自动生成目录这对于简书、知乎这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，但是对于功能性的web软件重要性大打折扣，比如一个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。6, HTML5与HTML4的不同之处文件类型声明（）仅有一型：。新的解析顺序：不再基于SGML。 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, de

5、tails, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 input元素的新类型：date, email, url等等。 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。 全域属性：id, tabindex, repeat。 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spel

6、lcheck。 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt7有哪些常用的meta标签meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name。 charset，用于描述HTML文档的编码形式 http-equiv，顾名思义，相当于http的文件头作用,比如下面的代码就

7、可以设置http的缓存过期日期 viewport，移动前端最熟悉不过，Web开发人员可以控制视口的大小和比例 apple-mobile-web-app-status-bar-style,开发过PWA应用的开发者应该很熟悉，为了自定义苹果工具栏的颜色。8, src和href的区别 src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。 href是指向网络资源所在

8、位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。9知道img的srcset的作用是什么可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。所以，有了这些属性，浏览器会： 查看设备宽度 检查 sizes 列表中哪个媒体条件是第一个为真 查看给予该媒体查询的槽大小 加

9、载 srcset 列表中引用的最接近所选的槽大小的图像10, 还有哪一个标签能起到跟srcset相似作用元素通过包含零或多个?元素和一个?元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子?元素，如果没有匹配的，就选择?元素的 src 属性中的URL。然后，所选图像呈现在元素占据的空间中11, script标签中defer和async的区别 defer：浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。 async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script有先后依

10、赖关系的情况，并不适用。12, 有几种前端储存的方式cookies、localstorage、sessionstorage、Web SQL、IndexedDB13, 这些方式的区别是什么 cookies： 在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装 localStorage：HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+ sessionStorage：与l

11、ocalStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式 Web SQL：2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。 IndexedDB： 是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaSc

12、ript进行操作会非常方便。CSS篇1, CSS选择器的优先级是怎样的CSS选择器的优先级是：内联 ID选择器 类选择器 标签选择器到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： A 的值等于 1 的前提是存在内联样式, 否则 A = 0; B 的值等于 ID选择器 出现的次数; C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数; D 的值等于 标签选择器 和 伪元素 出现的总次数 。2,link和import的区别link属于XHTML标签，而import是CSS提供的。页面被加载时，link会同时被加载，而import引用的CSS会等

13、到页面被加载完再加载。import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。link方式的样式权重高于import的权重。使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的2,empxrem区别 px：绝对单位，页面按精确像素展示。 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性

14、，chrome/firefox/IE9+支持3,块级元素水平居中的方法 margin:0 auto方法 flex布局，目前主流方法 table方法4, CSS有几种定位方式 static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。 relative：相对定位，此时的相对是相对于正常文档流的位置。 absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。 fixed：指

15、定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。 sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的顶屁股。5, 如何理解z-indexCSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。6, 如何理解层叠上下文是什么层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电

16、脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。如何产生触发一下条件则会产生层叠上下文：根元素 (HTML),z-index 值不为 auto的 绝对/相对定位，一个 z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex， opacity 属性值小于 1 的元素（参考 the specification for opacity）， transform 属性值不为 none的元素， mix-blend-mode 属性值不为 normal的元素， filte

17、r值不为“none”的元素， perspective值不为“none”的元素， isolation 属性被设置为 isolate的元素， position: fixed7, 清除浮动有哪些方法 空div方法： Clearfix 方法：上文使用.clearfix类已经提到 overflow: auto或overflow: hidden方法，使用BFC8,你对css sprites的理解，好处是什么是什么 雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。如何操作使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片

18、都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。好处：减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）提前加载资源不足：CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定9, 你对媒体查询的理解是什么媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，

19、添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。如何使用媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。10, 你对盒模型的理解是什么当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basi

20、c box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成11, 标准盒模型和怪异盒模型有什么区别在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。因此，标准盒模型下：元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border

21、-right + margin-right而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。在怪异盒模型下：元素占据的宽度 = margin-left + width + margin-right虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing12, 谈谈对BFC的理解是什么书面解释：BFC(Block Formatting Co

22、ntext)这几个英文拆解Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用BFC是指一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.它的作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.如何形成BFC触发条件:根元素，即HTML元素 position: fixed/absolute

23、 float 不为none overflow不为visible display的值为inline-block、table-cell、table-caption作用是什么 防止margin发生重叠 两栏布局，防止文字环绕等 防止元素塌陷13, 为什么有时候人们用translate来改变位置而不是定位translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，

24、但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。14, 伪类和伪元素的区别是什么是什么伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。区

25、别其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。我们通过p:before对这段文本添加了额外的元素，通过?p:first-child改变了文本的样式。15, 你对flex的理解web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局JS篇1, 解释下变量提升JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变

26、量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。2, 理解闭包吗闭包是什么MDN的解释：闭包是函数和声明该函数的词法环境的组合。按照我的理解就是：闭包 =函数和函数体内可访问的变量总和闭包的作用闭包最大的作用就是隐藏变量，闭包的一大特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等我们就以私有变量举例，私有变量的实现方法很多，有靠约定的（变量名前加_）,有靠Proxy代理的，也有靠Symbol

27、这种新数据类型的。但是真正广泛流行的其实是使用闭包。3, JavaScript的作用域链理解吗JavaScript属于静态作用域，即声明的作用域是根据程序正文在编译时就确定的，有时也称为词法作用域。其本质是JavaScript在执行过程中会创造可执行上下文，可执行上下文中的词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，这些引用串联起来一直指向全局的词法环境，因此形成了作用域链。4, ES6模块与CommonJS模块有什么区别ES6 Module和CommonJS模块的区别：CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 M

28、odule只存只读，不能改变其值，具体点就是指针指向不能变，类似constimport的接口是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。ES6 Module和CommonJS模块的共同点：CommonJS和ES6 Module都可以对引入的对象进行赋值，即对对象内部属性的值进行改变。5,js有哪些类型JavaScript的类型分为两大类，一类是原始类型，一类是复杂(引用）类型。原始类型: boolean null undefined nu

29、mber string symbol复杂类型: Object6, null与undefined的区别是什么null表示为空，代表此处不应该有值的存在，一个对象可以是null，代表是个空对象，而null本身也是对象。undefined表示不存在，JavaScript是一门动态类型语言，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefined的意义所在。7, 谈谈你对原型链的理解这个问题关键在于两个点，一个是原型对象是什么，另一个是原型链是如何形成的原型对象绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创建新

30、对象实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。原型链原因是每个对象都有?_proto_?属性，此属性指向该对象的构造函数的原型。对象可以通过?_proto_与上游的构造函数的原型对象连接起来，而上游的原型对象也有一个_proto_，这样就形成了原型链。8, 谈一谈你对this的了解this的指向不是在编写时确定的,而是在执行时确定的，同时，this不同的指向在于遵循了一定的规则。首先，在默认情况下，this是指向全局对象的，比如在浏览器就是指向window。其次，如果函数被调用的位置存在上下文对象时，那么函数是被隐式绑定的。再次，显示改变this指向，常见

31、的方法就是call、apply、bind最后，也是优先级最高的绑定 new 绑定。用 new 调用一个构造函数，会创建一个新对象, 在创造这个新对象的过程中,新对象会自动绑定到Person对象的this上，那么 this 自然就指向这个新对象。9, 那么箭头函数的this指向哪里箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于自己的this,它的所谓的this是捕获其所在上下文的 this 值，作为自己的 this 值,并且由于没有属于自己的this,而箭头函数是不会被new调用的，这个所谓的this也不会被改变.10, async/await是什么async 函数，就是 Generator 函数的语法糖，它建立在Promises上，并且与所有现有的基于Promise的API兼容。Async声明一个异步函