（前端面试题+前端学习+面试指南） 一份涵盖大部分前端工程师所需要掌握的核心知识.zip

### JavaScript 的组成 JavaScript 由以下三部分组成： - ECMAScript（核心）：JavaScript 语言基础 - DOM（文档对象模型）：规定了访问 HTML 和 XML 的接口 - BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法 ### JS 的基本数据类型和引用数据类型 - 基本数据类型：undefined、null、boolean、number、string、symbol - 引用数据类型：object、array、function ### 检测浏览器版本版本有哪些方式？ - 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome') - 根据 window 对象的成员 // 'ActiveXObject' in window ### 介绍 JS 有哪些内置对象？ - 数据封装类对象：Object、Array、Boolean、Number、String - 其他对象：Function、Arguments、Math、Date、RegExp、Error - ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect ### 说几条写 JavaScript 的基本规范？ - 代码缩进，建议使用“四个空格”缩进 - 代码段使用花括号{}包裹 - 语句结束使用分号; - 变量和函数在使用前进行声明 - 以大写字母开头命名构造函数，全大写命名常量 - 规范定义 JSON 对象，补全双引号 - 用{}和[]声明对象和数组 ### 如何编写高性能的 JavaScript？ - 遵循严格模式："use strict"; - 将 js 脚本放在页面底部，加快渲染页面 - 将 js 脚本将脚本成组打包，减少请求 - 使用非阻塞方式下载 js 脚本 - 尽量使用局部变量来保存全局变量 - 尽量减少使用闭包 - 使用 window 对象属性方法时，省略 window - 尽量减少对象成员嵌套 - 缓存 DOM 节点的访问 - 通过避免使用 eval() 和 Function() 构造器 - 给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数 - 尽量使用直接量创建对象和数组 - 最小化重绘(repaint)和回流(reflow) ### 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 - 像`<a href="../index.html">link</a>`中 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 + 溢出内容的尺寸 ### 描述浏览器的渲染过程，DOM 树和渲染树的区别？ 浏览器的渲染过程： - 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js - CSS 文件下载完成，开始构建 CSSOM(CSS 树) - CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树) - 布局(Layout)：计算出每个节点在屏幕中的位置 - 显示(Painting)：通过显卡把页面画到屏幕上 DOM 树 和 渲染树 的区别： - DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素 - 渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性 ### 重绘和回流（重排）的区别和关系？ - 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘 - 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流 - 注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值 - 回流必将引起重绘，而重绘不一定会引起回流 ### 如何最小化重绘(repaint)和回流(reflow)？ - 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示 - 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document - 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流 - 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流） - 避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面） - 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx ### script 的位置是否会影响首屏显示时间？ - 在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script 的位置不影响首屏显示的开始时间。 - 浏览器解析 HTML 是自上而下的线性过程，script 作为 HTML 的一部分同样遵循这个原则 - 因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间 ### 解释 JavaScript 中的作用域与变量声明提升？ JavaScript 作用域： - 在 Java、C 等语言中，作用域为 for 语句、if 语句或{}内的一块区域，称为作用域； - 而在 JavaScript 中，作用域为 function(){}内的区域，称为函数作用域。 JavaScript 变量声明提升： - 在 JavaScript 中，函数声明与变量声明经常被 JavaScript 引擎隐式地提升到当前作用域的顶部。 - 声明语句中的赋值部分并不会被提升，只有名称被提升 - 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明 - 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数 ### 介绍 JavaScript 的原型，原型链？有什么特点？ 原型： - JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是该对象的原型 - JavaScript 的函数对象，除了原型 [proto] 之外，还预置了 prototype 属性 - 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]。 原型链： - 当一个对象调用的属性/方法自身不存在时，就会去自己 [proto] 关联的前辈 prototype 对象上去找 - 如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链” 原型特点： - JavaScript 对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变 ### JavaScript 有几种类型的值？，你能画一下他们的内存图吗 - 原始数据类型（Undefined，Null，Boolean，Numb