大家好，我是lz！这次是一篇记录文(总结的文章会持续更新，直到这章节结束，大家也可以关注我一起学习)

接下来会把浏览器，http 网络相关的内容进行一个汇总。这也是我面试最薄弱的一块。

1.  先从熟悉的开始，http。

1. 通读axios源码 预计2 - 4 天

2. 读源码之前不要盲目，先从会用开始。不会谈什么看源码。就算看了效果不大工欲善其事，必先利其器。

3. axios官网的描述是可以支持node端和浏览器端、使用Promise管理异步，告别传统 callback方式。那其实看到这块描述的时候。

我们可以自己手动写一个 xhr 利用promise封装的形式。

function axios(option){  return new Promise((resolve,reject) => {    const xhr = new XMLHttpRequest()    const async = option.async || false    const type= option.methods || 'GET'    const url = option.url    const data = option.data    const dataType = option.dataType || 'JSON'    xhr.onreadystatechange = () => {      if (xhr.readyState === 4) {        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {          switch (dataType.toUpperCase()) {             case 'JSON':              resolve(JSON.parse(xhr.responseText));              break;            default:              resolve(JSON.parse(xhr.responseText));          }        } else {          reject();        }      }    }    xhr.open(type, url, async)    type === 'POST' && xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')    xhr.send(type === 'GET' ? null : formatDatas(data))  })}

这个比较简单。而axios内部实现功能有很多。大致如下：

1. 支持浏览器和node.js

2. 支持promise

3. 能拦截请求和响应

4. 能转换请求和响应数据

5. 能取消请求

6. 自动转换JSON数据

7. 浏览器支持防止CSRF(跨站请求伪造)

axios的拦截器就是：请求前做一些操作，和响应的时候做操作。例如下面这样：

// 添加请求拦截器 —— 处理请求配置对象axios.interceptors.request.use(function (config) {  config.headers.token = '';  return config;});// 添加响应拦截器 —— 处理响应对象axios.interceptors.response.use(function (data) {  data.data = data.data + '';  return data;});axios({  url: '/hello',  method: 'get',}).then(res =>{  console.log('data: ', res.data)});

其实axios参考的地方有很多，这几天我看完之后会给大家做个大致过程解读和总结。

------------------------------------------------------------------------------------------------------

script 标签的defer 和 async

defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在script元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。

对于不支持的浏览器，如safari，并不会延迟执行，还是会阻塞浏览器渲染。

async

这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。

总结

async 和 defer 虽然都是异步的，也还是有一些差异，使用 async 的脚本文件一旦加载完成，会立即执行，而使用了 defer 的，需要在 DOMContentLoaded 事件之前执行。