javascript 面试题

向右看齐 2022-11-29 12:30 106阅读 0赞

## 总结一些 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，只显示其上部分首屏内容，从而影响首屏显示的完成时间