关于前端:社招中级前端笔试面试题总结

4次阅读

共计 14390 个字符，预计需要花费 36 分钟才能阅读完成。

代码输入后果

var obj = { 
  name : 'cuggz', 
  fun : function(){console.log(this.name); 
  } 
} 
obj.fun()     // cuggz
new obj.fun() // undefined

应用 new 构造函数时，其 this 指向的是全局环境 window。

setTimeout、Promise、Async/Await 的区别

（1）setTimeout

console.log('script start')    //1. 打印 script start
setTimeout(function(){console.log('settimeout')    // 4. 打印 settimeout
})    // 2. 调用 setTimeout 函数，并定义其实现后执行的回调函数
console.log('script end')    //3. 打印 script start
// 输入程序：script start->script end->settimeout

（2）Promise

Promise 自身是 同步的立刻执行函数，当在 executor 中执行 resolve 或者 reject 的时候, 此时是异步操作，会先执行 then/catch 等，当主栈实现后，才会去调用 resolve/reject 中寄存的办法执行，打印 p 的时候，是打印的返回后果，一个 Promise 实例。

console.log('script start')
let promise1 = new Promise(function (resolve) {console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {console.log('promise2')
})
setTimeout(function(){console.log('settimeout')
})
console.log('script end')
// 输入程序: script start->promise1->promise1 end->script end->promise2->settimeout

当 JS 主线程执行到 Promise 对象时：

  • promise1.then() 的回调就是一个 task
  • promise1 是 resolved 或 rejected: 那这个 task 就会放入以后事件循环回合的 microtask queue
  • promise1 是 pending: 这个 task 就会放入 事件循环的将来的某个 (可能下一个) 回合的 microtask queue 中
  • setTimeout 的回调也是个 task，它会被放入 macrotask queue 即便是 0ms 的状况

（3）async/await

async function async1(){console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){console.log('async2')
}
console.log('script start');
async1();
console.log('script end')
// 输入程序：script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作实现，再执行函数体内前面的语句。能够了解为，是让出了线程，跳出了 async 函数体。

例如：

async function func1() {return 1}
console.log(func1())

func1 的运行后果其实就是一个 Promise 对象。因而也能够应用 then 来解决后续逻辑。

func1().then(res => {console.log(res);  // 30
})

await 的含意为期待，也就是 async 函数须要期待 await 后的函数执行实现并且有了返回后果（Promise 对象）之后，能力继续执行上面的代码。await 通过返回一个 Promise 对象来实现同步的成果。

什么是回调函数？回调函数有什么毛病？如何解决回调天堂问题？

以下代码就是一个回调函数的例子：

ajax(url, () => {// 解决逻辑})

回调函数有一个致命的弱点，就是容易写出回调天堂（Callback hell）。假如多个申请存在依赖性，可能会有如下代码：

ajax(url, () => {
    // 解决逻辑
    ajax(url1, () => {
        // 解决逻辑
        ajax(url2, () => {// 解决逻辑})
    })
})

以上代码看起来不利于浏览和保护，当然，也能够把函数离开来写：

function firstAjax() {ajax(url1, () => {
    // 解决逻辑
    secondAjax()})
}
function secondAjax() {ajax(url2, () => {// 解决逻辑})
}
ajax(url, () => {
  // 解决逻辑
  firstAjax()})

以上的代码尽管看上去利于浏览了，然而还是没有解决基本问题。回调天堂的基本问题就是：

  1. 嵌套函数存在耦合性，一旦有所改变，就会牵一发而动全身
  2. 嵌套函数一多，就很难处理错误

当然，回调函数还存在着别的几个毛病，比方不能应用 try catch 捕捉谬误，不能间接 return。

Sass、Less 是什么？为什么要应用他们？

他们都是 CSS 预处理器，是 CSS 上的一种形象层。他们是一种非凡的语法 / 语言编译成 CSS。例如 Less 是一种动静款式语言，将 CSS 赋予了动静语言的个性，如变量，继承，运算，函数，LESS 既能够在客户端上运行 (反对 IE 6+, Webkit, Firefox)，也能够在服务端运行 (借助 Node.js)。

为什么要应用它们？

  • 构造清晰，便于扩大。能够不便地屏蔽浏览器公有语法差别。封装对浏览器语法差别的反复解决，缩小无意义的机械劳动。
  • 能够轻松实现多重继承。齐全兼容 CSS 代码，能够不便地利用到老我的项目中。LESS 只是在 CSS 语法上做了扩大，所以老的 CSS 代码也能够与 LESS 代码一起编译。

await 到底在等啥？

await 在期待什么呢？ 一般来说，都认为 await 是在期待一个 async 函数实现。不过按语法阐明，await 期待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有非凡限定）。

因为 async 函数返回一个 Promise 对象，所以 await 能够用于期待一个 async 函数的返回值——这也能够说是 await 在等 async 函数，但要分明，它等的理论是一个返回值。留神到 await 不仅仅用于等 Promise 对象，它能够等任意表达式的后果，所以，await 前面理论是能够接一般函数调用或者间接量的。所以上面这个示例齐全能够正确运行：

function getSomething() {return "something";}
async function testAsync() {return Promise.resolve("hello async");
}
async function test() {const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}
test();

await 表达式的运算后果取决于它等的是什么。

  • 如果它等到的不是一个 Promise 对象，那 await 表达式的运算后果就是它等到的货色。
  • 如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞前面的代码，等着 Promise 对象 resolve，而后失去 resolve 的值，作为 await 表达式的运算后果。

来看一个例子：

function testAsy(x){return new Promise(resolve=>{setTimeout(() => {resolve(x);
     }, 3000)
    }
   )
}
async function testAwt(){let result =  await testAsy('hello world');
  console.log(result);    // 3 秒钟之后呈现 hello world
  console.log('cuger')   // 3 秒钟之后呈现 cug
}
testAwt();
console.log('cug')  // 立刻输入 cug

这就是 await 必须用在 async 函数中的起因。async 函数调用不会造成阻塞，它外部所有的阻塞都被封装在一个 Promise 对象中异步执行。await 暂停以后 async 的执行，所以 ’cug” 最先输入，hello world’ 和‘cuger’是 3 秒钟后同时呈现的。

数组去重

ES5 实现：

function unique(arr) {var res = arr.filter(function(item, index, array) {return array.indexOf(item) === index
    })
    return res
}

ES6 实现：

var unique = arr => [...new Set(arr)]

参考 前端进阶面试题具体解答

Promise.resolve

Promise.resolve = function(value) {
    // 1. 如果 value 参数是一个 Promise 对象，则一成不变返回该对象
    if(value instanceof Promise) return value;
    // 2. 如果 value 参数是一个具备 then 办法的对象，则将这个对象转为 Promise 对象，并立刻执行它的 then 办法
    if(typeof value === "object" && 'then' in value) {return new Promise((resolve, reject) => {value.then(resolve, reject);
        });
    }
    // 3. 否则返回一个新的 Promise 对象，状态为 fulfilled
    return new Promise(resolve => resolve(value));
}

margin 和 padding 的应用场景

  • 须要在 border 外侧增加空白，且空白处不须要背景（色）时，应用 margin；
  • 须要在 border 内测增加空白，且空白处须要背景（色）时，应用 padding。

URL 有哪些组成部分

一个残缺的 URL 包含以下几局部：

  • 协定局部：该 URL 的协定局部为“http：”，这代表网页应用的是 HTTP 协定。在 Internet 中能够应用多种协定，如 HTTP，FTP 等等本例中应用的是 HTTP 协定。在 ”HTTP” 前面的“//”为分隔符；
  • 域名局部
  • 端口局部：跟在域名前面的是端口，域名和端口之间应用“:”作为分隔符。端口不是一个 URL 必须的局部，如果省略端口局部，将采纳默认端口（HTTP 协定默认端口是 80，HTTPS 协定默认端口是 443）；
  • 虚拟目录局部：从域名后的第一个“/”开始到最初一个“/”为止，是虚拟目录局部。虚拟目录也不是一个 URL 必须的局部。本例中的虚拟目录是“/news/”；
  • 文件名局部：从域名后的最初一个“/”开始到“？”为止，是文件名局部，如果没有“?”, 则是从域名后的最初一个“/”开始到“#”为止，是文件局部，如果没有“？”和“#”，那么从域名后的最初一个“/”开始到完结，都是文件名局部。本例中的文件名是“index.asp”。文件名局部也不是一个 URL 必须的局部，如果省略该局部，则应用默认的文件名；
  • 锚局部：从“#”开始到最初，都是锚局部。本例中的锚局部是“name”。锚局部也不是一个 URL 必须的局部；
  • 参数局部：从“？”开始到“#”为止之间的局部为参数局部，又称搜寻局部、查问局部。本例中的参数局部为“boardID=5&ID=24618&page=1”。参数能够容许有多个参数，参数与参数之间用“&”作为分隔符。

TCP 和 UDP 的概念及特点

TCP 和 UDP 都是传输层协定，他们都属于 TCP/IP 协定族：

（1）UDP

UDP 的全称是 用户数据报协定，在网络中它与 TCP 协定一样用于解决数据包，是一种无连贯的协定。在 OSI 模型中，在传输层，处于 IP 协定的上一层。UDP 有不提供数据包分组、组装和不能对数据包进行排序的毛病，也就是说，当报文发送之后，是无奈得悉其是否平安残缺达到的。

它的特点如下：

1）面向无连贯

首先 UDP 是不须要和 TCP 一样在发送数据前进行三次握手建设连贯的，想发数据就能够开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。

具体来说就是：

  • 在发送端，应用层将数据传递给传输层的 UDP 协定，UDP 只会给数据减少一个 UDP 头标识下是 UDP 协定，而后就传递给网络层了
  • 在接收端，网络层将数据传递给传输层，UDP 只去除 IP 报文头就传递给应用层，不会任何拼接操作

2）有单播，多播，播送的性能

UDP 不止反对一对一的传输方式，同样反对一对多，多对多，多对一的形式，也就是说 UDP 提供了单播，多播，播送的性能。

3）面向报文

发送方的 UDP 对应用程序交下来的报文，在增加首部后就向下交付 IP 层。UDP 对应用层交下来的报文，既不合并，也不拆分，而是保留这些报文的边界。因而，应用程序必须抉择适合大小的报文

4）不可靠性

首先不可靠性体现在无连贯上，通信都不须要建设连贯，想发就发，这样的状况必定不牢靠。

并且收到什么数据就传递什么数据，并且也不会备份数据，发送数据也不会关怀对方是否曾经正确接管到数据了。

再者网络环境时好时坏，然而 UDP 因为没有拥塞管制，始终会以恒定的速度发送数据。即便网络条件不好，也不会对发送速率进行调整。这样实现的弊病就是在网络条件不好的状况下可能会导致丢包，然而长处也很显著，在某些实时性要求高的场景（比方电话会议）就须要应用 UDP 而不是 TCP。

5）头部开销小，传输数据报文时是很高效的。

UDP 头部蕴含了以下几个数据：

  • 两个十六位的端口号，别离为源端口（可选字段）和指标端口
  • 整个数据报文的长度
  • 整个数据报文的测验和（IPv4 可选字段），该字段用于发现头部信息和数据中的谬误

因而 UDP 的头部开销小，只有 8 字节，相比 TCP 的至多 20 字节要少得多，在传输数据报文时是很高效的。

（2）TCP TCP 的全称是传输控制协议是一种面向连贯的、牢靠的、基于字节流的传输层通信协议。TCP 是面向连贯的、牢靠的流协定（流就是指不间断的数据结构）。

它有以下几个特点：

1）面向连贯

面向连贯，是指发送数据之前必须在两端建设连贯。建设连贯的办法是“三次握手”，这样能建设牢靠的连贯。建设连贯，是为数据的牢靠传输打下了根底。

2）仅反对单播传输

每条 TCP 传输连贯只能有两个端点，只能进行点对点的数据传输，不反对多播和播送传输方式。

3）面向字节流

TCP 不像 UDP 一样那样一个个报文独立地传输，而是在不保留报文边界的状况下以字节流形式进行传输。

4）牢靠传输

对于牢靠传输，判断丢包、误码靠的是 TCP 的段编号以及确认号。TCP 为了保障报文传输的牢靠，就给每个包一个序号，同时序号也保障了传送到接收端实体的包的按序接管。而后接收端实体对已胜利收到的字节发回一个相应的确认 (ACK)；如果发送端实体在正当的往返时延(RTT) 内未收到确认，那么对应的数据（假如失落了）将会被重传。

5）提供拥塞管制

当网络呈现拥塞的时候，TCP 可能减小向网络注入数据的速率和数量，缓解拥塞。

6）提供全双工通信

TCP 容许通信单方的应用程序在任何时候都能发送数据，因为 TCP 连贯的两端都设有缓存，用来长期寄存双向通信的数据。当然，TCP 能够立刻发送一个数据段，也能够缓存一段时间以便一次发送更多的数据段（最大的数据段大小取决于 MSS）

PWA 应用过吗？serviceWorker 的应用原理是啥？

渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 web 应用程序，但在外观和感觉上与 原生 app相似。反对 PWA 的网站能够提供脱机工作、推送告诉和设施硬件拜访等性能。

Service Worker是浏览器在后盾独立于网页运行的脚本，它关上了通向不须要网页或用户交互的性能的大门。当初，它们已包含如推送告诉和后盾同步等性能。未来，Service Worker将会反对如定期同步或天文围栏等其余性能。本教程探讨的外围性能是拦挡和解决网络申请，包含通过程序来治理缓存中的响应。

渲染机制

1. 浏览器如何渲染网页

概述：浏览器渲染一共有五步

  1. 解决 HTML 并构建 DOM 树。
  2. 解决 CSS构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 依据渲染树来布局，计算每个节点的地位。
  5. 调用 GPU 绘制，合成图层，显示在屏幕上

第四步和第五步是最耗时的局部，这两步合起来，就是咱们通常所说的渲染

具体如下图过程如下图所示

渲染

  • 网页生成的时候，至多会渲染一次
  • 在用户拜访的过程中，还会一直从新渲染

从新渲染须要反复之前的第四步 (从新生成布局)+ 第五步(从新绘制) 或者只有第五个步(从新绘制)

  • 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建实现。并且构建 CSSOM 树是一个非常耗费性能的过程，所以应该尽量保障层级扁平，缩小适度层叠，越是具体的 CSS 选择器，执行速度越慢
  • 当 HTML 解析到 script 标签时，会暂停构建 DOM，实现后才会从暂停的中央从新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也能够认为这种状况下，CSS 也会暂停构建 DOM

2. 浏览器渲染五个阶段

2.1 第一步：解析 HTML 标签，构建 DOM 树

在这个阶段，引擎开始解析 html，解析进去的后果会成为一棵dom 树 dom的目标至多有 2 个

  • 作为下个阶段渲染树状图的输出
  • 成为网页和脚本的交互界面。(最罕用的就是 getElementById 等等)

当解析器达到 script 标签的时候，产生上面四件事件

  1. html解析器进行解析,
  2. 如果是内部脚本，就从内部网络获取脚本代码
  3. 将控制权交给 js 引擎，执行 js 代码
  4. 复原 html 解析器的控制权

由此能够失去第一个论断 1

  • 因为 <script> 标签是阻塞解析的，将脚本放在网页尾部会减速代码渲染。
  • defer和 async 属性也能有助于加载内部脚本。
  • defer使得脚本会在 dom 残缺构建之后执行；
  • async标签使得脚本只有在齐全 available 才执行，并且是以非阻塞的形式进行的

2.2 第二步：解析 CSS 标签，构建 CSSOM 树

  • 咱们曾经看到 html 解析器碰到脚本后会做的事件，接下来咱们看下 html 解析器碰到样式表会产生的状况
  • js会阻塞解析，因为它会批改文档 (document)。css 不会批改文档的构造，如果这样的话，仿佛看起来 css 款式不会阻塞浏览器 html 解析。然而事实上 css样式表是阻塞的。阻塞是指当 cssom 树建设好之后才会进行下一步的解析渲染

通过以下伎俩能够加重 cssom 带来的影响

  • 将 script 脚本放在页面底部
  • 尽可能快的加载 css 样式表
  • 将样式表依照 media type 和media query辨别，这样有助于咱们将 css 资源标记成非阻塞渲染的资源。
  • 非阻塞的资源还是会被浏览器下载，只是优先级较低

2.3 第三步：把 DOM 和 CSSOM 组合成渲染树（render tree）

2.4 第四步：在渲染树的根底上进行布局，计算每个节点的几何构造

布局 (layout)：定位坐标和大小，是否换行，各种position, overflow, z-index 属性

2.5 调用 GPU 绘制，合成图层，显示在屏幕上

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

3. 渲染优化相干

3.1 Load 和 DOMContentLoaded 区别

  • Load 事件触发代表页面中的 DOM，CSS，JS，图片曾经全副加载结束。
  • DOMContentLoaded 事件触发代表初始的 HTML 被齐全加载和解析，不须要期待 CSS，JS，图片加载

3.2 图层

一般来说，能够把一般文档流看成一个图层。特定的属性能够生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁须要渲染的倡议独自生成一个新图层，进步性能。但也不能生成过多的图层，会引起副作用。

通过以下几个罕用属性能够生成新图层

  • 3D 变换：translate3d、translateZ
  • will-change
  • video、iframe 标签
  • 通过动画实现的 opacity 动画转换
  • position: fixed

3.3 重绘（Repaint）和回流（Reflow）

重绘和回流是渲染步骤中的一大节，然而这两个步骤对于性能影响很大

  • 重绘是当节点须要更改外观而不会影响布局的，比方扭转 color 就叫称为重绘
  • 回流是布局或者几何属性须要扭转就称为回流。

回流必定会产生重绘，重绘不肯定会引发回流。回流所需的老本比重绘高的多，扭转深层次的节点很可能导致父节点的一系列回流

以下几个动作可能会导致性能问题

  • 扭转 window 大小
  • 扭转字体
  • 增加或删除款式
  • 文字扭转
  • 定位或者浮动
  • 盒模型

很多人不晓得的是，重绘和回流其实和 Event loop 无关

  • 当 Event loop 执行完Microtasks 后，会判断 document 是否须要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。
  • 而后判断是否有 resize 或者 scroll，有的话会去触发事件，所以 resize 和 scroll 事件也是至多 16ms才会触发一次，并且自带节流性能。
  • 判断是否触发了 media query
  • 更新动画并且发送事件
  • 判断是否有全屏操作事件
  • 执行 requestAnimationFrame 回调
  • 执行 IntersectionObserver 回调，该办法用于判断元素是否可见，能够用于懒加载上，然而兼容性不好
  • 更新界面
  • 以上就是一帧中可能会做的事件。如果在一帧中有闲暇工夫，就会去执行 requestIdleCallback 回调

常见的引起重绘的属性

  • color
  • border-style
  • visibility
  • background
  • text-decoration
  • background-image
  • background-position
  • background-repeat
  • outline-color
  • outline
  • outline-style
  • border-radius
  • outline-width
  • box-shadow
  • background-size

3.4 常见引起回流属性和办法

任何会扭转元素几何信息 (元素的地位和尺寸大小) 的操作，都会触发重排，上面列一些栗子

  • 增加或者删除可见的 DOM 元素；
  • 元素尺寸扭转——边距、填充、边框、宽度和高度
  • 内容变动，比方用户在 input 框中输出文字
  • 浏览器窗口尺寸扭转——resize事件产生时
  • 计算 offsetWidth 和 offsetHeight 属性
  • 设置 style 属性的值

回流影响的范畴

因为浏览器渲染界面是基于散失布局模型的，所以触发重排时会对四周 DOM 重新排列，影响的范畴有两种

  • 全局范畴：从根节点 html 开始对整个渲染树进行从新布局。
  • 部分范畴：对渲染树的某局部或某一个渲染对象进行从新布局

全局范畴回流

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>

当 p 节点上产生 reflow 时，hello和 body 也会从新渲染，甚至 h5 和ol都会收到影响

部分范畴回流

用部分布局来解释这种景象：把一个 dom 的宽高之类的几何信息定死，而后在 dom 外部触发重排，就只会从新渲染该 dom 外部的元素，而不会影响到外界

3.5 缩小重绘和回流

应用 translate 代替 top

<div class="test"></div>
<style>
    .test {
        position: absolute;
        top: 10px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<script>
    setTimeout(() => {
        // 引起回流
        document.querySelector('.test').style.top = '100px'
    }, 1000)
</script>
  • 应用 visibility 替换 display: none，因为前者只会引起重绘，后者会引发回流（扭转了布局）
  • 把 DOM 离线后批改，比方：先把 DOM 给 display:none (有一次 Reflow)，而后你批改 100 次，而后再把它显示进去
  • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
for(let i = 0; i < 1000; i++) {
    // 获取 offsetTop 会导致回流，因为须要去获取正确的值
    console.log(document.querySelector('.test').style.offsetTop)
}
  • 不要应用 table 布局，可能很小的一个小改变会造成整个 table 的从新布局
  • 动画实现的速度的抉择，动画速度越快，回流次数越多，也能够抉择应用 requestAnimationFrame
  • CSS选择符从右往左匹配查找，防止 DOM深度过深
  • 将频繁运行的动画变为图层，图层可能阻止该节点回流影响别的元素。比方对于 video标签，浏览器会主动将该节点变为图层。

OSI 七层模型

ISO为了更好的使网络应用更为遍及，推出了 OSI 参考模型。

（1）应用层

OSI参考模型中最靠近用户的一层，是为计算机用户提供利用接口，也为用户间接提供各种网络服务。咱们常见应用层的网络服务协定有：HTTP，HTTPS，FTP，POP3、SMTP等。

  • 在客户端与服务器中常常会有数据的申请，这个时候就是会用到 http(hyper text transfer protocol)(超文本传输协定) 或者https. 在后端设计数据接口时，咱们经常应用到这个协定。
  • FTP是文件传输协定，在开发过程中，集体并没有波及到，然而我想，在一些资源网站，比方 百度网盘` 迅雷 ` 应该是基于此协定的。
  • SMTP是simple mail transfer protocol（简略邮件传输协定）。在一个我的项目中，在用户邮箱验证码登录的性能时，应用到了这个协定。

（2）表示层

表示层提供各种用于应用层数据的编码和转换性能, 确保一个零碎的应用层发送的数据能被另一个零碎的应用层辨认。如果必要，该层可提供一种规范示意模式，用于将计算机外部的多种数据格式转换成通信中采纳的规范示意模式。数据压缩和加密也是表示层可提供的转换性能之一。

在我的项目开发中，为了不便数据传输，能够应用 base64 对数据进行编解码。如果按性能来划分，base64应该是工作在表示层。

（3）会话层

会话层就是负责建设、治理和终止表示层实体之间的通信会话。该层的通信由不同设施中的应用程序之间的服务申请和响应组成。

（4）传输层

传输层建设了主机端到端的链接，传输层的作用是为下层协定提供端到端的牢靠和通明的数据传输服务，包含解决差错控制和流量管制等问题。该层向高层屏蔽了上层数据通信的细节，使高层用户看到的只是在两个传输实体间的一条主机到主机的、可由用户管制和设定的、牢靠的数据通路。咱们通常说的，TCP UDP就是在这一层。端口号既是这里的“端”。

（5）网络层

本层通过 IP 寻址来建设两个节点之间的连贯，为源端的运输层送来的分组，抉择适合的路由和替换节点，正确无误地依照地址传送给目标端的运输层。就是通常说的 IP 层。这一层就是咱们常常说的 IP 协定层。IP协定是 Internet 的根底。咱们能够这样了解，网络层规定了数据包的传输路线，而传输层则规定了数据包的传输方式。

（6）数据链路层

将比特组合成字节, 再将字节组合成帧, 应用链路层地址 (以太网应用 MAC 地址)来拜访介质, 并进行过错检测。
网络层与数据链路层的比照，通过下面的形容，咱们或者能够这样了解，网络层是布局了数据包的传输路线，而数据链路层就是传输路线。不过，在数据链路层上还减少了差错控制的性能。

（7）物理层

理论最终信号的传输是通过物理层实现的。通过物理介质传输比特流。规定了电平、速度和电缆针脚。罕用设施有（各种物理设施）集线器、中继器、调制解调器、网线、双绞线、同轴电缆。这些都是物理层的传输介质。

OSI 七层模型通信特点：对等通信 对等通信，为了使数据分组从源传送到目的地，源端 OSI 模型的每一层都必须与目标端的对等层进行通信，这种通信形式称为对等层通信。在每一层通信过程中，应用本层本人协定进行通信。

介绍一下 webpack scope hosting

作用域晋升，将扩散的模块划分到同一个作用域中，防止了代码的反复引入，无效缩小打包后的代码体积和运行时的内存损耗；

代码输入后果

Promise.resolve().then(() => {console.log('promise1');
  const timer2 = setTimeout(() => {console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {console.log('timer1')
  Promise.resolve().then(() => {console.log('promise2')
  })
}, 0)
console.log('start');

输入后果如下：

start
promise1
timer1
promise2
timer2

代码执行过程如下：

  1. 首先，Promise.resolve().then是一个微工作，退出微工作队列
  2. 执行 timer1，它是一个宏工作，退出宏工作队列
  3. 继续执行上面的同步代码，打印出start
  4. 这样第一轮宏工作就执行完了，开始执行微工作Promise.resolve().then，打印出promise1
  5. 遇到timer2，它是一个宏工作，将其退出宏工作队列，此时宏工作队列有两个工作，别离是timer1、timer2；
  6. 这样第一轮微工作就执行完了，开始执行第二轮宏工作，首先执行定时器timer1，打印timer1；
  7. 遇到Promise.resolve().then，它是一个微工作，退出微工作队列
  8. 开始执行微工作队列中的工作，打印promise2；
  9. 最初执行宏工作 timer2 定时器，打印出timer2；

webpack 配置入口进口

module.exports={
    // 入口文件的配置项
    entry:{},
    // 进口文件的配置项
    output:{},
    // 模块：例如解读 CSS, 图片如何转换，压缩
    module:{},
    // 插件，用于生产模版和各项性能
    plugins:[],
    // 配置 webpack 开发服务性能
    devServer:{}}
简略形容了一下这几个属性是干什么的。形容一下 npm run dev / npm run build 执行的是哪些文件
通过配置 proxyTable 来达到开发环境跨域的问题，而后又能够扩大和他聊聊跨域的产生，如何跨域
最初能够在聊聊 webpack 的优化，例如 babel-loader 的优化，gzip 压缩等等

函数柯里化

什么叫函数柯里化？其实就是将应用多个参数的函数转换成一系列应用一个参数的函数的技术。还不懂？来举个例子。

function add(a, b, c) {return a + b + c}
add(1, 2, 3)
let addCurry = curry(add)
addCurry(1)(2)(3)

当初就是要实现 curry 这个函数，使函数从一次调用传入多个参数变成屡次调用每次传一个参数。

function curry(fn) {let judge = (...args) => {if (args.length == fn.length) return fn(...args)
        return (...arg) => judge(...args, ...arg)
    }
    return judge
}

Virtual Dom 的劣势在哪里？

Virtual Dom 的劣势」其实这道题目面试官更想听到的答案不是上来就说「间接操作 / 频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不至于活到明天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。

首先咱们须要晓得：

DOM 引擎、JS 引擎 互相独立，但又工作在同一线程（主线程）JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最初激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量解决”优化，引擎间切换的单位代价将迅速积攒若其中有强制重绘的 DOM API 调用，从新计算布局、从新绘制图像会引起更大的性能耗费。

其次是 VDOM 和实在 DOM 的区别和优化：

  1. 虚构 DOM 不会立马进行排版与重绘操作
  2. 虚构 DOM 进行频繁批改，而后一次性比拟并批改实在 DOM 中须要改的局部，最初在实在 DOM 中进行排版与重绘，缩小过多 DOM 节点排版与重绘损耗
  3. 虚构 DOM 无效升高大面积实在 DOM 的重绘与排版，因为最终与实在 DOM 比拟差别，能够只渲染部分

TCP/IP 五层协定

TCP/IP五层协定和 OSI 的七层协定对应关系如下：

  • 应用层 (application layer)：间接为利用过程提供服务。应用层协定定义的是利用过程间通信和交互的规定，不同的利用有着不同的应用层协定，如 HTTP 协定（万维网服务）、FTP 协定（文件传输）、SMTP 协定（电子邮件）、DNS（域名查问）等。

  • 传输层 (transport layer)：有时也译为运输层，它负责为两台主机中的过程提供通信服务。该层次要有以下两种协定：

    • 传输控制协议 (Transmission Control Protocol，TCP)：提供面向连贯的、牢靠的数据传输服务，数据传输的根本单位是报文段（segment）；
    • 用户数据报协定 (User Datagram Protocol，UDP)：提供无连贯的、尽最大致力的数据传输服务，但不保障数据传输的可靠性，数据传输的根本单位是用户数据报。
  • 网络层 (internet layer)：有时也译为网际层，它负责为两台主机提供通信服务，并通过抉择适合的路由将数据传递到指标主机。
  • 数据链路层 (data link layer)：负责将网络层交下来的 IP 数据报封装成帧，并在链路的两个相邻节点间传送帧，每一帧都蕴含数据和必要的管制信息（如同步信息、地址信息、差错控制等）。
  • 物理层 (physical Layer)：确保数据能够在各种物理媒介上进行传输，为数据的传输提供牢靠的环境。

从上图中能够看出，TCP/IP模型比 OSI 模型更加简洁，它把 应用层 / 表示层 / 会话层 全副整合为了 应用层。

在每一层都工作着不同的设施，比方咱们罕用的交换机就工作在数据链路层的，个别的路由器是工作在网络层的。在每一层实现的协定也各不同，即每一层的服务也不同，下图列出了每层次要的传输协定：

同样，TCP/IP五层协定的通信形式也是对等通信：

首屏和白屏工夫如何计算

首屏工夫的计算，能够由 Native WebView 提供的相似 onload 的办法实现，在 ios 下对应的是 webViewDidFinishLoad，在 android 下对应的是 onPageFinished 事件。

白屏的定义有多种。能够认为“没有任何内容”是白屏，能够认为“网络或服务异样”是白屏，能够认为“数据加载中”是白屏，能够认为“图片加载不进去”是白屏。场景不同，白屏的计算形式就不雷同。

办法 1：当页面的元素数小于 x 时，则认为页面白屏。比方“没有任何内容”，能够获取页面的 DOM 节点数，判断 DOM 节点数少于某个阈值 X，则认为白屏。办法 2：当页面呈现业务定义的错误码时，则认为是白屏。比方“网络或服务异样”。办法 3：当页面呈现业务定义的特征值时，则认为是白屏。比方“数据加载中”。

正文完
前端
发表至： 前端
2023-02-28
 0
关于前端:前端-JavaScript异步编程Promise
关于前端:Vue-elinput特性记录2最大值最小值
关于前端:JavaScript-中文或非-ASCII-字符与-base64-互转
Flutter-新闻客户端-09-详情页展示分享远程真机调试

站内搜索

-「」