fetch 与 axios 的定位认识。fetch 是浏览器提供的 api，axios 是社区封装的一个组件。

fetch 是一个低层次的 API，你可以把它考虑成原生的 XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，XMLHttpRequest一直是 web 开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及 Ajax 技术的时候，通常意思就是基于XMLHttpRequest的 Ajax，它是一种能够有效改进页面通信的技术。 Ajax 的兴起是由于 Google 的 Gmail 所带动的，随后被广泛的应用到众多的 Web 产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequest作为了当前 Web 应用与远程资源进行通信的基础。 而本文将要介绍的内容则是XMLHttpRequest的最新替代技术——Fetch API， 它是 W3C 的正式标准，本文将会介绍 Fetch API 的相关知识，以及探讨它所能使用的场景和能解决的问题。

初始阶段 -> 加载优化

1. 首页加载慢的优化
2. 优化图片的做法
3. 实现 Webpack 打包优化
4. 实现 CDN 加速

在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。下面我们首先简单了解一下什么是 XSS 和 CSRF 。

XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。XSS 攻击可以分为 3 类：反射型（非持久型）、存储型（持久型）、基于 DOM。

本题主要考察多页应用中各个页签之间数据交互的技术手段。实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储的方式主要用本地存储方式解决。即调用 localStorage、Cookie 等本地存储方式。服务器方式主要使用 websocket 技术使多页签都监听服务器推送事件来获得其他页签发送的数据。

浏览器存储：

第一种——调用 localStorage

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。 即可得到 localstorge 存储的值，实现不同标签页之间的通信。

Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。

浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。

在具体了解 HTTP 缓存之前先来明确几个术语：

• 缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。
• 过期内容：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。
• 验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。
• 失效：失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。

当我们在 web 浏览器的地址栏中输入：www.baidu.com，具体发生了什么？

1. 对www.baidu.com这个网址进行 DNS 域名解析，得到对应的 IP 地址
2. 根据这个 IP，找到对应的服务器，发起 TCP 的三次握手
3. 建立 TCP 连接后发起 HTTP 请求
4. 服务器响应 HTTP 请求，浏览器得到 html 代码
5. 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代码，才能去找这些资源）
6. 浏览器对页面进行渲染呈现给用户
7. 服务器关闭 TCP 连接

如果实现单行文本的溢出显示省略号同学们应该都知道用 text-overflow:ellipsis 属性来，当然还需要加宽度 width 属来兼容部分浏览。

实现方法：

1
2
3

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图：