毕业实习，来一波JavaScript面试题刷一下！

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

如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习

更多网页前端开发教程，行业资讯，面试技巧，欢迎关注公众号：网页前端开发学习

说几条写JavaScript的基本规范？

• 代码缩进，建议使用“四个空格”缩进

• 代码段使用花括号{}包裹

• 语句结束使用分号;

• 变量和函数在使用前进行声明

• 以大写字母开头命名构造函数，全大写命名常量

• 规范定义JSON对象，补全双引号

• 用{}和声明对象和数组

如何编写高性能的JavaScript？

• 遵循严格模式："use strict";

• 将js脚本放在页面底部，加快渲染页面

• 将js脚本将脚本成组打包，减少请求

• 使用非阻塞方式下载js脚本

• 尽量使用局部变量来保存全局变量

• 尽量减少使用闭包

• 使用 window 对象属性方法时，省略 window

• 尽量减少对象成员嵌套

• 缓存 DOM 节点的访问

• 通过避免使用 eval 和 Function 构造器

• 给 setTimeout 和 setInterval 传递函数而不是字符串作为参数

• 尽量使用直接量创建对象和数组

• 最小化重绘(repaint)和回流(reflow)

描述浏览器的渲染过程，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，Number、String）-- 栈

• 引用数据类型（对象、数组和函数）-- 堆

• 两种类型的区别是：存储位置不同：

• 原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；

• 引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；

• 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。

• 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

谈谈this对象的理解

• this 总是指向函数的直接调用者

• 如果有 new 关键字，this 指向 new 出来的实例对象

• 在事件中，this指向触发这个事件的对象

• IE下 attachEvent 中的this总是指向全局对象Window

eval是做什么的？

eval的功能是把对应的字符串解析成JS代码并运行

• 应该避免使用eval，不安全，非常耗性能（先解析成js语句，再执行）

• 由JSON字符串转换为JSON对象的时候可以用 eval('('+ str +')');

什么是 Window 对象? 什么是 Document 对象?

• Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。

• 我们创建的所有对象、函数、变量都是 Window 对象的成员。

• Window 对象的方法和属性是在全局范围内有效的。

• Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）

• Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问

• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

介绍 DOM 的发展

• DOM：文档对象模型（Document Object Model），定义了访问HTML和XML文档的标准，与编程语言及平台无关

• DOM0：提供了查询和操作Web文档的内容API。未形成标准，实现混乱。如：document.forms['login']

• DOM1：W3C提出标准化的DOM，简化了对文档中任意部分的访问和操作。如：JavaScript中的Document对象

• DOM2：原来DOM基础上扩充了鼠标事件等细分模块，增加了对CSS的支持。如：getComputedStyle(elem, pseudo)

• DOM3：增加了XPath模块和加载与保存（Load and Save）模块。如：XPathEvaluator

介绍DOM0，DOM2，DOM3事件处理方式区别

• DOM0级事件处理方式：

• • btn.onclick = func;

  • btn.onclick = null;

• DOM2级事件处理方式：

• • btn.addEventListener('click', func, false);

  • btn.removeEventListener('click', func, false);

  • btn.attachEvent("onclick", func);

  • btn.detachEvent("onclick", func);

• DOM3级事件处理方式：

• • eventUtil.addListener(input, "textInput", func);

  • eventUtil 是自定义对象，textInput 是DOM3级事件

事件的三个阶段

• 捕获、目标、冒泡

介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数？

• 按照W3C标准的事件：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

• 事件执行次数（DOM2-addEventListener）：元素上绑定事件的个数

• • 注意1：前提是事件被确实触发

  • 注意2：事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖”

• 事件执行顺序：判断的关键是否目标元素

• • 非目标元素：根据W3C的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序）

  • 目标元素：依据事件绑定顺序：先绑定的事件先执行（不依据捕获冒泡标准）

  • 最终顺序：父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡

  • 注意：子元素事件执行前提 事件确实“落”到子元素布局区域上，而不是简单的具有嵌套关系

在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

• 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）

• 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获

• 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

事件的代理/委托

• 事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

• • 优点：

• • 可以减少事件注册，节省大量内存占用

  • 可以将事件应用于动态添加的子元素上

• • 缺点：

使用不当会造成事件在不应该触发时触发

最后，如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习

如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频