3415 字
17 分钟
面试需要知道点

1.JS 类型有哪些?#

2.TCP,HTTP,CDN#

3.大数相加、相乘算法题,可以直接使用 bigint,当然再加上字符串的处理会更好。#

4.NaN 如何判断#

5.instanceof` 原理 ✔#

6.手写 instanceof#

7.类型转换隐式转换和强制转换 ✔#

8.this, 箭头函数#

9.闭包 ✔#

10.new, 手写new,new做了哪些事?new 返回不同类型的时候是什么表现 ✔#

11.作用域,作用域链,全局作用域,函数作用域,块级作用域 ✔#

12.原型,原型链,原型继承, js中是如何实现继承的,通过原型实现的继承和class有什么区别,手写任意一种原型继承 ✔#

13.深拷贝,浅拷贝✔#

14.Promise** allrace , 使用all实现并行需求, 手写all的实现#

页面上有三个按钮,分别为 A、B、C,点击各个按钮都会发送异步请求且互不影响,每次请求回来的数据都为按钮的名字。 请实现当用户依次点击 A、B、C、A、C、B 的时候,最终获取的数据为 ABCACB。

15.async, await#

16.浏览器渲染也页面过程#

含义#

浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上岁最近请求过的文档进行存储,当用户再次访问这个文档时,浏览器会从本地磁盘显示此文档,从而提升页面加载速率。

cache的作用#

  • 减少延迟,让网站的运行速度更快,带来更好的用户体验;
  • 避免网络拥塞,减少请求量,减少输出带宽;

实现手段#

cache-control中的max-age是实现内容cache的重要手段,常用的策略有以下三种:

  • max-ageETag的组合;
  • max-age
  • max-ageLast-Modified(If-Modified-Since)的组合;

拓展#

在此,拓展一下有关强制缓存(200)和协商缓存(304)部分的内容。

  • 强制缓存(也称强缓存),指当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。强制缓存不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的network选项中可以看到该请求返回200的状态码;
  • 协商缓存:强制缓存给资源设置了过期时间,在未过期时,可以说是给用户自给自足用的。但是当资源过期时,就需要去请求服务器,这时候请求服务器的过程就可以设置成协商缓存。协商缓存就是需要客户端和服务端进行交互的。协商缓存将缓存信息中的EtagLast-Modified通过请求发给服务器,由服务器校验,返回状态码304时,浏览器就可以直接使用缓存。

共同点: 都是从客户端中读取数据;

区别: 强缓存不会发出请求,协商缓存会发出请求。

缓存中header(头部)的参数:

(1)、强制缓存:

  • Expires(常用):response header里的过期时间,浏览器再次加载资源时,如果在这个过期时间内,则命中强缓存。
  • Cache-Control(常用):当值设为max-age=120时,则代表在这个请求正确返回时间(浏览器也会记录下来)的2分钟内再次加载资源,就会命中强缓存。
  • no-cache:不使用本地缓存。需要使用缓存协商,来验证是否过期;
  • no-store:不可缓存;
  • public:客户端和代理服务器都可缓存;
  • private:只能有客户端缓存;

(2)、协商缓存

  • Etag:即文件hash,每个文件唯一。web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定);
  • If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etag声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定是否命中协商缓存;
  • Last-Modify/If-Modify-Since:文件的修改时间,精确到秒。浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-ModifyLast-modify是一个时间标识该资源的最后修改时间;当浏览器再次请求该资源时,request的请求头中会包含If-Modify-Since,该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存;

🌈🌈注意

  • Etag要优于Last-Modified
  • 在优先级上,服务器校验优先考虑Etag
  • 在性能上,Etag要逊于Last-Modified

17.如何性能优化#

18.CDN 优化有哪些, CDN是什么#

19.webpack 插件原理,如何写一个插件#

20.手写 bind ✔、reduce#

21.防抖截流 ✔#

22.遍历树,求树的最大层数。求某层最多的节点数#

23.前端模块化的理解#

24.隐式转换#

25.数字在计算机怎么储存的#

26.知道什么是事件委托吗?#

概念事件冒泡是指嵌套最深的元素触发一个事件,然后这个事件顺着嵌套顺序在父元素上触发。而事件委托,是利用事件冒泡原理,让自己所触发的事件,让其父元素代替执行。

冒泡阻止方式:使用event.cancelBubble = true或者event.stopPropgation()(低于IE9)。

默认事件阻止方式e.preventDefault(); return false;

27.window的onload事件和domcontentloaded谁先谁后?#

28.macrotask 和 microtask#

29.浏览器缓存,HTTP缓存 对比缓存?强缓存?对应请求头#

30.commonjs和esmodule#

31.xss攻击和csrf攻击#

32.时针和分针的夹角#

33.Javascript的事件流模型都有什么#

“事件冒泡”: 当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点。(逐级向上)

“事件捕获”: 当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,直到当前节点自身。(逐级向下)

“DOM事件流”dom同时支持两种事件模型,但捕获性事件先开始,从document开始也结束于documentdom模型的独特之处在于文本也可以触发事件。简单的说分为三个阶段:事件捕捉目标阶段事件冒泡

34.js延迟加载的方式有哪些?#

defer属性(页面load后执行):脚本会被延迟到整个页面都解析完毕之后再执行。若是设置了defer属性,就等于告诉浏览器立即下载,但是会延迟执行。注意defer属性只适用于外部脚本文件。

async 属性(页面load前执行):为了不让页面等待脚本下载和执行,异步加载页面和其他内容。async同样也只适用于外部文件(不会影响页面加载,但是不能控制加载的顺序)。

动态创建DOM方式;

使用jQuerygetScript()方法;

使用setTimeout延迟方法;

js文件最后加载。

35.Cookie在客户机上是如何存储的#

cookies是服务器暂时放在我们电脑里的文本文件,好让服务器来辨认我们的计算机。

当我们在浏览网站的时候,web服务器会先发送小部分资料放在我们的计算机中,cookies会帮助我们,将我们在网站上打印的文字或一些选择记录下来,当我们再次访问同一个网站,web服务器会先检查有没有它上次留下的cookies资料。

若有,会依据cookies里面的内容来判断使用者,从而给我们推出相应的网页内容。

36.DOM和BOM是什么#

首先我们需要知道:javascript是由ECMAScript,DOM,BOM三部分构成的

  • ECMAScript是一种语言,是对规定的语法,操作,关键字,语句的一个描述,javascript实现了ECMAScript;
  • DOM是文档对象模型,包括了获取元素,修改样式以及操作元素等三方面的内容,也是通常我们用的最多的操作,其提供了很多兼容性的写法;
  • BOM是浏览器对象模型,包括浏览器的一些操作,window.onload, window.open等还有浏览器时间,监听窗口的改变onresize,监听滚动事件onscroll等;

37.如何实现多个标签之间的通信#

  • 调用 localStorage

(1)、在一个标签内使用localStoragesetItem(key, value)添加(删除或修改)内容;

(2)、在另一个标签页面监听storage事件;

(3)、得到localStorage存储的值,即可实现不用页面之间的通信。

  • 调用 cookie+setInterval()

(1)、将要传递的信息存储在cookie中,可以设置定时读取cookie的信息,即可随时获取想要传递的信息。

  • 使用 Webworker

(1)、webworker作为浏览器的一个新特性,可以提供一个额外的线程来执行一些js代码,并且对浏览器用户界面不影响;

(2)、普通的Webworkernew worker()即可创建,这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker),这种是可以多个标签页、iframe共同使用;

  • 使用 SharedWorker

(1)、SharedWorker可以被多个window共同使用,但必须保证这些标签页都是同源的(相同的协议,主机和端口号);

38. js垃圾回收的几种方式#

javascript具有自动垃圾回收机制,垃圾器回收会按照固定的时间间隔周期性的执行。

常见的垃圾回收机制有两种: 标记清除引用计数

标记清除#

原理: 当变量进入环境时,将这个变量标记为“进入环境”。当变量离开时,则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程

  • 垃圾回收器,在运行的时候会给存储在内存中的所有变量都加上标记;
  • 去掉环境中的变量以及被环境中的变量引用的变量的标记;
  • 再被加上标记的会被视为准备删除的变量;
  • 垃圾回收器完成内存清除工作,销毁那些带标记的值并回收他们所占用的内存空间;

引用计数#

原理: 跟踪记录每个值被引用的次数,声明一个变量,并将引用 类型赋值给这个变量,则这个值的引用次数+1,当变量的值变成了另一个,则这个值的引用次数-1,当值的引用次数为0的时候,就回收。

工作流程

  • 声明了一个变量并将一个引用类型的值赋值给这个变量,这个引用值的引用次数就是1
  • 同一个值又被赋值给另一个变量,这个引用类型值此时的引用次数+1
  • 当包含这个引用类型值的变量又被赋值成另一个值,那么这个引用呢性值的引用次数-1
  • 当引用次数变成0时,说明目前无法访问此值;
  • 当垃圾收集器下一次运行时,它会释放引用次数是0的值所占的内存;

39.在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么#

(1)、DNS解析

  • 检查浏览器自身的DNS缓存;
  • 若没有,搜索操作系统自身的DNS缓存;
  • 若没有,尝试读取hosts文件;
  • 若没有,可向本地配置的首选DNS服务器发起请求;
  • .win系统若没有好到,可以操作系统查找NetBIOS name cache或查询wins服务器或广播查找或读取LMHOSTS文件;

(若以上都没有,则解析失败)

(2)、TCP三次握手

img

(3)、浏览器向服务器发送http请求

一旦建立了TCP链接,web浏览器就会向web服务器发送请求命令。

(4)、浏览器发送请求头信息

浏览器发送其请求命令之后,还要以头信息的形式想web服务器发送一些别的信息,之后浏览器发送了一空白行开通知服务器,它已经结束了该头信息的发送。

(5)、服务器处理请求

服务器收到http请求之后,确定用相应的一眼来处理请求。读取参数并进行逻辑操作后,生成指定的数据。

(6)、服务器做出响应

客户端向服务器发送请求后,服务端向客户端做出应答。

(7)、服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样,服务器也会随同应答向用户发送关于它自己的数据以及被请求的文档。

(8)、服务器发送数据

web服务器向浏览器发送信息后,它会发送一个空白行来表示头信息的发送到此结束。接着,它会以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

(9)、 TCP关闭(四次挥手)

一般情况下,一旦web服务器向浏览器发送了请求数据,它就要关闭tcp链接。如果浏览器或服务器在其头信息加入了Connection:keep-alive ,则会保持长连接状态,也就是TCP链接在发送后仍保持打开状态,浏览器可以继续通过仙童的链接发送请求。

(优点:保持链接节省了为每个请求建立新链接所属的时间,还节约了网络宽带 )

img

面试需要知道点
https://nollieleo.github.io/posts/面试需要知道点/
作者
翁先森
发布于
2021-05-28
许可协议
CC BY-NC-SA 4.0