Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

从输入页面URL到页面渲染完成大致流程 #45

Open
janeLLLL opened this issue Jan 6, 2021 · 0 comments
Open

从输入页面URL到页面渲染完成大致流程 #45

janeLLLL opened this issue Jan 6, 2021 · 0 comments

Comments

@janeLLLL
Copy link
Owner

janeLLLL commented Jan 6, 2021

  • 解析URL
  • 浏览器本地缓存
  • DNS解析
  • 建立TCP/IP连接
  • 发送HTTP请求
  • 服务器处理请求并返回HTTP报文
  • 浏览器根据深度遍历的方式把html节点遍历构建DOM树
  • 遇到CSS外链,异步加载解析CSS,构建CSS规则树
  • 遇到script标签,如果是普通JS标签则同步加载并执行,阻塞页面渲染,如果标签上有defer / async属性则异步加载JS资源
  • 将dom树和CSS DOM树构造成render树
  • 渲染render树

performance.timing

CSR-浏览器performance情况

SSR-浏览器performance情况

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant