没有合适的资源?快使用搜索试试~ 我知道了~
首页91道js面试题,附必过答案.pdf
91道js面试题,附必过答案.pdf

前端面试题js集合,js常见面试题及基础知识,主要包括js基础知识到js进阶学习的资料,也是正在求职宝宝们必看的js面试题,希望对大家有帮助,若有啥不懂可大方指出来哈
资源详情
资源评论
资源推荐

91 道 js 面试题,附必过答案
时间:2017-12-18 12:21 来源:未知 作者:admin
JavaScript 的组成 JavaScript 由以下三部分组成: ECMAScript(核心):
JavaScript 语言基础 DOM(文档对象模型):规定了访问 HTML 和 XML 的接口 BOM
(浏览器对象模型):提供了浏览器窗口之间进行
JavaScript 的组成
• JavaScript 由以下三部分组成:
o ECMAScript(核心):JavaScript 语言基础
o DOM(文档对象模型):规定了访问 HTML 和 XML 的接口
o 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 树和渲染树的区别?
• 浏览器的渲染过程:
o 解析 HTML 构建 DOM(DOM 树),并行请求 css/image/js
o CSS 文件下载完成,开始构建 CSSOM(CSS 树)
o CSSOM 构建结束后,和 DOM 一起生成 Render Tree(渲染树)
o 布局(Layout):计算出每个节点在屏幕中的位置
o 显示(Painting):通过显卡把页面画到屏幕上
• DOM 树 和 渲染树 的区别:
o DOM树与 HTML 标签一一对应,包括 head 和隐藏元素
o 渲染树不包括 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 作用域:
o 在 Java、C 等语言中,作用域为 for 语句、if 语句或{}内的一块区域,称为作用
域;
o 而在 JavaScript 中,作用域为 function(){}内的区域,称为函数作用域。

• JavaScript 变量声明提升:
o 在 JavaScript 中,函数声明与变量声明经常被 JavaScript 引擎隐式地提升到当
前作用域的顶部。
o 声明语句中的赋值部分并不会被提升,只有名称被提升
o 函数声明的优先级高于变量,如果变量名跟函数名相同且未赋值,则函数声明
会覆盖变量声明
o 如果函数有多个同名参数,那么最后一个参数(即使没有定义)会覆盖前面的
同名参数
介绍 JavaScript 的原型,原型链?有什么特点?
• 原型:
o JavaScript 的所有对象中都包含了一个 [proto] 内部属性,这个属性所对应的
就是该对象的原型
o JavaScript 的函数对象,除了原型 [proto] 之外,还预置了 prototype 属性
o 当函数对象作为构造函数创建实例时,该 prototype 属性值将被作为实例对象
的原型 [proto]。
• 原型链:
o 当一个对象调用的属性/方法自身不存在时,就会去自己 [proto] 关联的前辈
prototype 对象上去找
o 如果没找到,就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。
依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
• 原型特点:
o JavaScript 对象是通过引用来传递的,当修改原型时,与之相关的对象也会继
承这一改变
JavaScript 有几种类型的值?,你能画一下他们的内存图吗
• 原始数据类型(Undefined,Null,Boolean,Number、String)-- 栈
• 引用数据类型(对象、数组和函数)-- 堆
• 两种类型的区别是:存储位置不同:

• 原始数据类型是直接存储在栈(stack)中的简单数据段,占据空间小、大小固
定,属于被频繁使用数据;
• 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储
在栈中,将会影响程序运行的性能;
• 引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。
• 当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得
实体。
JavaScript 如何实现一个类,怎么实例化这个类?
• 构造函数法(this + prototype) -- 用 new 关键字 生成实例对象
o 缺点:用到了 this 和 prototype,编写复杂,可读性差
function Mobile(name, price){
this.name = name;
this.price = price;
}
Mobile.prototype.sell = function(){
alert(this.name + ",售价 $" + this.price);
}
var iPhone7 = new Mobile("iPhone7", 1000);
iPhone7.sell();
• Object.create 法 -- 用 Object.create() 生成实例对象
• 缺点:不能实现私有属性和私有方法,实例对象之间也不能共享数据
var Person = {
firstname: "Mark",
lastname: "Yun",
age: 25,
introduce: function(){
alert('I am ' + Person.firstname + ' ' + Person.lastname);
}
};
var person = Object.create(Person);
person.introduce();
剩余35页未读,继续阅读













安全验证
文档复制为VIP权益,开通VIP直接复制

评论1