1. 浏览器中输入网址到显示内容经历的步骤

  1. URL地址解析
  2. DNS域名解析
  3. 三次握手和服务器建立tcp连接
  4. 把客户端信息传递给服务器，发送http/https请求
  5. 服务器处理请求
  6. 客户端渲染服务器返回的内容
  7. 四次挥手和服务器断开tcp连接

2. URL的组成部分

2.1 URI/URL/URN

  • URL(Uniform Resource Locator):统一资源定位符，根据这个地址能找到对应的资源
  • URN(Uniform Resource Name):同一资源名称，一般指国际上通用的一些名字
  • URI(Uniform Resource Identifier):统一资源标识符，URL和URN是URI的子集

2.2 协议

  • http：超文本传输协议，除了传递文本，还可以传递媒体资源文件或者流文件及xml格式数据
  • https：更加安全的http，一般涉及支付的网站都要采用https协议（s指的是ssl加密传输）
    ftp：文件传输协议（一般应用于本地文件上传服务器）

2.4 端口

端口号取值范围是0~65535，用端口号区分同一台服务器不同的项目。

  • http默认端口号80
  • https默认端口号443
  • ftp默认端口号21

2.5 请求资源路径名称

默认的路径名称，服务器会找默认的资源，一般默认资源名称是index.html，服务器是可以配置的。
有些情况会采用url重写，为了增加SEO搜索引擎优化，动态的网站一般不能被搜索引擎收录，所以要把动态网址静态化，此时需要重写url

2.6HASH值

也可以充当信息传输的方式
锚点定位
基于HASH实现路由管控

2.7url编码解析方式

encodeURI/decodeURI：请求的地址中如果存在非有效的UNICODE编码内容，现代浏览器会默认进行编码。编码基于encodeURI，通过decodeURI解码，一般用encodeURI编码整个url，这样整个url中的特殊字符都会被自动编码

encodeURIComponent/decodeURIComponent：与encodeURI的区别：不给整个URL编码，而是给URL部分信息进行编码，一般都是问号传参的值编码

escape/unescape：对字符串进行编码解码，不能用于URI

3.DNS服务器域名解析

3.1 概念

DNS服务器：域名解析服务器，服务器上存储着域名-服务器外网IP的相关记录。DNS解析其实就是根据域名在DNS服务器上查找对应的服务器外网IP

3.2 DNS优化

  • 浏览器默认机制：DNS缓存（一般浏览器会在第一次解析后，默认建立缓存，时间很短，只有一分钟左右）
  • DNS预获取（dns-prefetch）：在页面加载开始的时候，把当前页面中访问其他域名的信息提前解析，以后加载相关域名就不用解析了

  • 减少DNS解析次数

    4. http报文

    4.1 概念

  • 请求报文：所有经过传输协议，客户端传递给服务器的内容，都被称为请求报文

  1. 起始行
  2. 请求头
  3. 请求体
  • 响应报文：所有经过传输协议，服务器返回给客户端的内容，都被称为响应报文
  1. http状态码
  2. 响应头
  3. 响应体

4.2 http状态码

状态码 状态 含义
200 OK 请求成功
201 Created 服务器已经创建了文档
204 No Content 没有新文档，浏览器继续显示原来的文档，如果用户定期刷新页面，而服务器可以确定用户文档足够新，这个状态码很有用
301 Moved Permanently 永久重定向，客户请求的文档在其他地方，新的url在Location头中给出，浏览器应该自动访问新的url
302 Found 类似于301，新的url应该被视为临时性替代，而不是永久性的
304 Not Modified 设置http协商缓存，客户端有缓存的文档发出了请求，服务器告诉客户端，原来缓存的文档还可以继续使用
400 Bad Request 请求出现语法错误
401 Unauthorized 无权限访问
404 Not Found 请求地址错误
500 Internal Server Error 服务器内部错误
503 Service Unavailable 服务器超负荷

5. 浏览器渲染页面的机制

  1. 解析HTML，生成DOM树，解析CSS,生成CSSOM树
  2. 将DOM树和CSSOM树结合生成Render Tree渲染树
  3. Layout回流：根据生成的渲染树，计算它们在设备视口内的确切位置和大小，这个计算的阶段就是回流
  4. Painting重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  5. Display：将像素发送给GPU，展示在页面中

5.1 DOM的重绘与回流

回流：元素的大小、位置等几何信息发生变化的时候，触发了重新布局，导致渲染树重新计算布局和渲染
重绘：元素样式改变（但大小 宽高 位置等不变）触发重绘
回流一定触发重绘，但重绘不一定触发回流

5.2 避免DOM回流的几种方式

  • 放弃传统操作DOM的方式，基于vue/react框架。mvvm/mvc/virtual dom/dom diff
  • 分离读写操作：现代浏览器都有渲染队列机制。发现某一行要修改元素的样式，不会立即执行，而是继续往下走，如果下一行也会改变样式，则把修改样式的操作放到渲染队列中，直到不再是修改样式的操作后，整体渲染一次，引发一次回流
  • 缓存布局信息：将所有需要获取dom元素的操作集中处理，变量存储后，统一进行样式的修改，本质上也是为了分离读写
  • 元素批量修改：createDocumentFragment（文档碎片）或者模板字符串拼接
  • 动画效果应用到position属性为absolute或fixed元素上（脱离了文档流）
  • CSS3硬件加速（GPU加速），例如transform属性会触发硬件加速，不会导致回流和重绘
  • 避免table布局和使用css的JavaScript表达式