• 关于常问的输入URL到看到页面发生的全过程


    1. 首先浏览器主进程接管,开了一个下载线程。
    2. 然后进行HTTP请求(DNS查询、IP寻址等等),中间会有三次捂手,等待响应,开始下载响应报文。
    3. 将下载完的内容转交给Renderer进程管理。
    4. Renderer进程开始解析css rule tree和dom tree,这两个过程是并行的,所以一般我会把link标签放在页面顶部。
    5. 解析绘制过程中,当浏览器遇到link标签或者script、img等标签,浏览器会去下载这些内容,遇到时候缓存的使用缓存,不适用缓存的重新下载资源。
    6. css rule tree和dom tree生成完了之后,开始合成render tree,这个时候浏览器会进行layout,开始计算每一个节点的位置,然后进行绘制。
    7. 绘制结束后,关闭TCP连接,过程有四次挥手。

    以及为什么CSS和JS的位置会影响页面效率

    css在加载过程中不会影响到DOM树的生成,但是会影响到Render树的生成,进而影响到layout,所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度。

    js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。

  • 相关阅读:
    第二周作业(软件需求分析与系统设计)
    自我介绍
    2019春总结作业
    2019春第十六周作业
    2019春第十五周作业
    2019春第十四周作业
    2019春第十二周作业
    2019春第十一周作业
    2019春第十周作业
    2019春第九周作业
  • 原文地址:https://www.cnblogs.com/cindy-hmy/p/10190399.html
Copyright © 2020-2023  润新知