Sh1-5
Github Repo

前端面试知识点整理

  • 概念 + 定义
  • 理解和见解
  • 工作中的应用
  • 引导到自己熟悉的领域（不要被动的提问-回答）

defer 的作用

默认情况下，浏览器在解析 HTML 的过程中，遇到 script 标签不会继续构建 DOM Tree（即阻塞 DOM Tree 的构建），需要等待脚本文件被下载、解析并执行完成

为什么？

  1. 脚本依赖性，依赖某些元素可能会导致错误行为
  2. 同步执行
  3. 顺序依赖
  4. 性能优化，避免重复计算和重新布局

但是现代 Web 框架，脚本文件过大，如果等待脚本文件下载、解析并执行完，影响首屏渲染

script 元素的一个属性，异步加载，按顺序解析执行（会在 DOMContentLoaded 之后才解析执行）

async 的作用

类似 defer，异步加载，立刻解析执行（可能在 DOMContentLoaded 之前或之后）

不依赖 DOM 时使用，常用的就是百度统计

CSS3 新特性

并不存在真正意义上的 CSS3，它不是一个标准

CSS3 不是一个单一的规范，而是一系独立模块的集合，扩展了 CSS 的功能

如：属性选择器、伪类和伪元素，盒阴影、边框圆角，变换，过渡和动画，弹性盒布局，网格布局

Pixel

picture element（pix + el），像素

Physical Pixel

物理像素，显示屏的最小发光单位

Pixels Per Inch（PPI）（物理像素密度，每英寸长度内的物理像素数量，越大越细腻）

Dots Per Inch（DPI，每英寸的打印点数）

Device Independent Pixel（DIP）

独立设备像素，也称逻辑像素，抽象单位，用于在不同分辨率和不同尺寸的显示设备上保持视觉一致性

Device Pixel Ratio（DPR，设备像素密度，定义了物理像素与逻辑像素之间的关系），通过 window.devicePixelRatio 访问，越大越细腻

为什么在移动端中使用 @2x、@3x 的图片

移动端设备中，有非常多高分辨率的设备，为适应不同的像素密度

IOS、Android 自动选择，Web 需要通过媒体查询或 img 标签的 srcset 属性来实现图像的自动选择

1px 问题，如何画出 0.5px 边框

viewport + rem + div（淘宝）

伪类 + transform（京东）

FC（Formatting Context，格式化上下文）

BFC、IFC 即块级格式上下文和行级格式上下文

在标准流中，块级元素的布局属于 BFC，行级元素的布局属于 IFC

BFC 作用

BFC 是用来决定块级盒子是如何布局的，默认情况下，块级元素会使用同一个 BFC 进行布局

  1. 避免外边距合并

  2. 解决浮动高度塌陷

浮动元素的父元素触发 BFC，浮动元素的父元素的高度是 auto

BFC 的高度是 auto 的情况下，如何计算高度？

什么情况会出现 BFC？

html 根元素、浮动、绝对定位（absolute、fixed）、inline-block、表格相关、overflow 除了 visible 之外的值、弹性元素、网格元素、display 值为 flow-root

浏览器兼容

遇到问题查 caniuse

工程化中的配置选项、normalize.css、polyfill、移动端适配

SEO

什么是 SEO

SEO 是搜索引擎优化，全称为 Search Engine Optimization

提高知名度，靠自然搜索结果获取流量（需要了解搜索引擎的自然排名机制）

如何进行 SEO

  1. SSR — 大部分搜索引擎只抓取静态的 HTML，而不会执行 JavaScript，动态生成的内容无法被爬虫索引。比如 Next.js（生态好）、Nuxt.js（性能好）等框架

  2. TDK — title、description、keywords

  3. 语义化标签，图片加 alt — 但是现在在实际工作中很少遵循语义化

  4. robots.txt 文件 — 告诉搜索引擎哪些被爬取哪些不被爬取（create-react-app 创建的项目有 robots.txt）

  5. HTTPS — HTTPS 优先级高于 HTTP

  6. 内部链接和外部链接

浏览器输入一个 URL 并 enter 时，发生了什么

  1. DNS 解析 — 先查缓存：浏览器缓存 -> 操作系统缓存（本地 hosts） -> 路由器缓存 -> ISP（互联网服务提供商）缓存。如果没有缓存：根域名服务器（重定向到顶级域名服务器） -> 顶级域名服务器 -> 权威域名服务器 -> 获得 ip 并层层缓存

  2. 建立 TCP 连接

  3. 发送 HTTP 请求

  4. 服务器处理请求

  5. 服务器返回 HTTP 响应

  6. 浏览器渲染

跨域

浏览器的事件循环

现代浏览器基本都是多进程的，打开一个新的 tab 页面就会开启一个新的进程（防止一个页面卡死造成所有页面无法响应）

JavaScript 是单线程的

浏览器的事件循环是一个在 JavaScript 引擎和渲染引擎之间协调工作的机制，主要任务是监控调用栈和任务队列