前端基础篇（二）

1.什么是websocket

WebSocket 是 HTML5 中的协议，支持持久连续，http 协议不支持持久性连接。Http1.0 和 HTTP1.1 都不支持持久性的链接，HTTP1.1 中的 keep-alive，将多个 http 请求合并为一个。

2.几个很实用的BOM属性对象方法

什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？

(1)location 对象 location.href-- 返回或设置当前文档的 URL location.search -- 返回 URL 中的查询字符串部分。例如 www.dreamdu.com/dreamdu.php… 返回包括(?)后面的内容?id=5&name=dreamdu location.hash -- 返回 URL#后面的内容，如果没有#，返回空 location.host -- 返回 URL 中的域名部分，例如 www.dreamdu.com location.hostname -- 返回 URL 中的主域名部分，例如 dreamdu.com location.pathname -- 返回 URL 的域名后的部分。例如 www.dreamdu.com/xhtml/ 返回/xhtml/ location.port -- 返回 URL 中的端口部分。例如 www.dreamdu.com:8080/xhtml/ 返回 8080 location.protocol -- 返回 URL 中的协议部分。例如 www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容 http: location.assign -- 设置当前文档的URL location.replace() -- 设置当前文档的 URL，并且在 history 对象的地址列表中移除这个 URL location.replace(url); location.reload() -- 重载当前页面 (2)history 对象 history.go() -- 前进或后退指定的页面数 history.go(num); history.back() -- 后退一页 history.forward() -- 前进一页 (3)Navigator 对象 navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串) navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

3.fetch 发送 2 次请求的原因

其实就是在跨域请求时，编写了带预检请求的代码导致多了一次名为OPTIONS的尝试请求。预检请求会检测服务器是否支持我们的真实请求所需要的跨域资源，唯有资源满足条件才会发送真实的请求。

4.Cookie、sessionStorage、localStorage 的区别

共同点：都是保存在浏览器端，并且是同源的 Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。localStore和cookie在所有同源窗口中都是共享的。 cookie的作用：保存用户登录状态：例如将一个id存储于一个cookie内，这样下次访问时不需要重新登录了；跟踪用户行为：例如一个天气预报网站，能够根据用户上次的选择地区显示当地的天气情况。

5.iframe是什么？有什么缺点？

定义：iframe 元素会创建包含另一个文档的内联框架缺点：会阻塞主页面的 onload 事件；搜索引擎无法解读这种页面，不利于 SEO

6.Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype 声明于文档最前面，告诉浏览器用什么文档类型和规范(HTML或XHTML)来解析文档，这里有两种模式，严格模式和混杂模式。严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

7.Cookie如何防范XSS攻击

XSS即跨站脚本攻击，是攻击者在返回的HTML中嵌入JavaScript脚本。在HTTP头部上配置，set-cookie有两个属性可以防止XSS攻击：httponly：这个属性可禁止JavaScript访问Cookie，故可以保护Cookie不被嵌入的恶意代码所获取。secure：这个属性告诉客户端浏览器仅当在https请求时发送Cookie。 1.session存储于服务器，也就是后端那；而sessionStorage存储于本地，也就是你一按F12就能看到。 2.session主要的作用是维持会话状态的key，而sessionStorage则是存储会话期间的数据。

8.讲讲 viewport 和移动端布局

响应式布局的常用解决方案对比

9.Cookie和session的区别

cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗考虑到安全应当使用 session。
session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用 COOKIE。
单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

10.常见请求头及含义？

Accept:text/html,image/*[告诉服务器，浏览器可以接受文本，网页图片] Accept-Charaset:ISO-8859-1 [接受字符编码：iso-8859-1] Accept-Encoding:gzip,compress[可以接受 gzip,compress压缩后数据] Accept-Language:zh-cn[浏览器支持的语言] Host:localhost:8080[浏览器要找的主机] IF-MODIFIED-Since:Tue,11Jul 2000 18:23:51[告诉服务器这缓存中有这个文件,该文件的时间是...] Referer:http://localhost:8080/test/abc.html[告诉服务器来自哪里] User-Agent:Nozilla/4.0(Com...)[告诉服务器浏览器内核] Cookie：[HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。] Connection:close/Keep-Alive [保持链接，发完数据后，不关闭链接]

11.前端优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline

WebP是一种图像格式，WebP使用了无损压缩和有损压缩两种方式。

CDN（Content Delivery Network）是一种分布式网络架构，用于提供高效的内容分发服务。CDN通过将内容缓存在位于全球各地的边缘节点上，使用户能够从最接近他们所在地理位置的节点获取内容，从而减少了内容传输的延迟和带宽消耗。

理解CDN分发可以从以下几个方面入手：

内容缓存：CDN会将网站或应用的静态内容（例如图片、脚本、样式表等）复制并存储到位于全球各地的服务器节点上。当用户请求访问该内容时，CDN会就近选择最接近用户的节点，从缓存中直接返回内容，减少了从源服务器加载内容的时间和成本。

就近访问：CDN的节点通常分布在各个地理位置，覆盖范围广泛。当用户请求访问网站或应用时，CDN会通过智能路由技术将用户的请求定向到距离最近的节点，从而大大减少了数据传输的延迟。这样，用户可以更快地加载内容，提升了用户体验。

负载均衡：CDN采用负载均衡技术，将用户的请求分散到多个节点上进行处理。这样可以避免单一服务器过载，提高整个系统的可用性和稳定性。CDN会根据节点的负载情况、网络状况等因素动态选择最优的节点来处理用户请求。

安全性提升：CDN还可以提供一些安全功能，如防止DDoS攻击、减轻服务器负载等。CDN会在边缘节点上实施一些防护措施，过滤掉恶意流量，从而确保源服务器的正常运行，并提供更高的安全性。

总的来说，CDN分发通过利用全球分布的节点、缓存内容、就近访问和负载均衡等技术手段，提供了更快速、可靠和安全的内容分发服务。它对于减少延迟、降低带宽消耗、提升用户体验以及增强网站或应用的可靠性等方面都具有重要的作用。

离线缓存 manifest 和离线数据缓存 localStorage 都是 HTML5 提供的用于实现离线访问的技术，但它们在实现机制和应用场景上有一些区别。

区别：存储方式：离线缓存 manifest 主要用于缓存网页应用程序的静态资源，如 HTML、CSS、JavaScript 文件等。它通过在 manifest 文件中列出需要缓存的文件来实现。而 localStorage 则是一种存储键值对数据的机制，用于在客户端持久存储字符串数据。

存储内容：离线缓存 manifest 主要用于存储网页应用程序的代码和资源文件，以便在离线状态下能够继续访问和使用。它可以缓存应用程序的整个页面，并提供离线访问能力。而 localStorage 主要用于存储应用程序运行时的动态数据，如用户配置信息、临时数据等。

存储位置：离线缓存 manifest 文件被下载后会存储在浏览器的缓存中，而离线数据缓存 localStorage 数据存储在浏览器的本地持久化存储中。

联系：离线支持：离线缓存 manifest 和 localStorage 都提供了离线访问的能力。离线缓存 manifest 可以使网页应用程序在离线状态下继续访问静态资源，而 localStorage 可以使网页应用程序在离线状态下继续访问之前存储的数据。

数据持久性：离线缓存 manifest 和 localStorage 都可以实现数据的持久性存储。离线缓存 manifest 通过浏览器的缓存来持久存储静态资源，而 localStorage 则直接将数据存储在用户的本地磁盘上，即使用户关闭浏览器，数据仍然可用。

提升性能：离线缓存 manifest 和 localStorage 都可以提升网页应用程序的性能和用户体验。离线缓存 manifest 可以加速网页加载速度，并在离线状态下提供快速访问。而 localStorage 可以减少与服务器的交互，从而提高响应速度。

今天的总结就到这里啦！感谢阅读！