web前端常见理论面试题

一、HTML5 CSS

常用那几种浏览器测试？有哪些内核(Layout Engine)？私有前缀是？

浏览器：IE(Trident)，Chrome（Webkit/Blink），FireFox(Gecko)，Safari(Webkit)，Opera(Presto/Blink)。
内核：Trident，Gecko，Presto，Webkit。
私有前缀：-webkit-，-o-，-moz-，-ms-

在这里插入图片描述

说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
**兼容性：**display:inline-block; display:inline; zoom:1;

HTML 全局属性(global attribute)有哪些？

accesskey:设置快捷键，提供快速访问元素如<a href=“#” accesskey=“a”>aaa</a>在 windows 下的 firefox 中按alt shift a可激活元素
class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性
dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id: 元素 id，文档内唯一
lang: 元素内容的的语言
spellcheck: 是否启动拼写和语法检查
style: 行内 css 样式
tabindex: 设置元素可以获得焦点，通过 tab 可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化

谈谈浮动和清除浮动，清除浮动有哪些方式？比较好的方式是哪一种？

父级div定义height
结尾处加空div或br标签clear:both
父级div定义伪类:after和zoom （实际开发中，比较常用的）
父级div定义overflow:hidden或overflow:auto
父级div也浮动，需要定义宽度
父级div定义display:table（css Table布局）

box-sizing常用的属性有哪些？分别有什么作用？

box-sizing: content-box（传统盒模型）| border-box（新盒模型）| inherit（属性继承）;
content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
link支持使用javascript控制DOM去改变样式，但是@import不支持。

import和require模块化引入的区别？

规范不同，require 是 CommonJS/AMD 规范，import 是 ESMAScript6 规范
两者的加载方式不同，require 是在运行时加载，而 import 是在编译时加载
require 特点：提供了服务器/浏览器的模块加载方案。非语言层面的标准。运行时要确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
import 特点：语言规格层面支持模块功能。支持编译时静态分析，便于 JS 引入宏和类型检验，动态绑定。

你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 绘画 canvas;
- 用于媒介回放的 video 和 audio 元素;
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
- sessionStorage 的数据在浏览器关闭后自动删除;
- 语意化更好的内容元素，比如 article、footer、header、nav、section;
- 表单控件，calendar、date、time、email、url、search;
- 新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
- 可以利用这一特性让这些浏览器支持HTML5新标签，
- 浏览器支持新标签后，还需要添加标签默认的样式。
- 当然也可以直接使用成熟的框架、比如html5shim，

简述一下你对HTML语义化的理解？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML5语义化结构标签有哪些？

<header>			表示页面中一个内容区块或整个页面的标题。

<section>		页面中的一个内容区块，如章节、页眉、页脚或页面的其他地方，可以和h1、h2……元素结合起来使用，表示文档结构。
	
<article>		表示页面中一块与上下文不相关的独立内容，如一篇文章。

<aside>			表示<article>标签内容之外的，与<article>标签内容相关的辅助信息。

<hgroup>			表示对整个页面或页面中的一个内容区块的标题进行组合。

<figure>			表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

<figcaption>	定义<figure>标签的标题。

<nav>				表示页面中导航链接的部分。

<footer>			表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及联系方式。

CSS3有哪些新特性？

CSS3实现圆角（border-radius）边框图片（border-image），阴影（box-shadow），
对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
转换：transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局

before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

position的值， relative和absolute分别是相对于谁进行定位的？

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
absolute 生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

position:absolute 和 float 属性的共同点和不同点

共同点：对内联元素设置 float 和 absolute 属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float 仍会占据位置，absolute 会覆盖文档流中的其他元素。

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
</!doctype>
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

HTML与XHTML的区别

其基础语言不同
- XHTML是基bai于du可扩展标记语言（XML）。
- HTML是基于标准通用标记语言（SGML）。
语法严格程zhi度不同
- XHTML语法比较严格，存在DTD定义规则。
- HTML语法要求比较松散，这样对网页编写者来说，比较方便。
可混合应用不同
- XHTML可以混合各种XML应用，比如MathML、SVG。
- HTML不能混合其它XML应用。
大小写敏感度不同
- 1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
- 2、HTML对大小写不敏感。
公布时间不同
- 1、XHTML是2000年W3C公布发行的。
- 2、HTML4.01是1999年W3C推荐标准。

常见行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：br、meta、hr、link、input、img

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

结构层：html 表示层：css 行为层：js

请你谈谈对于CSS的布局有什么样的理解？

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

CSS优化、提高性能的方法有哪些

移除空的css规则（Remove empty rules）
正确使用display的属性
不滥用浮动、web字体
不声明过多的font-size
不在选择符中使用ID标识符
遵守盒模型规则
尽量减少页面重排、重绘
抽象提取公共样式，减少代码量

写出几种IE6 BUG的解决方法

双边距BUG float引起的使用display
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
z-index问题给父级添加position:relative
Min-height 最小高度！Important 解决
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

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

alt当图片不显示时用文字代表。title为该属性提供信息，鼠标划上会显示的标题。

在input表单控件中，value和placeholder的区别是什么？

placeholder：表示在输入框中显示的提示信息，用户点击之后，提示信息就会消失。
value：叫做默认值，当用户想要在输入框中输入信息的时候，必须先手动的删除value的值。

解释css sprites（精灵图/雪碧图）。

CSS精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。主要能过background-position属性实现。

用纯CSS创建一个三角形的原理是什么

盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部，通过边框，透明度实现。

.square{
     
   width:0;  
   height:0;  
   margin:0 auto;  
   border:6px solid transparent;  
   border-top: 6px solid red;  
}

为什么要初始化CSS样式。

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

响应式和自适应有什么区别?

响应式设计（Responsive design）：一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计（Adaptive Design）：是为同类别的物理设备建立三种不同的网页（PC），检测到设备分辨率大小后调用相应的网页。

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

@media screen and (min-width: 400px) and (max-width: 700px) {
    … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) {
    … }

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

PNG：这是三种中质量最好的一种，保存图像是静态图，可以保留32位色，也能保留透明与半透明区域，如果你是位图像设计者，要保存一幅自己设计的并且只有一个图层的图，建议你选择Png，但是很多网站不支持PNG上传
JPG：这是目前使用最广泛的格式之一，因为其高质量的压缩率导致的图片大小减少，而且也支持32位色彩，因此被广泛使用，一般情况下，任何支持图片的地方都支持jpg，也为静态图，但确点是不支持透明区域
GIF：这也是目前使用最广泛的格式之一，和jpg相比，有以下不同：颜色数只支持256色，支持透明区域，不支持半透明区域，可以保存为动态图

label标签的作用是什么？是怎么用的？

label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

二、javaScript

什么是JavaScript？

基于对象和事件驱动并具有相对安全性的客户端脚本语言。

JavaScript与ECMAScript的关系？

JavaScript是ECMAScript的表现，ECMAScript是JavaScript的规范。

变量的命名规则？

以数字、字母、下划线、&字符组成（不能以字数开）；
不使用关键字、保留字；
建议命名见名知义，小驼峰命名方式。

js中的宏观任务和微观任务？

宏观任务（macro task）：由宿主（node、浏览器）发起的任务，如setTimeout、setInterval、setImmediate、I/O
微观任务（micro task）：由js引擎发起的任务，如process.nextTick、promise、mutationObserver
执行顺序：同步任务——>微观任务——>宏观任务

列举浏览器对象模型中常用的对象，并列举window对象常用的方法至少五个?

对象：window\screen\location\history\navigator
方法：open\close\confirm\moveTo\moveBy…

window.onload的作用？

window.onload是等文档和资源都加载完成后调用的事件或函数，保证js获取元素的时候，已经加载。

jQuery中的$(document).ready() 方法和window.onload 有什么区别？

window.onload会覆盖之前的 ; $(document).ready() 的区别，不会覆盖，会叠加。
window.onload没有简写形式，而 $(d oc u m e n t) . re a d y () 可以简写成$ (function (){})
window.onload等文档和资源都加载完成以后调用； $(document).ready()只要文档加载完成以后就会调用。

js数据中的类型？

基本数据类型：Number（数值）；String（字符串）；Boolean（布尔）；Undefined（未定义）；Null（空）；
复杂数据类型：Object（对象）；Array（数组）；Function（函数）；Date（时间对象）；
ES6新增的数据类型：symbol （具有唯一性）；Set（类例于数组）；Map（对象的键名的任意类型）

js中判断数据类型的方法？

typeof： 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串，包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等。
**instanceof：**是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。这里需要注意的是：instanceof 检测的是原型。
**toString：**是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，Object.prototype.toString.call(‘传判断数据’)

null和undefined的区别？

null：访问一个不存在对象返回的值，表示空对象
undefined：访问一个声明完没有赋值的变量返回的值，表示空变量

运算符的种类？

算术运算符，赋值运算符，比较运算符，逻辑运算符，三目运算符

var a = 10;var b = a ; a、b最后的结果是？

console.log(a,b) //11,10

“==”与“===”的区别？

== 判断值相等，判断的过程中会隐式转换为number类型进行比较 “10”==10 true
=== 值、数据类型全等，严格相等，不会发生类型转换，“10”===10 false

console.log(0.1 0.2 == 0.3)的输出结果及分析。

false，有些小数在运算的过程中会出现偏差，因此最好不要用小数作为判断条件

NaN会在什么样的情况下出现呢？列举出现这种情况的代码。

NaN：not a number
自己定义
运算过程中出现错误，原本应该是数字的地方出现一些不能转换为数字的值 10 “s” Number(“s”)

列举三种强制类型转换和2种隐式类型转换。

Number( )；String( )；Boolean( )；做减、乘、除等运算都可能转换。

document.write()与innerHTML的区别？

document.write：操作body的内容不会覆盖之前已经存在的body中的内容，document.write添加的内容会叠加
innerHTML：操作所有闭合标签的内容会覆盖之前的所有内容

谈谈对this对象的理解？

this存储任何地方，不同环境代表不同的含义，取决于调用时的环境。
A.事件处理函数中的this—触发事件的对象 document.onclick = function(){ alert（this）}
B.普通函数中的this—window function sum（）{ alert(this)} sum()

说说你对作用域链的理解？

作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define

下面代码执行完以后的结果为？

var x = 1,
    y = z = 0;
function add(n) {
   
    n = n   1;
};
y = add(x);
function add(n) {
   
    n = n   3;
};
z = add(x);
console.log(x, y, z);  //结果：1,undfined,undfined

请解释变量提升？

浏览器解析js代码至少会经过两个过程，预解析和逐步执行
预解析：找东西var，function，如果找到var，会在内存中存储变量没有值，function则会存储整个函数
逐步执行：逐行执行代码 console.log(a); //undefined

函数声明和函数表达式声明的区别？

区别：函数声明在函数定义的前面或后面调用均可，而函数表达式，只能在函数定义的后面调用

//函数声明：
function fn(){
   
};
//函数表达式:
var fn = function(){
   
};

JavaScript两种变量范围有什么不同？

Js中两种变量，全局变量和局部变量
全局变量：函数外声明，在任何地方都能被修改和访问，会一直存储在内存中
局部变量：函数内声明，只能在函数内部使用，除了函数{}就会被销毁

定时器的分类？他们的区别及用法是什么？

setInterval：间歇执行；setTimeout：延迟执行
setInterval(函数，时间) 语法：setInterval(function(){},1000); 时间单位ms，每隔特定时间执行多次函数，一般用于倒计时，轮播图等
setTimeout(函数，时间) 语法：setTimeout(function(){},1000); 时间单位ms，隔特定时间执行一次函数，一般用于广告，广告弹出等

js有哪些对象？

原生对象：Object，Function ,Array, String, Boolean, Number,RegExp,Date,Error
内置对象：Global(全局 window,documet), Math
宿主对象：DOM BOM
全局对象：window

数组方法pop() push() unshift() shift()？

pop()：从数组尾部删除；
push()：从数组尾部增加；
unshift()：从数组头部增加；
shift()：从数组头部删除；

forEach( )、map( ) 、filter( ) 、every( ) 、some( ) 数组迭代方法的区别？

forEach()：没有返回值，只是针对每个元素调用func 。循环数组。和for的用法一样的。
map()：返回一个新的Array，每个元素为调用func的结果。新数组的长度和原来的是一样的，他只不过是逐一对原来数据里的每个元素进行操作。
filter()：返回一个符合func条件的元素数组。筛选条件，把数组符合条件的放在新的数组里面返回。新数组和原来的数组长度不一定一样。
every()：返回一个boolean，判断每个元素是否符合func条件。数组里面所有的元素都符合才返回true。
some()：返回一个boolean，判断是否有元素是否符合func条件。数组里面所有的元素有一个符合条件就返回true。

forEach、for in、for of三者区别

forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value

split() 与join() 的区别？

split()：将字符串拆分成数组；
join() ：将数组项拼接成字符串；

不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5…99]

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({
   length: 100});

// 方法四 借助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
   
    var start = ''   Math.ceil(index/2);
    if(index < str.length - 2) {
   
        start  = ','
    }
    return start;
});
return str.split(',');

// 方法五（函数式，参考网络）
function reduce(arr, val) {
   
    if(Object.prototype.toString.apply(val)){
   
        return;
    }
    if(val >= 100) {
   
        return arr;
    }
    arr.push(val);
    return reduce(arr, val 1);
}
var res = reduce([], 0)

DOM怎样添加、移除、移动、复制、创建和查找节点

获取子节点: 父节点.children ; 父节点.childNodes
获取父节点: 子节点.parentNode ; 子节点.offsetParent
创建: document.createElement(‘标签名’) ; document.createTextNode(‘文本内容’)
添加: 父节点.appendChild(子节点) ; 父节点.insertBefore(newChild，refChild)
复制: 被复制的节点.cloneNode(true)
删除：父节点.removeChild（子节点）
替换父节点.replaceChild（newChild，refChild）

什么是window对象? 什么是document对象?

window是js中最大的对象，表示窗口，包含document document文档对象，表示HTML

offsetWidth、clientWidth、scrollTop的区别？

offsetWidth：占位宽，内容有效宽 padding（填白） border（边框）
clientWidth：可视宽，内容有效宽 padding（填白）
scrollTop：页面被卷去的高

如何获取url地址中搜索内容？

window.location.search

循环中break 与 continue的区别

break: 结束循环，本次后面的代码也不再执行
continue：结束本次循环，本次后面的代码也不再执行。下次的循环继续

事件、IE与火狐的事件机制有什么区别？

IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。

如何阻止事件冒泡？

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
return false

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

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

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

标签.事件：如果给同一个元素添加同一个事件，后面的会覆盖前面
事件绑定：可以给同一个元素添加同一个事件，不会被覆盖

如何用原生js给元素绑定两个click事件？

元素.addEventListener(‘click’,fun1);
元素.attachEvent(‘click’,fun1)； IE10及以下兼容；

解释一下事件流？

事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
确定目标阶段：确定事件目标
事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window
事件都是在事件冒泡处理，ie只有冒泡

事件委托（事件代理）是什么?

事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理
原理：利用事件冒泡机制实现的
优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件

ul.onclick = function (ev) {
   
    var ev = ev || event;   //做事件的兼容
    var target = ev.target || ev.srcElement;   //做事件委托的兼容
     if (target.nodeName === 'li') {
   
         target.style.backgroundColor = 'red';
     }
}

给10000个li添加点击事件。

for(var i=0;i<li.length;i  ){
   
    li[i].oncnlick=function(){
   
    }
}

拖拽效果中有几种事件？

按下onmousedown，拖拽onmousemove，弹起onmouseup

什么是回调函数？

某个动作或事件做完以后执行的函数

使用正则表达式验证邮箱。

^\w @[a-z0-9] (.[a-z] ){1,3}$

使用正则去除字符串首尾空格

function (str) {
   
    var re = /(^\s*)|(\s*$)/g;
    return str.replace(re, '');
}

请用js去除字符串空格 var str = “ fdf er re545 6565 2fdfd ”

var str = “ fdf er re545 6565 2fdfd ”
var reg = /\s/g; 
consloe.log(str.replace(reg,''));

判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度5-20。

var str='a531791740941fgs3124'
var reg = /^[a-z]\w{4,19}$/ig;
if (reg.test(str)) {
   
    console.log('是')
} else {
   
    console.log('否')
}

如何判断一个对象是否属于某个类？

instanceof 运算符，运算符要求其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，则返回 false。
Object.prototype.toString.call()：该方法是目前为止发现的判断一个对象类型的最好的办法。

以new方式来调用构造函数实际上会经历以下 4 个步骤

创建一个新对象
将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
执行构造函数中的代码（为这个新对象添加属性）
返回新对象

new操作符具体干了什么呢?

先创建了一个新的空对象。
然后让这个空对象的proto指向函数的原型prototype。
将对象作为函数的this传进去，如果return 出来东西是对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象。

call()、apply()和bind ()的区别和作用？

都是用来改变this的指向，在传值的过程中会有些区别
call（this的指向，参数1，参数2…）会调用函数
apply（this的指向,[参数1，参数2…]）会调用函数
bind （this的指向，参数1，参数2…）只修改this指向，不调用函数。

JavaScript对象的几种创建方式？

字面量创建、实例创建、工厂模式创建、构造函数创建、原型创建、混合模式创建；

//1.字面量创建  缺点：代码冗余，单个对象创建
var obj = {
   
    name:"web",
    eat:function(){
   }
}

//2.实例创建  缺点：代码冗余，适合单个对象创建
var obj = new Object();
obj.name = "web";
obj.eat = function(){
   }

//3.工厂模式创建 缺点：识别不明确
function createObj(name){
   
    var obj = new Object();
    obj.name = name;
    obj.eat = function(){
   }
    return obj
}
createObj(“web”);

//4.构造函数创建  缺点：浪费内存
function Student(name){
   
    //new Object
    this.name = name;
    this.eat = function(){
   }
}
new Student(name)
 
//5.原型创建  缺点：不能传参
//原型对象：prototype ，构造函数中，共享的一块区域
//原型属性：__proto__,实例对象中，指向原型对象
function Student(){
   }
Student.prototype.name = "web";
Student.prototype.eat = function(){
   }
new Student();

//6.混合创建，构造函数(可变的) 原型(共享，不变的)
function Student(name){
   
    this.name = name;
}
Student.prototype.eat = function(){
   

}

JavaScript对象的几种继承方式？

原型链继承、对象冒充继承、组合继承、寄生组合继承

// 父类
function Person(name, age) {
   
    this.name = name;
    this.age = age;
    this.arr = [1, 2, 3];
}
Person.prototype.showName = function () {
   
    console.log(this.name);
}
Person.prototype.showAge = function () {
   
    console.log(this.age);
}

//1、原型链继承
function ChildPerson() {
    }  						// 子类
ChildPerson.prototype = new Person('小王', 3); // 原型继承：将父类的实例赋给子类的原型（用一句话实现继承）

var c1 = new ChildPerson();
console.log(c1);
c1.arr.

push(4);
console.log(c1.arr);

var c2 = new ChildPerson();
console.log(c2.arr);
console.log(c2.constructor); // 问题：this指向了Person，应该指向ChildPerson，

//2、对象冒充继承
function ChildPerson(name, age, sex) {
   		//子类
    Person.call(this, name, age);
    this.sex = sex;
}

var c1 = new ChildPerson('小王', 3, '男');
console.log(c1);
c1.arr.push(4);
console.log(c1.arr);

var c2 = new ChildPerson('小张', 5, '男');
console.log(c2.arr);

//3、组合继承  （对象冒充继承   原型链继承）
function ChildPerson(name, age, sex) {
   		//子类
    Person.call(this, name, age); 			// 对象冒充继承
    this.sex = sex;
}
ChildPerson.prototype = new Person(); // 原型链继承
var c1 = new ChildPerson('小王', 3, '男');
// 存在的问题
// 1)同一个属性，在原型链中会存在多个
// 2)父类的构造函数，调用了两次
console.log(c1);
console.log(c1.name);
c1.showName();

//4、寄生组合继承  通过新创变量生创存在空间，(对象冒充继承   原型链继承)
function ChildPerson(name, age, sex) {
   		// 子类
    Person.call(this, name, age); 		// 对象冒充继承
    this.sex = sex;
}

//寄生组合方法封装
function inherits(parent, child) {
   
    var F = function () {
    };
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
}
inherits(Person, ChildPerson);

// 子类继承添加方法
ChildPerson.prototype.showSex = function () {
   
    console.log(this.sex);
}
var c1 = new ChildPerson('小王', 3, '男');
console.log(c1);
c1.showName()

JavaScript原型，原型链？

原型：js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。
原型链：当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了_proto_的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）

构造函数的特点：

构造函数名首字母大写(为了区分普通函数，不是必须，是约定)
构造函数方法没有显示的创建对象(new Object())
直接将属性和方法赋值给this对象
没有return语句，不需要返回对象
通过构造函数创建对象，必须使用new运算符(直接调用跟普通函数一样)

小贤有一条可爱的狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp),从这段描述可以得到以下对象： function Dog(){ this.wow = function(){ alert(‘wow’); } this.yelp = function(){ this.wow(); } } 小芒和小贤一样原来也有一条可爱的狗，可是突然有一点疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例形式用代码来实现。(继承，原型，setInterval)

function Dog() {
   
    this.wow = function () {
   
        alert('wow');
    }
    this.yelp = function () {
   
        this.wow();
    }

web前端常见理论面试题

一、HTML5 CSS

常用那几种浏览器测试？有哪些内核(Layout Engine)？私有前缀是？

说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

HTML 全局属性(global attribute)有哪些？

谈谈浮动和清除浮动，清除浮动有哪些方式？比较好的方式是哪一种？

box-sizing常用的属性有哪些？分别有什么作用？

页面导入样式时，使用link和@import有什么区别？

import和require模块化引入的区别？

你对浏览器内核的理解？

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

简述一下你对HTML语义化的理解？

HTML5语义化结构标签有哪些？

CSS3有哪些新特性？

before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

CSS3新增伪类有那些?

position的值， relative和absolute分别是相对于谁进行定位的？

display:none和visibility:hidden的区别？

position:absolute 和 float 属性的共同点和不同点

对BFC规范的理解？

DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?

HTML与XHTML的区别

常见行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

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

请你谈谈对于CSS的布局有什么样的理解？

请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景？

CSS优化、提高性能的方法有哪些

写出几种IE6 BUG的解决方法

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

在input表单控件中，value和placeholder的区别是什么？

解释css sprites（精灵图/雪碧图）。

用纯CSS创建一个三角形的原理是什么

为什么要初始化CSS样式。

响应式和自适应有什么区别?

移动端的布局用过媒体查询吗？

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

label标签的作用是什么？是怎么用的？

二、javaScript

什么是JavaScript？

JavaScript与ECMAScript的关系？

变量的命名规则？

js中的宏观任务和微观任务？

列举浏览器对象模型中常用的对象，并列举window对象常用的方法至少五个?

window.onload的作用？

jQuery中的$(document).ready() 方法和window.onload 有什么区别？

js数据中的类型？

js中判断数据类型的方法？

null和undefined的区别？

运算符的种类？

var a = 10;var b = a ; a、b最后的结果是？

“==”与“===”的区别？

console.log(0.1 0.2 == 0.3)的输出结果及分析。

NaN会在什么样的情况下出现呢？列举出现这种情况的代码。

列举三种强制类型转换和2种隐式类型转换。

document.write()与innerHTML的区别？

谈谈对this对象的理解？

说说你对作用域链的理解？

下面代码执行完以后的结果为？

请解释变量提升？

函数声明和函数表达式声明的区别？

JavaScript两种变量范围有什么不同？

定时器的分类？他们的区别及用法是什么？

js有哪些对象？

数组方法pop() push() unshift() shift()？

forEach( )、map( ) 、filter( ) 、every( ) 、some( ) 数组迭代方法的区别？

forEach、for in、for of三者区别

split() 与join() 的区别？

不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5…99]

DOM怎样添加、移除、移动、复制、创建和查找节点

什么是window对象? 什么是document对象?

offsetWidth、clientWidth、scrollTop的区别？

如何获取url地址中搜索内容？

循环中break 与 continue的区别

事件、IE与火狐的事件机制有什么区别？

如何阻止事件冒泡？

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

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

如何用原生js给元素绑定两个click事件？

解释一下事件流？

事件委托（事件代理）是什么?

before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

常见行内元素有哪些？块级元素有哪些？空(void)元素有那些？

JavaScript原型，原型链？