📝说说浏览器的缓存机制
1 缓存过程简要分析 浏览器使用缓存中的数据与将数据存入缓存中的大致流程为： 浏览器每次发起请求时，首先在浏览器缓存中查找是否存在要请求的资源及其缓存标识（浏览器缓存资源时，通常会附带相应的缓存标识）。 如果存在缓存资源及其缓存标识，则浏览器根据缓存控制策略（例如 Cache-Control 头信息）确定是否可以使用该缓存资源。 如果根据缓存控制策略不能使用缓存资源，浏览器会向服务器请求该资源。同时，如果服务器在响应中指示可以缓存该资源，则浏览器会将响应资源及其缓存标识存入浏览器缓存中。 2 浏览器的缓存策略 浏览器通过强制缓存和协商缓存这两种策略实现资源的缓存。 2.1 强制缓存 解释：当浏览器向服务器发送请求时，服务器返回资源的同时，会使用 Expires 或 Cache-Control 响应头来控制是否缓存对应的资源。其中 Expires 的优先级 < Cache-Control ...
📝谈谈你对 JS 原型链的理解
JavaScript 是一种基于原型的语言，即每个对象都拥有一个原型对象，对象通过其原型对象继承方法和属性。原型对象也有其原型对象，依次类推，就构成了原型链。当对象访问一个属性或方法后，首先需要在其本身上查找，查找不到才去其原型对象中查找，查找不到再去其原型对象的原型对象中查找，···，一直到顶层原型，即 Object 的原型对象身上去，Object 的原型对象的原型对象则为 null。这就是原型链实现继承的原理。 原型对象分为显式原型对象和隐式原型对象。函数的原型对象是显式原型对象，通过 .prototype 的方式可以访问到其原型对象。实例对象的原型对象是隐式原型对象，通过 [[Prototype]] 或 .__proto__ 的方式可以访问到其原型对象。 这里的函数指的是构造函数，class 语法的类名也可以作为这里的函数看待；这里的实例对象是由对应的函数通过 new 关键字创建的，其原型对象是一个私有属性，__proto__...
📝说一下 http 报文都有哪些东西？
HTTP 是传输超文本（实际上除了 HTML，可以传输任何类型的文件，如视频、音频、文本等）的协议，是一组用于浏览器-服务器之间数据传输的规则。 HTTP 位于 OSI 七层模型的顶层（应用层），应用程序可以在其中交换数据。HTTP 是 TCP/ICP 协议族的一部分。 HTTPS 是另一种传输协议，这里的 S 表示安全（Secure）。其与 HTTP 的区别在于，消息在传递前会被加密。 浏览器和服务器之间通过 HTTP 报文进行通信。浏览器向服务器发送请求报文，服务器返回给浏览器响应报文。解释如下。 一. 请求报文 报文结构 请求报文（request）分为四部分：请求行（request line）、请求头（request headers）、空行（blank line）、请求体（request body） 请求行：任何一个 HTTP 请求的第一行都称之为请求行，包含三部分内容：请求方法（method）、请求路径（request url）、HTTP 版本（HTTP...
📝说明 1px、1em、1rem、1vw、1vh 的区别
px 是绝对单位，em、rem、vw、vh 是相对单位 1px 表示 1 像素；1em 相当于父元素字体大小；1rem 相当于根元素（html）字体大小；1vw 相当于视口宽度的 1%；1vh 相当于视口高度的 1%。 单位（units） px em rem vw vh 相对/绝对单位 绝对 相对 相对 相对 相对 含义 像素 相对于父元素字体大小（倍数） 相对于根元素字体大小（倍数） 相对于视口的宽度（百分之 1 的倍数） 相对于视口的高度（百分之 1 的倍数） 举例 - 父元素字体大小 16px，则子元素中 1em=16px 根元素字体大小 16px，则当前元素中 1rem=16px 视口宽度为 1000px，则 1vw=10px 视口高度为 500px，则 1vh=5px 通常来说，html 元素是根元素 1 vw 相当于视口宽度的 1%；1 vh 相当于视口高度的 1%
📝谈谈你对观察者和订阅发布的理解
1. 观察者设计模式 场景引入之杂志订阅：小王想要购买一本尚未出版的杂志，他向出版社预订该杂志并提供联系方式，一旦该杂志出版，出版社就会根据小王预留的联系方式通知他可以来购买了。这个简单的场景就是一个简单的观察者模式，可以将小王扩充到任意数量的消费者，一旦某个杂志出版了，出版社就可以根据维护的订阅该杂志的消费者列表进行逐一通知。 观察者模式的解释：观察者模式定义了一种一对多的依赖关系，使得当一个对象（主题，被观察者，Subject）的状态改变时，所有依赖它的对象（观察者，Observer）都会得到通知并自动更新。观察者模式中，观察者和被观察者的关系是通过被观察者建立的。 被观察者身上必须有三个方法：添加观察者（addObserver）、删除观察者（delObserver）、通知观察者（notifyObserver）。被观察者维护一个观察者列表，使用其自身的 addObserver 和 delObserver 方法添加或删除观察者。 观察者身上必须有一个方法：更新（update）。一旦被观察者的状态改变，就会调用 notifyObserver...
📝Cookies 和 WebStorage
Cookies 和 WebStorage（包括 LocalStorage、SessionStorage）是三种常见的将数据存储在客户端的方式。在任意一个网页中打开开发者工具（F12），我们可以在 Application 选项卡的中看到 LocalStorage、SessionStorage、Cookies ——这些存储于当前域名（Current Domain）下的数据。下边我们对这三种数据存储方式进行介绍，并比较分析他们的共性与区别。 一、Cookies 1.1 简要介绍 Cookies 有一系列别名，如 HTTP Cookies、Internet Cookies、Browser Cookies、Web Cookies，这些名词指向的都是同一个含义。 Cookies 是服务器发送给浏览器的少量数据。同时，服务器端存储着该数据以及对应的用户 ID。通过 Cookie 请求头，每次浏览器发送 HTTP 请求时， Cookies 都会被自动发送给服务端。 Cookies 是以键值对（key-value）形式存储的数据。我们也可以设置 Cookies 的过期时间（expiry...
📝CSS 怎样实现动画？
（有哪些）CSS 主要通过**过渡（transitions）和关键帧（keyframes）**实现动画。 （过渡是什么）过渡指的是元素**从一种状态（样式）转变为另一种状态（样式）**的动画效果。过渡经常配合 :hover 或 JS 事件使用（触发元素变为另一种状态）。 （过渡怎么实现）通过设置元素 transition 样式，从而设置元素的过渡效果。当元素某些样式变化后，这种变化会根据预先定义的 transition 样式中规定的过渡效果进行变换（核心！！！）。 （过渡的语法简单说明） 1234567.element{ transition: property duration timing-function delay; /* 过渡属性：none(默认)、all(最常用)、特定属性名(多个属性名以 , 分割) */ /* 持续时间：<number>s/ms(接收两种单位，默认值为 0)(如果给多个属性指定，则多个时间以 , 分割) */ /* 过渡速度曲线: ....... */ /*...
📝你怎么理解 HTML 语义化？语义化有什么优点？
你怎么理解 HTML 语义化？ （语义化是什么）HTML 语义化要求开发者尽量使用有意义的标签来组织网页，而不是像 div、span 等无意义的标签，这里的意义就是语义。 （语义化的作用）通过使用语义化标签，开发者在编写网页的同时，还传达了不同内容的特殊含义。 （语义化举例）如 header 常用于定义头部/顶部、nav 常用于定义网页导航、article 常用于定义一篇文章、section 常用于定义一节或一部分内容、aside 常用于定义侧边栏、footer 常用于定义底部、main 常用于定义主体等等。 语义化有什么优点？ （对于开发者）语义化可以使代码结构清晰，从而可以使人快速理解网页中每个部分的内容。既提高了可读性，又增强了可维护性。 （对于 SEO）语义化可以让搜索引擎更好地理解网页内容，从而有利于提高网页在搜索结果中的排名。比如，同样的一篇文章，组织在 article 标签中，可以让搜索引擎知道这是一篇文章；如果组织在 div 中，则不利于搜索引擎的判断。 （对于残障人士）与对 SEO...
📝计算机网络中的七四五是什么？
计算机网络中说的七四五是指：OSI 七层模型、TCP/IP 四层模型、OSI 与 TCP/IP 的综合五层模型 OSI 七层模型 OSI 将计算机网络分为了七层，每一层抽象底层的内容，并遵守一定的规则。基于 OSI 模型，网络中的节点（物理设备）得以进行通信。 同一层中的各个节点层次结构和功能相同。 同一节点相邻层通过接口通信。 每一层使用底一层提供的服务，并向顶一层提供服务。 同一层中的不同节点按照协议实现对等层的通信。 层（从底层到顶层） 数据单元 作用 可能会出现的问题 物理层 比特 通过网线、电缆等方式将设备物理连接 电缆失效（电线损坏、连接器村换等）网络硬件设备故障（电路损坏） 数据链路层 帧，包括帧头（源节点和目的节点的 MAC...
📝display=none 和 visibility=hidden 的共性与区别
共性：display: none 和 visibility: hidden 都是用于设置元素可见性的样式 区别 display: none 使元素及其占位完全消失：元素及其所有子元素将从文档流和布局中完全消失，就像它们不存在一样。 触发回流：这种改变会触发页面上的布局重建，因为其他元素会填补被移除元素的空间。 display: hidden 修饰的元素不可见，但还在文档流中。元素的隐藏可以理解为加上了一层使元素不可见的遮罩，不会触发元\素回流，页面布局不变。 使元素不可见，但保留其占位：元素仍然占据文档流中的空间，但不会被显示。 不触发回流：这意味着其他元素会围绕隐藏的元素布局，不会发生重建布局的情况。 代码效果演示（对 Parent 元素上样式） 页面原始布局 display: none 之后的布局 visibility: hidden 之后的布局