写文章

从URL输入到页面渲染发生了什么(包含性能优化)

吐槽君 分类：javascript

用户输入URL地址，回车的时候触发

URI解析

erDiagram
URI ||--o{ URL : son
URI }|..|{ URN-ADDRESS :　son

URI:统一资源标识符

  • URI可以是URL或者URN developer.mozilla.org/zh-CN/docs/…
  • URL或者URN不一定是URI
  • URL是URI的一种,标识了Web资源,指定操作or获取的方式,还包含了访问协议和位置,developer.mozilla.org/zh-CN/docs/…
  • URN是URI的一种,标明了特定的名字标识资源,不包括访问方式, developer.mozilla.org/zh-CN/docs/…

这边给大家举一下例子,比如说 你要看书,于是你去某某图书馆找书,这个图书馆就是URL(包含你怎么去的),URN就类似图书馆的位置 + 书籍ISBN码(不包含怎么去的)

虚构一个URI:
aoteman.io/posts/hello…
http:定义访问方式

  • HTTP默认端口 80
  • HTTPS 默认端口号 443
  • 可以在NetWork-General-Remote Address中查看

aoteman.io/posts/hello.html
定义访问资源路径

#intro
资源

其中各部分所属情况如下

  • URL: aoteman.io/posts/hello…
  • URN: aoteman.io/posts/hello.html#intro

DNS解析

找到服务器IP, 如果之前解析过,本地可能有缓存

  • 递归查询: 用户向本地DNS服务器请求,本地服务器请求域服务器,域服务器向一级请求,一直请求下去,得到结果后,本地服务器告知你
  • 迭代查询: 本地服务器像根服务器请求,给出下一级地址,在由本地服务器请求,一直得到结果后,本地服务器告知你

DNS优化:

  • 尽量减少DNS请求
  • DNS预获取(link rel="dns-prefetch" href="")
  • 第三方加速

缓存检查

缓存分为: 强缓存 >　协商缓存
　先检查强缓存，　

  • 有，且未失效，走强缓存
  • 如果没有 或者 失效

在检测协商缓存

  • 有　则走缓存
  • 无　获取最新数据

缓存位置:内存缓存 硬盘缓存

  • 内存缓存:浏览器关闭就失效
  • 硬盘缓存:直接存进计算机中

例如打开百度用的就是硬盘缓存,匹配对应的缓存,有的话使用,没有的话发起请求;
假如: 文件更新了怎么办?

  • 修改版本号 verson
  • 可以在存入的时候,放进一个时间戳,如果文件有变动在更新一个时间戳

接下来是说下强缓存: Expires / Cache-control

根据第一次请求资源返回的响应头决定

  • Expires:缓存过期时间
  • Cache-control:max-age=time,时间内请求,读取缓存信息
  • Cache-control > Expries

协商缓存:Last-Modified / ETag

在强缓存失效后,浏览器携带标识发请求,服务器决定是否用缓存,使用协商缓存返回304,之后读取本地缓存

  • Last-Modified: 包含源头服务器认定的资源做出修改的日期及时间,精度比ETag低

  • ETag:资源的特定版本的标识符

TCP(通道)

三次握手，为了双方进行连接

核心思想:既要保证数据可靠传输,又要提高传输效率

  • seq：序号,发起方发起数据时的标记

  • ack:确认序号

  • ACK：确认序号有效

  • RST：重置连接

  • SYN：发起一个连接

  • FIN：释放连接

image.png

why？两次 或者 四次？

例如:你和你女朋友对话
1.男:你在吗?
2.女朋友心里想:在(实际上没回复你)
这时候你也接收不到你女朋友说的话

四次的话
1.男:你在吗?
2.女朋友心里想:嗯嗯,行,并确认回复你,嗯嗯,在
3.男:OK,你在吗
4.女朋友:SB,不在!

数据传输

TCP 四次挥手(既时应答机制)

可以设置 connection： keep-alive 设置长连接不进行四次挥手，到页面关闭

  • 客户端发起请求

  • 服务器收到请求,并回复客户端,已经收到,在准备数据

  • 服务器发送数据给客户端,你还有没有要传的

  • 客户端:没有了,已经收到数据,可以关闭了

页面渲染

  • 浏览器开始解析目标HTML文件,执行流的顺序为自上而下。

  • HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。

  • CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。

  • CSSOM和DOM开始合并构成渲染树,每个节点开始包含具体的样式信息。

  • 计算渲染树中个各个节点的位置信息,即布局阶段。

  • 将布局后的渲染树显示到界面上。

HTTP1.0,1.1,2.0区别

HTTP1.0和HTTP1.1区别

  • 缓存处理: HTTP1.0主要使用Last-Modified,Expires做缓存,HTTP1.1支持:ETag,Catche-Control
  • HTTP1.1支持断点续传,返回码206
  • HTTP1.1新增了很多错误响应码,如404请求资源和当前状态冲突,410表示永久删除某资源
  • HTTP1.1默认开启长连接(如果某个请求超时,后面会被阻塞)

HTTP2.0和HTTP1.x区别

  • 多路复用!!!最主要
  • 服务器推送(需要主动开启,比如请求index.html,会主动返回包含的css js)
  • 健壮性更高
  • 二进制格式

性能优化

 1.利用缓存
   对静态资源实现强缓存和协商缓存
 2.DNS优化
   分服务器部署,增加HTTP并发性
 3.TCP优化
   开启长连接
 4.数据传输
   减少传输体积
     内容压缩
     服务端开启GZIP压缩(一般压缩60%)
     数据量大分批次请求
   减少HTTP请求次数
     资源文件合并处理
     字体图标
     雪碧图 CSS-Sprit
     图片base64
     少用 !important

  5.CDN
  6.HTTP2.0
  7.减少白屏时间
    loading
    骨架屏
    图片懒加载
  8.js如果没有操作DOM,可以+上sync or defer
  9.css不阻塞渲染  media="print"
  10.减少DOM回流

欢迎各路大神斧正

回复

我来回复

  • 暂无回复内容