首先浏览器的browser进程会判断是search还是url。如果是search就会跳到默认的搜索引擎。
如果是url的话就会通过dns查找对应的ip地址。首先会通过浏览器缓存查找，然后找电脑host里面的缓存，然后通过远程服务器dns查找。
通过ip找到对应的服务器，然后浏览器和服务器之间进行三次握手，建立TCP连接。此时如果是https的话，还会建立TLS连接以及协商加密算法。（HTTP、HTTPS, 加密）
建立连接之后，浏览器开始发送请求获取文件。此时还会出现一种缓存的现象，建立连接之后是走缓存还是重新获取，需要看后台设置。（缓存）
获取文件之后，通过文件类型判断是否为html。如果为.zip就进行下载
如果是html就开始构建DOM树。对于html文件，我们一般是把css放头部，js放尾部。这样的原因是渲染树是由css树和dom树组成的，css放头部的话，css树和dom树可以同步进行。js放尾部的话是因为js执行是阻塞的，执行js的时候会阻塞dom树的生成。所以我们一般把dom树放在尾部，当然也可以通过async或者defer来实现Js的非阻塞。（DOM树构建）
css树和渲染树都生成之后，开始构建布局树，样式计算完毕之后就开始构建布局树，主要是为dom树上的节点找到对应位置已经display为none，position的一些设置
布局树构建完成之后开始构建分层树。主要是为了满足滚动条，z-index，position这些复杂的分层操作，也可以通过will-change属性来独立出单独的层。但是如果层太多，合成比较耗时，所以will-change需要慎用
讲分层树图块化，利用光栅找到视图窗口下的对应的位图，主要是因为一个页面可能有几屏那么长，一下子渲染出来浪费（光栅和GPU加速）
最终渲染进程会将整个页面渲染出来，在渲染的过程中还会出现repaint或者reflow（重排和重绘）

HTTP、HTTPS、加密

HTTP：是明文传输的，不安全
HTTPS：是通过TLS和加密算法传输的，安全性高
加密分为对称加密和非对称加密

https就是基于三次握手之后加了一层SSL/TSL套接字加密。
首先浏览器发送加密算法到服务器
服务器接收到手段的加密算法，将自己的公钥用证书加密成一个密文发给浏览器
浏览器用内置的证书公钥将密文解密，得到服务端的公钥。
然后浏览器生成一个随机密码，再通过服务器的公钥加密程密文发送给服务器
服务器用私钥将密文解密出来，得到浏览器端的随机密码
之后浏览器和服务器都使用这一个随机密码对数据进行对称加密传输。

总结就是https是通过非对称加密算法传输一个随机密码，然后通过随机密码生成一对公钥和私钥。然后通过这一对公钥和密钥对数据进行对称加密传输。

中间人劫持
对于浏览器的话，一般是内置了一些CA证书的，所以可以通过CA证书来做一些校验工作。
但是对于一些app的话，没有做CA证书的校验，那中间代理服务器就可以伪造证书，既充当服务器的角色给浏览器发送数据，又充当浏览器的角色给服务器发送数据。

缓存

缓存分为强缓存和协商缓存
协商缓存关键字： if-modified-size/last-modified 和ETag/if-none-match

浏览器第一次发请求的时候，服务器返回一个Etag或者if-modified-since
第二次发请求的时候，浏览器header带上if-none-match或者last-modified，服务器来判断是否需要缓存

强缓存： cache-control和expries
如果命中强缓存，浏览器不会向后台发请求

cache-control: max-age=xxxx，public
客户端和代理服务器都可以缓存该资源；
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求
cache-control: max-age=xxxx，private
只让客户端可以缓存该资源；代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200
cache-control: max-age=xxxx，immutable
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求
cache-control: no-cache
跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。
cache-control: no-store
不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

重排和重绘

重排是更改了布局或者大小会触发重排，重排会重新生成DOM树和CSS树然后进行一系列动作，所以比较耗性能
重绘是修改了color，背景之类的，只会触发css树重新计算

优化

请求优化

数量优化
将小图片打包成base64
利用雪碧图融合多个小图片，或者使用SVG
利用缓存
时间优化
压缩js,css,html等文件，减少文件体积
利用webpack打包，进行懒加载
适当使用cdn能够更快的获取文件

webpack优化

基本配置优化
添加extensions,对文件后缀进行扩展，如果项目是typescript，可以设置成
alias: 用来映射路径，减少打包时间
extensions: 目的是让webpack能够快速解析符合条件的文件

resolve: {
    extensions: [".ts",".tsx",".js"],
  alias: {
      Components: path.resolve(__dirname,"./src")
  }
}

noParse: 表示不需要解析的文件，减少不必要的导报

module: {
    noParse: [/node_modules/]
}

loader配置里面添加 exculde,cache-loader

｛
    test:/\.js$/,
  loader: ["cache-laoder","babel-loader"],
  exclude: path.resolve(__dirname,"node_modules")
｝

devTool设置
cheap-source-map比source-map快很对

.eslintingore配置

前端知识积累

url输入发生了什么

HTTP、HTTPS、加密

缓存

重排和重绘

优化

请求优化

webpack优化