【学习打卡】第6天 前端面试第六讲

课程名称：一天时间迅速准备前端面试 快速构建初级前端知识体系

课程章节：JS DOM and BOM

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. JS-Web-API-Ajax

2. JavaScript-Web-API-存储
   

课程收获：

HTML 语义化的好处：

1. 可以增强代码的可读性

2. 让搜索引擎更容易读懂（SEO）

块状元素和内联元素：

1. 块状元素：div、h1-h5、table、ul、ol、p 等

2. 内联元素：span、img、input、button 等

盒模型宽度计算：

1. offsetWidth：（内容宽度 + 内边距 + 边框），无外边距

2. 示例：offsetWidth：100 + 10 + 10 + 1 + 1 = 122px

xhr.readyState 不同值的不同意思：

• 0 - UNSET 尚未调用 open 方法

• 1 - OPENED open 方法已被调用

• 2 - HEADERS_RECEIVED send 方法已被调用，header 已被接收

• 3 - LOADING 下载中，responseText 已有部分内容

• 4 - DONE 下载完成

xhr.status 不同值的不同意思：

• 2xx - 表示成功处理请求，如 200

• 3xx - 需要重定向，浏览器直接跳转，如 301（永久重定向） 302（临时重定向） 304（资源未改变）

• 4xx - 客户端请求错误，如 404 403

• 5xx - 服务端错误

同源策略

• ajax 请求时，浏览器要求当前网页和 server 必须同源（安全）

• 同源：协议、域名、端口，三者必须一致

• 不同源 => 前端：http://a.com:8080/ ；server：https://b.com/api/xxx

跨域

• 所有的跨域，都必须经过 server 端允许和配合

• 未经 server 端允许就实现跨域，说明浏览器有漏洞、危险信号

cookie

• 本身用于浏览器和 server 通讯

• 被 “借用” 到本地存储来

• 可用 document.cookie = '...' 来修改

cookie 和 localStorage sessionStorage 区别

• 容量：4KB VS 5MB

• API 易用性：不易用 VS 易用

• 是否随着 http 请求发送出去：发送 VS 不发送

localStorage 和 sessionStorage 区别

• localStorage 数据会永久存储，除非手动删除

• sessionStorage 数据只存在于当前会话，浏览器关闭则清空

• 一般用 localStorage 会更多一些

课程学习截图：