理论相关

西瓜皮儿 2021/12/7 面试题

# JS相关

# 连续赋值

# Vue3

# JSONP原理

# async/defer

相同点: 异步加载 (fetch)
不同点:
- async 加载(fetch)完成后立即执行 (execution)，因此可能会阻塞 DOM 解析；
- defer 加载(fetch)完成后延迟到 DOM 解析完成后才会执行(execution)，但会在事件 DomContentLoaded 之前

# 操作系统相关

# 线程和进程

线程是进程的最小执行单位
进程是系统分配资源的最小单位
线程使用进程分配的资源执行
执行时可以给资源上锁，使用完后解锁，其他资源才可以使用
JS是单线程语言，但是使用worker可以多开一个线程
浏览器是多线程工作的，内部主要线程有：
- JS引擎线程
- GUI渲染线程（渲染页面）
- 事件触发线程
- 定时器触发线程
- http请求线程
- 其他线程
如果要在系统内多开一个线程shell命令：shell代码后加【&】

# 无多线程
for ((i=0;i<5;i++))
do
    {
        sleep 3
        echo "${i} done!" >> log.txt
    }
done
wait

1
2
3
4
5
6
7
8
9

# 当前代码多开一个线程后台执行
for ((i=0;i<5;i++))
do
    {
        sleep 3
        echo "${i} done!" >> log.txt
    } &
done
wait

1
2
3
4
5
6
7
8
9

# 网络相关

# 网络七层

# http2.0/3.0特性

# DNS解析

# CDN资源原理

# 三次握手/四次挥手

# HTTPS加密原理

# 状态码

# TCP

# 网络攻防

# XSS攻击

# csrf攻击

# 浏览器相关

# 浏览器关键渲染路径

生成 DOM 会从远程下载 Byte，并根据相应的编码 (如 utf8) 转化为字符串，通过 AST 解析为 Token，生成 Node 及最后的 DOM。
当解析 CSS 文件时，最终会生成 CSSOM
DOM 与 CSSOM 会一起生成 Render Tree，只包含渲染网页所需的节点。
计算每一个元素在设备视口内的确切位置和大小
将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化

浏览器元素大小发生变化，使周围元素布局也要发生变化，就要从4重排开始，性能开销大
如果只是本元素发生变化，不会影响整体的布局，如背景颜色、字体颜色、盒子内容时，就只会触发5重绘，性能开销小

# src和href的区别

src请求的资源会中断当前页面解析，如图片、script：在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。
而link的href是被当做一个样式表进行加载。浏览器识别当前资源是一个样式表，页面解析不会暂停，因此建议使用link标签而不是@import来把样式表导入到html文档里。

# 浏览器缓存