持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
浏览器中的缓存有哪些
大部分人都知道的是：Cookie、localStorage、Session
完整的浏览器缓存有五种：Cookie、LocalStorage、SessionStorage、WebSQL 和 IndexedDB。
Cookie、localStorage、SessionStorage 的区别
共同点： 都是保存在浏览器端
不同点： 从三个角度来分析：数据有效期、数据大小、与服务器的通讯方式、作用域
-
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
cookie数据始终在同源的http请求中携带，即便请求不需要cookie也会携带（cookie在浏览器和服务器间来回传递)。
cookie数据不能超过4kb，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
cookie也是在所有同源窗口中都是共享的。
-
sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，浏览器关闭sessionStorage自动删除。
sessionStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
sessionStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。
-
localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，除非手动清除。
localStorage.removeItem('token')localStorage不会自动把数据发给服务器，仅在本地保存。
localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
localStorage 在所有同源窗口中都是共享的
总结
Cookie：有过期时间，长度限制4kb，且每次都会携带在请求头中，不推荐使用
SessionStorage：无过期时间，容量大，但窗口关闭自动删除
LocalStorage：无过期时间，容量大，应用场景很广
浏览器输入URL回车后经过哪些过程
- DNS解析（将域名解析成IP地址）
- 进行TCP连接（三次握手）
- 浏览器发送http请求
- 服务器处理请求并返回http报文
- 浏览器渲染页面
- 断开TCP连接（四次挥手） 如果要在详细一点，就是在DNS解析之前，先读取缓存看看该地址是否记录
谈谈对HTML语义化标签的理解
先来谈谈有语义和无语义。
在HTML中无语义元素如div、span，语义元素就像img、table、nav等。试想一下，如果一个页面都是div和span,那看代码维护代码的人是不是会心态炸裂，显而易见，HTML语义化就是使用合适的标签元素去开发，其次，语义化便于开发人员阅读代码，整个页面内容结构看起来也会更好，所以HTML语义化有以下几点好处：
- 便于开发
- 便于SEO优化 — 比起使用非语义化的标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
- 无CSS时也能进行网页阅读
- 更适配移动端— 语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发。
