从输入url到页面展示

164 阅读2分钟
  1. 用户输入:
    用户在地址栏输入关键字并回车,会先判断关键字格式是搜索内容还是url,如果是搜索内容,则会使用默认的搜索引擎合成带关键字的url。如果是url,会根据规则合成完整的带协议名的url。然后回判断当前页面是否有beforeunload事件,如果有则会先执行,可以用此方法可以拦截浏览器后续动作。

  2. 请求过程:
    浏览器主进程通知网络进程启动请求过程。先查找本地是否有缓存,有的话直接返回给浏览器进程,没有的话会进入网络请求过程,DNS解析,建立TCP连接,发起http请求。

    http响应后,如果状态码是301或302,则浏览器会从响应头里取出Location字段并重新根据该字段的值来进行导航。

    根据响应头中的content-type的值来进行不同的处理,比如application/octet-stream,会被浏览器当做文件下载,text/html会被认为为html文档......

  3. 准备渲染进程
    一般情况下,每个标签页使用单独的渲染进程;
    如果从A页打开B页,A和B属于同一站点(协议名和根域名相同),B页会复用A页的渲染进程。

  4. 提交文档
    浏览器主进程将网络进程接收到的html数据提交给渲染进程。

  5. 渲染阶段
    构建dom树,html解析器将html文本转换为dom树。

    样式计算
    渲染引擎将css文本转换为styleSheets数据结构。
    转换样式表中的属性值,使其标准化。
    计算dom树中每个节点的样式。

    布局阶段
    创建布局树(不会创建不可见的dom节点)
    创建图层(每个节点直接或间接从属一个层)
    图片绘制(生成绘制列表)
    栅格化操作(主线程把绘制列表commit给合成线程,使用GPU加速)
    合成和显示(合成线程通知主进程,将页面内容绘制到内存中,再将内容显示在屏幕上)

性能问题方面

制作动画时,使用css的transform属性可以避开重排和重绘阶段,直接在非主线程执行合成动画操作,可以节约性能