总结一些 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
说几条写 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中 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 属性
script 的位置是否会影响首屏显示时间?
- 在解析 HTML 生成 DOM 过程中,js 文件的下载是并行的,不需要 DOM 处理到 script 节点。因此,script 的位置不影响首屏显示的开始时间。
- 浏览器解析 HTML 是自上而下的线性过程,script 作为 HTML 的一部分同样遵循这个原则
- 因此,script 会延迟 DomContentLoad,只显示其上部分首屏内容,从而影响首屏显示的完成时间