前端开发必备知识点杂谈

一、浏览器相关

1、输入 URL 回车后经过哪些过程？

①解析 URL，判断是否命中缓存（DNS prefetch）
②访问 DNS 服务器，将域名解析获取 IP 地址
③三次握手建立 TCP 连接
④发送 HTTP 请求
⑤服务器处理请求并返回 HTTP 报文
⑥浏览器解析渲染页面
⑦断开连接：TCP 四次挥手

2、跨域问题处理

①JSONP（利用 script 标签，前端需要定义一个回调函数接收数据，兼容性好，但只能发送 get 请求）
②CORS（与服务端配置相关）
③PostMessage、WebSocket（HTML5 新特性）
④Nginx 反向代理（偏运维知识）
⑤img 标签（知识广度向，与 script 一样可以跨域）
⑥另外本地工程化项目可以配置 Proxy 代理来跨域请求后端（Webpack、Vite）

3、移动端屏幕适配

①利用 meta 标签，viewport 缩放（页面拉伸模糊）
②响应式布局（css 媒体查询@media，通过这个方式可以在不同分辨率下实现不同样式）
③rem，%，vh vw 等弹性单位（可通过 postcss 插件自动转化 px 单位）

关于postcss插件，这里涉及到了一个比较骚气的操作。Postcss插件影响下如果一定要使用px，如何让该单位不转换？
这里有两种方式可以处理。一种是把那部分 px 写成大写 PX（但代码格式化可能会fix掉），另外一种是通过 JS 写入样式（额外触发回流重绘，但是稳定）。

4、数据存储

一个老生常谈的问题，关于前端的数据存储的知识点。

• Cookie：有过期时间，长度限制4kb，且每次都会携带在请求头中，不推荐使用
• SessionStorage：无过期时间，容量大，但窗口关闭自动删除
• LocalStorage：无过期时间，容量大，应用场景很广
• IndexedDB：存储更大量的结构化数据，浏览器本身不限制其容量

5、浏览器缓存</