JS面试宝典-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44307391/article/details/109356506

JS面试总结：

1.AJAX原理

ajax的原理简单来说就是在用户和服务器之间加了一个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面，使用户操作与服务器响应异步化。

ajax的四步骤：
	1.创建连接: 
		var xhr = null;
		xhr = new XMLHttpRequest();
	2.连接服务器
		xhr.open('get',url);//get请求
		xhr.open('post',url);//post请求
	3.发送请求
		xhr.send(null)//get请求 get请求直接在open方法中将数据参数传递
		xhr.send(data)//post请求  将参数赋值给data变量
	4.接受请求
    	xhr.onreadystatechange = function(){
    		if(xhr.readyState == 4){
    			if(xhr.status == 200){
    				success(xhr.responseText);
    			}else{
    				fail && fail(xhr.status);
    			}
    		}
    	}

ajax有哪些优缺点？
- 优点：
  - 通过异步模式，提升了用户体验
  - 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了宽带占用
  - ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载
  - ajax可以实现局部刷新
- 缺点：
  - 安全问题，ajax暴露了服务器交互的细节
  - 对搜索引擎的支持比较弱
  - 不容易调试

2.new 操作符具体干了什么事情？

创建了一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到this引用的对象中

将实例对象下的__proto__指针指向构造函数中的原型对象，使得实例对象能够访问原型对象下的属性或者方法

new的执行过程：
var this = {};
this.__proto__ = Fun.prototype//将实例对象的__proto__属性指向构造函数的原型
Fun().call(this)//将实参代入构造函数中，并将构造函数中的this指向改为创建的this对象
return this;//返回这个实例创建的this对象，并赋值给变量

3.常见的web安全及防护原理

4.offsetWidth clientWidth scrollWidth的区别

offsetWidth/offsetHeight 获取自身的宽高，包含边框
clientWidth/clientHeight 获取自身的宽高，不包含边框
scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸

5.JavaScript 有哪些方法来定义对象

var obj = {}
var obj = new Object();
var obj = Object.create(Object.prototype)

6.常见的兼容问题

png24位的图片在IE6浏览器上出现背景，解决方案是做成png8
浏览器默认的margin和padding不同，解决方案是加一个全局的*(margin：0,;padding:0)

来同一，但是全局效率低下，一般是如下解决：
```
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
    margin:0;
    padding:0;
}
```
IE下event有xy属性，但是没有pageX和pageY
FireFox下，event对象有pageX，pageY属性，但是没有X Y属性

7.你觉得jQuery源码有哪些写的好的地方？

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jQuery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象，同样，传入undefine参数，也可以缩短查找undefined时的作用域链
jquery将一些原型属性或者方法封装在了jQuery.prototype中，为了缩短名称，又赋值给了jQuery.fn，这是很形象的写法
jQuery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率

8.那些操作会造成内存泄露

setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄露
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个死循环）

9.web开发中会话跟踪的方法有哪些？

cookie
session
url重写
隐藏input
ip地址

10.js的基本数据类型和引用数据类型

基本数据类型：undefined， string ，boolean，null，number，symbol
引用数据类型：object，array，function

11.js有哪些内置对象

Object是JavaScript中所有对象的父对象
数据封装类对象：Object Array Boolean Number String
其他对象：Function Arguments Math Date RegExp Error

12.const,let ,var 的区别

#####    let  const

不存在变量提升
在同一个作用域中不能重复定义同一个名称
有严格的作用域

const

声明一个只读的常量，一旦声明，常量的值不能改变

13.箭头函数为什么不能作为构造函数？匿名函数能作为构造函数吗？箭头函数能被new吗？箭头函数有原型函数吗？

箭头函数没有单独的this
不绑定arguments,caller
箭头函数不能用作构造器，和new一起用会抛出错误
箭头函数没有prototype属性

箭头函数与构造函数相比，少了很多东西，caller，arguments，prototype，但是箭头函数有__proto__属性，所以箭头函数本身是存在原型的，但是没有prototype属性，没法让他的实例__proto__属性指向，所以箭头函数无法作为构造函数
箭头函数没有自己的this指针，通过call()或者apply()方法调用一个函数，只能传递参数，不能绑定this

匿名函数因为被赋值给了一个变量，所以在这里可以看做是普通函数，可以被作为构造函数
构造函数和普通函数的区别不是通过大小写判别的，而是通过调用方式来区分的，即new关键字

箭头函数如果被作为构造函数，能够使用new关键字，那么整个过程，无论是this对象，prototype属性还是call()函数进行this绑定都无法处理，所以箭头函数使用new运算符会抛出Error

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eAm2kPn0-1603945307205)(file:///C:\Users\lenovo\Documents\Tencent Files\670632485\Image\Group2(9\I](9I]@H@AD36)]ZMOCLK7DHRN.png)

所有的引用类型都有__proto__ 属性
只有函数对象有prototype属性
所有引用类型的__proto__属性值均指向它的构造函数的prototype属性值
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，就会去他的构造函数的prototype中寻找

14.JSON的了解

JSON字符串转换为JSON对象

var obj = eval('(' + str + ')' )
var obj = str.parseJSON()
var obj = JSON.parse(str)

JSON对象转换为字符串

var last = obj.toJSONString();
var last = JSON.stringify(obj)

eval的作用
- 把对应的字符串解析成js代码并运行
避免使用eval，不安全，耗性能，一次解析成js语句，一次执行
- 由json字符串转换为json对象的时候可以用eval

15.浏览器缓存

浏览器缓存分为协商缓存和强缓存

获取缓存的流程如下：
- 先根据这个资源的一些http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发送请求到服务器中
- 当强缓存没有命中时，客户端会发送请求到服务器中，服务器通过另一些request header 验证这个资源是否命中协商缓存，成为http在验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源
- 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源，区别是：强缓存不发送请求到服务器，但是协商缓存会
- 当协商缓存也没有命中时候，服务器就会将资源发送回客户端
- 当Ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
- F5刷新页面时候，跳过强缓存，但是会检查协商缓存
强缓存
- Expires：该字段是http1.0时的规范，值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间
- Cache-Control:max-age：该字段是http1.1的规范，强缓存利用其max-age值来判断缓存资源的最大生命周期，值单位为秒
协商缓存
- last-Modified：值为资源最后更新时间，随服务器response返回
- If-Modified-since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存
- ETag：表示资源内部的唯一标识，随服务器response返回
- If-None-Match：服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有修改，如果没有修改，则命中协商缓存

16.实现双向数据绑定

17.单例模式的手写

18.实现promise

19.防抖和节流

20.说说从输入URL到看到页面发生的全过程

21.caller和callee的区别

22.重绘和回流的区别和关系？

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素外观（如：尺寸，位置，隐藏/显示状态）发生变化时，产生重绘回流
js获取layout属性值，（如：offsetLeft，scrollTop，getComputedStyle)也会产生回流，因为浏览器通过回流计算最新值
回流必定引起重绘，重绘不一定引起回流

23.如何最小化重绘和回流

需要对元素进行复杂的操作时，可以先隐藏，操作完成后显示
需要创建多个DOM节点时，使用DocumentFragment创建完成后一次性加入document
缓存layout属性值，多次使用left只产生一次回流
尽量避免使用table布局
避免使用css表达式
尽量使用css简写

24.script的位置是否会影响首屏显示时间？

在解析HTML生成DOM过程中，js文件的下载是并行的，不需要DOM处理到script节点。因此，script的位置不影响首屏显示的开始时间
浏览器解析HTML是自上而下的过程，script作为HTML的一部分同样遵循这个原则
script会延迟DomContentLoad，只显示其上部分首屏内容，从而影响到首屏显示的完成时间

25.map和foreach的区别

map的速度比foreach快
map会返回一个新数组，不对原数组产生影响，foreach不会产生新数组，foreach会返回underfined
map因为返回数组可以链式操作，foreach不能
map里面可以用return，而foreach里面用return没用，foreach不能用break，会报错

26.状态码

100 客户端继续其请求
101 切换协议
200 请求成功一般用于get post请求
201 created已创建，成功请求并创建了新的资源
202 已接受请求，但是未处理完成
301 永久移动请求的资源已经被移动到新的uri，返回信息会包括新的uri，浏览器会自动重定向到新的uri
302 临时重定向
304 所请求的资源未被修改，服务器返回此状态，不会返回任何资源，客户端会缓存访问过的资源，
305 使用代理
401 请求要求用户的身份认证
403 服务器理解客户端的请求，但是拒绝了此请求
404 页面找不到
500 服务器内部出错

27.Git

git add file 新增文件
git commit -m 提交文件
git status -s 查看工作的状态
git fetch / git merge / git pull 拉取合并远程分支的操作
git reflog 查看提交记录命令

28.http

请求和响应报文格式
- 请求
  - 请求行
  - 请求首部字段
  - 请求内容实体
  - 空行
- 响应
  - 状态行
  - 响应首部字段
  - 相应实体
  - 空行
通用首部字段
- Date:创建报文时间
- Connection:连接的管理
- Cache-Control：缓存的控制
- Transfer-Encoding：编码方式
请求首部字段
- Host:请求资源所在服务器
- Accept：可处理的媒体类型
- Accept-Charset：可接受的字符集
- Accept-Encoding：可接受的内容编码
- Accept-Language：可接受的自然语言
响应首部字段
- Accept-Ranges：可接受的字节范围
- Location：令客户端重新定向到的URI
- Server：HTTP服务器的安装信息
实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）
- Allow：资源可支持的HTTP方法
- Content-Type：实体主类的类型
- Content-Encoding：实体主体适用的编码方式
- Content-Language：实体主体的自然语言
- Content-Length：实体主体的的字节数
- Content-Range：实体主体的位置范围，一般用于发出部分请求时使用