共计 4887 个字符，预计需要花费 13 分钟才能阅读完成。
DOM 元素 e 的 e.getAttribute(propName)和 e.propName 有什么区别和联系
e.getAttribute()，是标准 DOM 操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
e.propName 通常是在 HTML 文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如 a 标签生成 HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用 getAttribute 进行访问
e.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回 ””）
e.propName 返回值可能是字符串、布尔值、对象、undefined 等
大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性
一些布尔属性 <input hidden/> 的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property
像 link 中 href 属性，转换成 property 的时候需要通过转换得到完整 URL
一些 attribute 和 property 不是一一对应如：form 控件中 <input value=”hello”/> 对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property
offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别
offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
1. 引起内存泄漏的操作有哪些
1. 全局变量引起 2. 闭包引起 3.dom 清空，事件未清除 4. 子元素存在引用 5. 被遗忘的计时器
递归和迭代的区别是什么，各有什么优缺点？
程序调用自身称为递归，利用变量的原值推出新值称为迭代，递归的优点 大问题转化为小问题，可以减少代码量，同时应为代码精简，可读性好，缺点就是，递归调用浪费了空间，而且递归太深容易造成堆栈的溢出。迭代的好处 就是代码运行效率好，因为时间只因循环次数增加而增加，而且没有额外的空间开销，缺点就是代码不如递归简洁
参考：深究递归和迭代的区别、联系、优缺点及实例对比「递归」和「迭代」有哪些区别？
什么是事件循环（EVENT LOOP）
我们常常说 js 是单线程的，是指 js 执行引擎是单线程的，除了这个单线程，还有一个 任务队列，在执行 js 代码的过程中，执行引擎遇到注册的延时方法，如定时器，DOM 事件，会将这些方法交给相应的浏览器模块处理，当这些延时方法有触发条件去触发的时候，这些延时方法会被添加至任务队列，而这些任务队列中的方法只有 js 的主线程空闲了才会执行，这也就是说我们常常用的定时器定的时间参数只是一个触发条件，具体多少时间后执行其实还需要看 js 主线程空闲与否【转向 Javascript 系列】从 setTimeout 说事件循环模型深入浅出 JavaScript 事件循环机制 (上) 深入浅出 JavaScript 事件循环机制 (下) 并发模型与事件循环
JavaScript 严格模式下有哪些不同？
不允许不使用 var 关键字去创建全局变量，抛出 ReferenceError
不允许对变量使用 delete 操作符，抛 ReferenceError
不可对对象的只读属性赋值，不可对对象的不可配置属性使用 delete 操作符，不可为不可拓展的对象添加属性，均抛 - – TypeError
对象属性名必须唯一
函数中不可有重名参数
在函数内部对修改参数不会反映到 arguments 中
淘汰 arguments.callee 和 arguments.caller
不可在 if 内部声明函数
抛弃 with 语句
setTimeout 和 setInterval 的区别，包含内存方面的分析？
setTimeout 表示间隔一段时间之后执行一次调用，而 setInterval 则是每间隔一段时间循环调用，直至 clearInterval 结束。内存方面，setTimeout 只需要进入一次队列，不会造成内存溢出，setInterval 因为不计算代码执行时间，有可能同时执行多次代码，导致内存溢出。JS 中 settimeout 和 setinterval 函数的区别 setTimeout() 和 setInterval() 本质区别在哪里？
如何实现懒加载？
懒加载就是根据用户的浏览需要记载内容，也就是在用户即将浏览完当前的内容时进行继续加载内容，这种技术常常用来加载图片的时候使用。我们判断用户是否即将浏览到底部之后进行在家内容 这时候可能会需要加载大量的内容，可以使用 fragment 来优化一下，因为大部分是使用滑动和滚轮来触发的，因此很有可能会不断触发，可以使用函数节流做一个优化，防止用户不断触发。
字符串截取
js 字符串截取方法有 substring、slice、substr 三个方法，substring 和 slice 都是指定截取的首尾索引值，不同的是传递负值的时候 substring 会当做 0 来处理，而 slice 传入负值的规则是 - 1 指最后一个字符，substr 方法则是第一个参数是开始截取的字符串，第二个是截取的字符数量，和 slice 类似，传入负值也是从尾部算起的。
介绍一下 ES6 的暂时性死区和块级作用域
js 设计模式
请介绍一下装饰者模式，并实现
在不改变元对象的基础上，对这个对象进行包装和拓展（包括添加属性和方法），从而使这个对象可以有更复杂的功能。
介绍一下职责链模式？
在不改变元对象的基础上，对这个对象进行包装和拓展（包括添加属性和方法），从而使这个对象可以有更复杂的功能。
详解 Javascript 十大常用设计模式
请说一下实现 jsonp 的实现思路？
jsonp 的原理是使用 script 标签来实现跨域，因为 script 标签的的 src 属性是不受同源策略的影响的，因此可以使用其来跨域。一个最简单的 jsonp 就是创建一个 script 标签，设置 src 为相应的 url，在 url 之后添加相应的 callback，格式类似于 url?callback=xxx，服务端根据我们的 callback 来返回相应的数据，类似于 res.send(req.query.callback + ‘(‘+ data + ‘)’)，这样就实现了一个最简单的 jsonpjsonp 的原理与实现 fetch-jsonp 源码
如何实现一个双向数据绑定？
如何实现一个前端模板引擎？
请简要介绍一下 PWA？
请介绍一下你所了解的函数式编程？
将静态资源放在其他域名的目的是什么？
这样做的主要目的是在请求这些静态资源的时候不会发送 cookie，节省了流量，需要注意的是 cookie 是会发送给子域名的（二级域名），所以这些静态资源是不会放在子域名下的，而是单独放在一个单独的主域名下。同时还有一个原因就是浏览器对于一个域名会有请求数的限制，这种方法可以方便做 CDN。为什么淘宝、腾讯等会把静态资源放在另外一个主域名下？为什么很多网站的静态资源会使用独立的域名？
前端如何实现 PV 和 UV 的统计？
简要介绍一下 RSA
介绍一下 KMP 算法？
如何实现对一个 DOM 元素的深拷贝，包括元素的绑定事件？
SPA 的路由是如果实现的，如果你来做一个前端路由，你会怎么做？
百度的构建工具 FIS 你了解吗？
sessionStorage,localStorage,cookie 区别
javascript 有哪几种方法定义函数
函数声明表达式
function 操作符
Function 构造函数
ES6:arrow function
js 运算符
=== 运算符判断相等的流程是怎样的
1. 如果两个值不是相同类型，它们不相等 2. 如果两个值都是 null 或者都是 undefined，它们相等 3. 如果两个值都是布尔类型 true 或者都是 false，它们相等 4. 如果其中有一个是 NaN，它们不相等 5. 如果都是数值型并且数值相等，他们相等，- 0 等于 06. 如果他们都是字符串并且在相同位置包含相同的 16 位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同 == 和 === 都认为他们不相等 7. 如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等
== 运算符判断相等的流程是怎样的
1. 如果两个值类型相同，按照 === 比较方法进行比较 2. 如果类型不同，使用如下规则进行比较 3. 如果其中一个值是 null，另一个是 undefined，它们相等 4. 如果一个值是数字另一个是字符串，将字符串转换为数字进行比较 5. 如果有布尔类型，将 true 转换为 1，false 转换为 0，然后用 == 规则继续比较 6. 如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用 == 规则继续比较 7. 其他所有情况都认为不相等
<,>,<=,>= 的比较规则
所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:1. 如果操作数是对象，转换为原始值：如果 valueOf 方法返回原始值，则使用这个值，否则使用 toString 方法的结果，如果转换失败则报错 2. 经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的 16 位 unicode 值的大小）3. 否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较
+ 运算符工作流程
如果有操作数是对象，转换为原始值
此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接
否则：所有操作数都转换为数字并执行加法
“==” 和 “===” 有什么不同
相同：== 和 === 都是比较等值比较运算符，返回的布尔类型的比较结果。不同：
1) == 是等值比较运算符，使用的是 抽象等值 比较算法。
=== 是严格等值比较运算符，使用的 严格等值 比较算法。
2) == 运算符在比较值的时候，会根据两者类型是否相同而做不同的处理，
在两者不同类型的时候，会转换类型后进行比较：
基本类型会转成数字，引用类型会转成对象原始值，然后再进行比较。
而 === 首先也会判断类型是否一致，不同的是如果类型不一致则直接返回 false。
短路运算
window.foo || (window.foo = “bar”); 返回值是什么？
又称为短路或，短路：如果左侧为真，则不再进行右侧运算，同时返回左侧表达式运算结果。如果左侧为假则执行右侧表达式运算，并返回右侧计算结果。上面 window.foo 是不存在的，所有结果为 undefined，转成 boolean 就是 false，那么就会运算 window.foo = “bar”，把 “bar” 赋值给 window.foo 的同时，返回值也是 “foo”，所以打印返回结果是 “bar”
函数内部 arguments 变量有哪些特性, 有哪些属性, 如何将它转换为数组
arguments 所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象 arguments[index]分别对应函数调用时的实参，并且通过 arguments 修改实参时会同时修改实参 arguments.length 为实参的个数（Function.length 表示形参长度）arguments.callee 为当前正在执行的函数本身，使用这个属性进行递归调用时需注意 this 的变化 arguments.caller 为调用当前函数的函数（已被遗弃）转换为数组：var args = Array.prototype.slice.call(arguments, 0);
其他面试题
前端面试题整理