https://juejin.im/post/5dba91e4518825647e4ef18b

整体步骤

1、URL解析
2、DNS域名解析
3、浏览器主机根据ip地址与服务器建立TCP连接
4、发送HTTP请求
5、服务器处理请求
6、断开TCP连接
7、浏览器解析文件
8、浏览器布局渲染

1、URL解析

一个URL包括协议，网络地址（域名 + 端口），资源路径

协议：最常用的比如HTTP（超文本传输协议）FTP（文件传输协议）

网络地址：可以是域名或者ip地址，包括端口号，如果没有默认为80

如果是不合法的地址，会转给默认的搜索引擎,例如如果你正在使用chrome，可以在url输入框输入你想要搜索的内容，然后搜索引擎会根据关键字进行搜索。

2、DNS域名解析

例如：baidu.com就是域名

1）先到各种缓存信息中查找

先到浏览器缓存记录中查找 - 浏览器会缓存DNS一段时间（浏览器缓存）

如果浏览器中没有找到，浏览器会有一个系统调用，获得系统缓存中的记录（系统缓存）

接着将请求发给路由器，路由器一般也有自己的DNS缓存（路由器缓存）

2）DNS服务器查找

没有则发送请求到本地域名服务器，每一个本地域名服务器都维护一个高速缓存，存放最近用过的域名及其IP地址.如果还没有则发出递归查询（本地服务器请求比他高一级的服务器，如此递归直到根域名服务器，肯定能找到这个服务器的IP地址）通过这个IP可以找到客户端到服务器端的唯一路径.

总结起来就是：
浏览器缓存 => 系统缓存 => 路由器缓存 =>ISP(运营商)DNS缓存 => 根域名服务器 => 顶级域名服务器 => 主域名服务器的顺序

3、浏览器主机根据ip地址与服务器建立TCP连接

浏览器向服务器端发送SYN连接请求，经过服务器与浏览器三次报文的交互连接建立完成，就可以发送数据了。

找到了正确的IP地址以后就要开始建立连接了，建立连接的过程一般会使用TCP协议，通过三次握手建立连接。

TCP 三次握手

客户端发出建立连接的请求。数据包携带有SYN。

如果服务端有开放的端口，可以接受并建立连接，那么服务端会返回SYN + ACK,告诉客户端我可以接受你的请求。

客户端收到服务端的回应，发送ACK给服务端。 连接建立。

4、发送HTTP请求

与服务器建立了连接后，就可以向服务器发起请求了

根据HTTP协议的要求，组织一个HTTP数据包，向服务器发送HTTP请求，HTTP的请求报头有请求行和请求报头，空行，请求体。

在浏览器中查看报文首部:

请求报文主要包括

1）请求行:http方法、页面地址、协议、版本

2）请求头:key、value告诉服务端需要内容，注意什么类型

3）空行:告诉服务端请求头已经结束

4）请求体

5、服务器处理请求

服务器收到请求并响应，生成一个HTTP响应报文，通过TCP协议发送给浏览器主机

通过HTTP请求服务后，服务器会向浏览器返回一个应答信息 - HTTP响应，

在HTTP里，有请求就会有响应，哪怕是错误信息。这里我们同样看下响应报文的组成结构：

在响应结果中都会有个一个HTTP状态码，比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常，并能了解具体的错误。

状态码由3位数字和原因短语组成。根据首位数字，状态码可以分为五类：

6、断开TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

1) 客户端发起中断请求，发送FIN到服务端
2) 服务端收到请求，可能数据还没有发完。这个时候不会关闭socket，而是回复ACK，告诉客户端知道了
3) 客户端进入Fin_Wait状态，继续等待服务端端的FIN报文。服务端端发送完毕后，会向客户端发送FIN
4) 客户端客服端收到后就回复ACK，并关闭连接

上图可以这么理解：

• 客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”
• 服务端：“收到，我看看我这边有木有数据了。”
• 服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”
• 客户端：“好嘞。”

7、浏览器解析文件

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。
要注意的是，浏览器的解析过程并非是串连进行的，比如在解析CSS的同时，可以继续加载解析HTML，但在解析执行JS脚本时，会停止解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题

8、浏览器布局渲染

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：repaint(重绘)和reflow(回流)。

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。

所以我们应该尽量减少reflow和repaint,良好的css规范会减少这种操作, CSS书写规范和顺序

最后浏览器绘制各个节点，将页面展示给用户。

致此输入url到展现页面的一个周期就完成了。

参考：

https://juejin.im/post/5d5a622ef265da03f47c20e9

https://juejin.im/post/5d552252f265da03a14852cc

线程和进程的区别是什么

进程是资源分配的最小单位，线程是CPU调度的最小单位

做个简单的比喻：进程=火车，线程=车厢

• 线程在进程下行进（单纯的车厢无法运行）
• 一个进程可以包含多个线程（一辆火车可以有多个车厢）
• 不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）
• 同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）
• 进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）
• 进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）
• 进程可以拓展到多机，进程最多适合多核（不同火车可以开在多个轨道上，同一火车的车厢不能在行进的不同的轨道上）
• 进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。（比如火车上的洗手间）－”互斥锁”
• 进程使用的内存地址可以限定使用量（比如火车上的餐厅，最多只允许多少人进入，如果满了需要在门口等，等有人出来了才能进去）－“信号量”

done()

Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

1
2
3
4
5

asyncFunc()
    .then(f1)
    .catch(r1)
    .then(f2)
    .done();

流的概念和作用

流是一组有顺序的，有起点和终点的字节集合，是对数据传输的总称或抽象。即数据在两设备间的传输称为流，流的本质是数据传输，根据数据传输特性将流抽象为各种类，方便更直观的进行数据操作。

Crypto概述

互联网时代，网络上的数据量每天都在以惊人的速度增长。同时，各类网络安全问题层出不穷。在信息安全重要性日益凸显的今天，作为一名开发者，需要加强对安全的认识，并通过技术手段增强服务的安全性。

crypto模块是nodejs的核心模块之一，它提供了安全相关的功能，如摘要运算、加密、电子签名等。很多初学者对着长长的API列表，不知如何上手，因此它背后涉及了大量安全领域的知识。

什么是PWA

PWA的中文名叫做渐进式网页应用，早在2014年， W3C 公布过 Service Worker 的相关草案，但是其在生产环境被 Chrome 支持是在 2015 年。因此，如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间，那就应该是 2015 年。

自 2015 年以来，PWA 相关的技术不断升级优化，在用户体验和用户留存两方面都提供了非常好的解决方案。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。

需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。

尽可能多的写出数组去重的方法。

一、利用ES6 Set去重（ES6中最常用）

1
2
3
4
5
6

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

一、什么是Service Worker

service worker是一个浏览器背后运行的脚步，独立于web页面，为无需一个页面或用户交互的功能打开了大门。今日，它包含了推送通知和背景异步（push notifications and background sync）的功能。将来，service worker将支持包括periodic sync or geofencing的功能。 本教程中讨论的核心功能是拦截和处理网络请求的能力，包括以编程方式管理响应缓存。

分类

事件修饰符、按键修饰符、键值修饰符

事件修饰符

.stop ：阻止事件冒泡,是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent ：阻止默认事件，提交事件不再重载页面
.capture ：添加事件侦听器时使用事件捕获模式 （若有多个该修饰符的元素则由外而内触发）
.self ：当事件在该元素本身（而不是子元素）触发时触发回调(即直接作用在该元素上的事件才可以执行)
.once ：事件只能触发一次
.native 我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的