面试记录专刊:第二天

275 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

今天复习计划,主要是是以自己简历上的知识点作为扩散。有些内容会有偏向基础。

一.前端知识

1.对称加密与非对称加密

对称加密:加密解密文件所需要的秘钥为同一个。
非对称加密:加密文件需要的公钥与解密所需的私钥不同。

对称加密与非对称加密对比:

标题对称加密对称加密
优点性能好安全可靠,公钥可以完全公开,秘钥存储在解密端即可
缺点秘钥难以保管及传输性能差,加解密需要耗费大量时间

HTTPS中的混合加密:
由于非对称加密灾难性的性能,在https中使用的是对称加密与非对称加密的混合加密,具体工作原理如下:

image.png

在TLS的握手中,通过非对称加密来传输对称加密的秘钥。利用对称加密的高性能对传输内容进行加密。

2.ES6

2.1 const、let、var

const、let的特性:

  1. 重复声明会报错
  2. 不会被提升
  3. 不绑定全局作用域

const与let属于块级作用域,var属于函数级作用域。const与let解决var的变量提升的特性主要是通过临死死区。

2.2 箭头函数

箭头函数与普通函数this的指向:

  • 箭头函数this与调用它的代码所在作用域共享一个 this
  • 普通函数this指向创建时作用域
2.3 模板字符串
let var = 'hello'

const txt = `${var} world `
2.4 解构赋值

对象解构

const obj = { name: 'cen', age: 25 };
const { name, age } = obj;

数组解构

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3

let [aa, bb, cc] = [1, [2 , 3], [4, 5, 6]];
console.log(aa, bb, cc); // 1 [2, 3] [4, 5, 6]

解构应用 —— 一行代码交换 a b 的值

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1
2.5 模块化
 // test.js
 
 export const a = 1
 export const b = 1
 import {a ,b } from 'test.js' 
 
 console.log(a,b)
2.6 Set

与Map相似,但具有自动去重功能。
Set Api:

  • add(value)    添加数据,并返回新的 Set 结构
  • delete(value)   删除数据,返回一个布尔值,表示是否删除成功
  • has(value)    查看是否存在某个数据,返回一个布尔值
  • clear()      清除所有数据,没有返回值

使用Set对数组去重:

 let arr = [1,2,3,4,4,5]
 
 let res = Array.form(new Set(arr))
2.7 Symbol

ES6添加的第6种基础类型。用于表示唯一变变量。

let a = Symbol('cen')
let b = Symbol('cen')

console.log(a === b) // false

2.8 函数参数默认

 function fun(a = 2){
   console.log(a)
 }
 
 fun(1) // 1
 fun() // 2

ES6特性推荐文章: juejin.cn/post/684490…

3.浏览器渲染原理

3.1 EventLoop

微任务(microtask): Promise、Object.observe
宏任务(macrotasl):script、setTimeout、setInerval、I/O

浏览器每次执行程序时,会先执行宏任务script。当宏任务执行完,接下来有异步代码的话就先执行微任务。当微任务执行完,就会在任务栈中循环此流程。


console.log('script start')

setTimeout(()=>{
  console.log('setTimeout')
},0)

let promise = new Promise((res,rej)=>{
  console.log('promise')
  res()
})

promise.then(()=>{
  console.log('resolve')
})

console.log('script end')

// 输出 
script start
promise
script end
resolve
setTimeout
3.2 重绘(Repaint)与回流(Reflow)

重绘:页面部署没有发生变化,例如:color。

回流:页面部署发生变化,如:增删页面元素、字条大小变化等。

重绘不一定引发回流,回流一定引发重绘。

3.3 从URL到渲染完成
  • DNS域名解析
  • 建立TCP连接 // 交互加密秘钥
  • 发送http请求
  • 服务器处理请求
  • 返回响应结果
  • 关闭TCP连接
  • 浏览器解析HTML // 解析DOM - 解析CSSOM - 合并成渲染树
  • 浏览器渲染 // 由GUI渲染图层

4.浏览器的缓存策略

4,1 强缓存

在客户端第一次请求服务器后,强制使用缓存。如果缓存还在生效日期内,则不发起任何请求。

标识使用强制缓存的响应头字段:cache-Controlexpires

响应头 cache-Control 的常见值:

  • max-age: xxx // 强制缓存生效时间
  • no-cache // 不使用本地缓存
  • no-store // 从服务器拉取缓存
  cache-control: max-age: 3600 // 表示缓存生效时长为: 3600s
  
  cache-control: no-cache // 不使用缓存

expires为较早期的做法,功能与cache-control类型。当同时与cache-control存在时,优先级低。

 expires: 3600
 cache-control: max-age: 60
 // 优先使用cache-control的值
4.2 协商缓存

客户端第一次请求后,服务器会在响应头信息中加入Etaglast-Modified字段。浏览器在之后的每次请求都会将该字段放在请求头信息中返回服务器,由服务器判断文件是否存在修改。如果服务器对比后发现无修改,则回返回304,浏览器就会使用缓存文件。反之,则会正常返回服务器最新文件。

浏览器第一次请求资源响应头信息:

 etag: abcd // 将返回Etag存储,在下次请求头信息中放入If-None-Match字段中。

浏览器第二次请求资源请求头信息:

If-None-Match: abcd 

同强制缓存,协商缓存除了使用Etag,还可以使用Last-Modified。但Etag的优先级高于Last-Modified

二.算法

反转链表

一个算法大佬说的高频算法题,主要考查对链表的熟悉以及对交换值得了解。难度不大。

有效的括号

使用栈的先进后出特性,匹配符号的正确性。同时使用Map可以很好的管理符号的对应关系。

三.面经

暂无

四.其他

健身打卡:

32d38ed09391fc39faf00c9e691eeb3.jpg

英语打卡:

a67b855f2c74bbf7af1ca2e6c70de35.jpg

it`s not over,until i win