9.2 js面经

get 请求传参长度的误区

误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制的。 实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制 是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这个 概念，我们必须再次强调下面几点: HTTP 协议 未规定 GET 和 POST 的长度限制 GET 的最大长度显示是因为 浏览器和 web 服务器限制了 URL 的长度 不同的浏览器和 WEB 服务器，限制的最大长度不一样 要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte

说一下闭包

返回一个函数，而且这个函数对局部变量存在引用。（一般是做题）

类的继承

function Animal (name) { 
  this.name = name || 'Animal'; // 属性 
  this.sleep = function(){ // 实例方法 
  console.log(this.name + '正在睡觉！'); 
}}
// 原型方法
Animal.prototype.eat = function(food) {    
    console.log(this.name + '正在吃：' + food); 
};

1. 原型链继承（所有实例有同一个原型对象，不能修改原型对象，回影响所有的实例）

function Cat(){ } 
Cat.prototype = new Animal();// 父亲和儿子共享一套数据

2. 构造继承
   优点：不存在修改原型对象影响所有的实例，各自拥有独立的属性
   缺点: 父类的成员会被创建创建多次，存在冗余且不是同一个原型对象
   通过apply/call只能拷贝成员，原型对象不会拷贝

function Cat(name){
   Animal.call(this);  //相当于将父亲的全部拷贝一份给自己
   this.name = name || 'Tom'; 
}

3. 组合继承

function Cat(name){
   Animal.call(this);  //相当于将父亲的全部拷贝一份给自己
   this.name = name || 'Tom'; 
}
Cat.prototype = new Animal();

既有同一个原型对象，而且修改原型对象，不影响实例的值

https://blog.csdn.net/qq_43604714/article/details/117307975

解决回调地狱问题

promise async await

事件流

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个 阶段。
事件捕获阶段
处于目标阶段
事件冒泡阶段

事件委托

图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

mouseover 和 mouseenter 的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是 mouseleave

https://blog.csdn.net/qq_43604714/article/details/117093601

JS 的 new 操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。

改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

https://blog.csdn.net/qq_43604714/article/details/117339747

JS 的各种位置，比如 clientHeight,scrollHeight,offsetHeight ,以及 scrollTop, offsetTop,clientTop 的区别？

clientHeight：表示的是可视区域的高度，不包含 border 和滚动条
offsetHeight：表示可视区域的高度，包含了 border 和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0
scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度

JS拖拽功能的实现

首先是三个事件，分别是 mousedown，mousemove，mouseup
当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的 具体方法。
clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，
移动的举例应该是： 鼠标移动时候的坐标-鼠标按下去时候的坐标。 也就是说定位信息为： 鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top等值。
补充：也可以通过 html5 的拖放（Drag 和 drop）来实现

Ajax 解决浏览器缓存问题

在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
在 URL 后面加上一个随机数： “fresh=” + Math.random()。
在 URL 后面加上时间搓：“nowtime=” + new Date().getTime()。
如果是使用 jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录。
以上任意一种方法都行

JS 的节流和防抖

防抖：一段时间内，只允许一件事情发生
节流：一段时间，只处理一件事
https://blog.csdn.net/qq_43604714/article/details/117828520

JS 中的垃圾回收机制

垃圾回收的方法：标记清除、计数引用（相互引用时存在内存泄露，所以不常用）

eval 是做什么的

它的功能是将对应的字符串解析成 JS 并执行，应该避免使用 JS，因为非常消耗性能（2 次，一次解析成 JS，一次执行）

说一下 CommonJS、AMD 和 CMD

模块化开发方便代码的管理，提高代码复用性，降低代码耦合，每个模块都会有自己的作用域，当前流行的模块化规范有CommonJS，AMD，CMD，ES6的import
CommonJS的主要实践者就是nodejs,一般对模块输出用module.exports去输出，用require去引入模块，
CommonJS一般采用同步加载
AMD主要采用异步加载模式，AMD的主要实践有require.js
CMD是主要实践是Sea.js，与AMD相似，AMD依赖前置加载，提前加载执行，CMD就近加载，延迟加载

setTimeout、setInterval 和 requestAnimationFrame 之间的区别

与 setTimeout 和 setInterval 不同，requestAnimationFrame 不需要设置时间间隔， 大多数电脑显示器的刷新频率是 60Hz，大概相当于每秒钟重绘 60 次。

requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

自己实现一个 bind 函数

Function.prototype.bind=function(obj,arg){ 
	var arg=Array.prototype.slice.call(arguments,1); 
	var context=this; 
	var bound=function(newArg){  
		arg=arg.concat(Array.prototype.slice.call(newArg)); 
		return context.apply(obj,arg); 
	}
	var F=function(){} //这里需要一个寄生组合继承 
	F.prototype=context.prototype; 
	bound.prototype= new F(); 
	return bound; 
}

JS 怎么控制一次加载一张图片，加载完后再加载下一张

<script type="text/javascript"> 
	var obj=new Image(); 
	obj.src="http://www.phpernote.com/uploadfiles/editor/20101179.jpg"; 
	obj.onload=function(){ 
	alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height); 
	document.getElementById("mypic").
	innnerHTML="<img src='"+this.src+"' />"; 
}
</script> <div id="mypic">onloading……</div>

Function.proto(getPrototypeOf)是什么？

获取一个对象的原型，在 chrome 中可以通过_proto_的形式，或者在 ES6 中可以通过 Object.getPrototypeOf 的形式。

数组去重

1. 使用indexOf

function set(arr) {
    arr.forEach((item, index) => {
        var start = arr.indexOf(item);
        var end = arr.lastIndexOf(item);
        while (start !== end) {
            arr.splice(end, 1);
            start = arr.indexOf(item);
            end = arr.lastIndexOf(item);
        }
    })
    return arr;
}

2. set

console.log([...new Set(arr)]);

3. Object.keys(obj)

function set1(arr) {
    var obj = {};
    arr.forEach((item, index) => {
        obj[item] = true;
    })
    return Object.keys(obj).map(item => +item);
}

性能优化

减少 HTTP 请求
使用内容发布网络（CDN）
添加本地缓存
压缩资源文件
将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
避免使用 CSS 表达式
减少DNS 查询
使用外部 javascript 和 CSS避免重定向
图片 lazyLoad

JS 实现跨域

jsonp
cros
proxy（代理）
https://blog.csdn.net/qq_43604714/article/details/117718734

基本数据类型

基本数据类型：undefined、null、number、boolean、string、symbol

重排和重绘，讲讲看

重绘（repaint 或 redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等 都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面 上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 触发重绘的条件：改变元素外观属性。如：color，background-color 等。 注意：table 及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用 table 布局页面的原因之一。
重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局， 隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是 在页面第一次加载的时候。
重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。所以，重排必定会引发重绘，但重绘不一定会引发重排。

this指向

https://blog.csdn.net/qq_43604714/article/details/117339747

暂停死区

在代码块内，使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上， 称为“暂时性死区”

说一下什么是 virtual dom

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树， 插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树 进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

webpack 用来干什么的

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

vue生命周期

beforeCreate
created //数据挂载完毕，时间绑定好了，但是还未渲染dom
beforeMount
mounted //dom渲染完毕
beforeUpdate
updated //数据更新
beforeDestory
destoryed //组件销毁

简单介绍一下 symbol

Symbol 是 ES6 的新增属性，代表用给定名称作为唯一标识，这种类型的值可以这样创 建，let id=symbol(“id”)
Symbl 确保唯一，即使采用相同的名称，也会产生不同的值，我们创建一个字段，仅为知道对应 symbol 的人能访问，使用 symbol 很有用，symbol 并不是 100%隐藏，有内置方法 **Object.getOwnPropertySymbols(obj)**可以获得所有的 symbol。 也有一个方法 Reflect.ownKeys(obj)返回对象所有的键，包括 symbol。 所以并不是真正隐藏。但大多数库内置方法和语法结构遵循通用约定他们是隐藏的。

什么是事件监听

addEventListener('click',function() {})

let const var 的区别 ，什么是块级作用域，如何用 ES5 的方法实现块级作 用域（立即执行函数），ES6 呢

提起这三个最明显的区别是 var 声明的变量是全局或者整个函数块的，而 let,const 声明 的变量是块级的变量，var 声明的变量存在变量提升，let,const 不存在，let 声明的变量允 许重新赋值，const 不允许。

ES6 箭头函数的特性

箭头函数与普通函数的区别在于：
1、箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值，这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this， 2、箭头函数没有自己的 arguments 对象，但是可以访问外围函数的 arguments 对象
3、不能通过 new 关键字调用，同样也没有 new.target 值和原型

有了解过事件模型吗，DOM0 级和 DOM2 级有什么区别，DOM 的分级是 什么

JSDOM 事件流存在如下三个阶段：
事件捕获阶段
处于目标阶段
事件冒泡阶段
JSDOM 标准事件流的触发的先后顺序为：先捕获再冒泡，点击 DOM 节点时，事件传播 顺序：事件捕获阶段，从上往下传播，然后到达事件目标节点，最后是冒泡阶段，从下往上传播

怎么获得对象上的属性

for（let I in obj）该方法依次访问一个对象及其原型链中所有可枚举的类型 object.keys:返回一个数组，包括所有可枚举的属性名称 object.getOwnPropertyNames:返回一个数组包含不可枚举的属性

了解事件代理吗，这样做有什么好处

事件代理就是说我们将事件添加到本来要添加的事件的父节点，将事件委托 给父节点来触发处理函数,这通常会使用在大量的同级元素需要添加同一类事件的时候, 这样做的好处是减少事件绑定，同事动态的 DOM 结构任然可以监听，事件代理发生在冒泡阶段

new 操作符原理

1. 创建一个类的实例：创建一个空对象 obj，然后把这个空对象的__proto__设置为构造函数的 prototype。
2. 初始化实例：构造函数被传入参数并调用，关键字 this 被设定指向该实例 obj。
3. 返回实例 obj

dom 是什么，你的理解？

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM。

关于 dom 的 api 有什么

节点创建型 api，页面修改型 API，节点查询型 API，节点关系型 api，元素属性型 api， 元素样式型 api 等

ajax 返回的状态

0 － （未初始化）还没有调用 send()方法
1 － （载入）已调用 send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了