当你从地址栏输入内容时，按下Enter时发生的事
    UI线程捕获输入内容
          1.关键字
               (使用默认配置的搜索引擎来查询)
               网页搜索
               预处理信息
               建立索引
              SEO搜索引擎原理
           1)抓取网页。
                    每个独立的搜索引擎都有自己的网页抓取程序爬虫（spider）。爬虫Spider顺着网页中的超链接，从这个网站爬到另一个网站，通过超链接分析连续访问抓取更多网页。被抓取的网页被称之为网页快照。由于互联网中超链接的应用很普遍，理论上，从一定范围的网页出发，就能搜集到绝大多数的网页。
              2)处理网页。
                    搜索引擎抓到网页后，还要做大量的预处理工作，才能提供检索服务。其中，最重要的就是提取关键词，建立索引库和索引。其他还包括去除重复网页、分词（中文）、判断网页类型、分析超链接、计算网页的重要度/丰富度等
              3)页面排序
                    搜索引擎结合页面的内外部因素计算出该页面与某个关键字的相关程度，从而得到与该关键字相关的页面排序列表。
              4)提供检索服务。
                    用户输入关键词进行检索，搜索引擎从索引数据库中找到匹配该关键词的网页；为了用户便于判断，除了网页标题和URL外，还会提供一段来自网页的摘要以及其他信息。
          2.网址  
                启动网络线程   
                请求DNS解析进行域名解析   
                连接服务器，获取数据   
                通过SafeBrowsing(安全系统)进行安全检查   
                完成后，数据交还UI线程 
                开始渲染
            具体流程
            UI线程创建 渲染器进程（Renderer Thread）来渲染页面同时，浏览器进程通过IPC管道将  HTML数据给渲染器进程，正式进入渲染器流程 
            渲染器主线程将HTML数据解析，渲染器核心任务就是把Html，Css、Js、Image等资源渲染成可以交互的Web页面
            渲染器进程的主线线程将Html进行解析，构造DOM数据结构 DOM也就是文档对象模型，是浏览器对页面在其内部的表示形式，是Web开发程序员可以通过JS与之交互的数据结构和API HTML首先经过tokeniser标记化，通过词法分析将输入的html内容解析成多个标记，根据识别后的标记进行DOM树构造，在DOM树构造过程中会创建document对象，然后以document的为根节点的DOM树不断进行修改向其中添加各种元素   
            在知道DOM结构和每个节点的样式后，接下来就需要知道每个节点需要放在以页面上的那个位置，也就是节点的坐标以及该节点需要占用多大的区域，这个阶段被称为Layout布局      
            主线程需要遍历Dom和计算好的样式来计算LayoutTree      
            LayoutTree上的每个节点都记录了x，y坐标和边框尺寸     （需要要注意DOM Tree和LayoutTree并不是一一对应的，比如说设置了display:none的Dom节点是不会出现在LayoutTree，而在before伪类中添加了content值的元素不会出现在Dom树里，这是要因为Dom是通过HTMl解析获得的，并不关系样式。而LayoutTree是根据Dom和计算好的样式来生成的）       
            LayoutTree是和最后展示在屏幕上的节点对应的 现在我们知道了元素的大小，形状，位置。这还不够，我们还需要知道以什么样的绘制顺序(paint)来绘制这个节点  主线程遍历Layout Tree创建有一个绘制记录表(paint Recor)该表记录了绘制顺序 现在知道了文档的绘制顺序，到了把这些信息转化成像素点显示在屏幕上的时候了 这种行为被称为栅格化(Rastering) 
            Chrome使用了合成(Composting)的栅格化方法，合成是一种将页面各个部分分成多个图层，分别将其栅格化，并在合成器线程中(Compositor Thread)单独进行合成的技术 简单来说就是页面所有的元素按照某种规则进行分图层，并把图层都栅格化好了，只需要把可视区的内容组合成一帧展示给用户即可。      
            主线程遍历Layout Tree,生成Layer Tree(图层)。当Layer Tree生成完毕后和绘制顺序确定后，主线程将这些信息传递给 合成器线程 ，合成器线程将每个图层栅格化  
            由于一层可能像页面整个长度一样大，因此合成器线程将他们切分为 许多图快(tiles)，然后将每个图块发送给 栅格化线程 。栅格化线程栅格每个图块，并将他们存储在 GPU内存中。      
            图块栅格化完成后，合成器线程将收集为称为 “draw quads”的图块信息，这些信息记录了图块在内存中的位置和在页面的哪个位置绘制图块的信息。      
            根据这些信息合成器线程生成了一个 合成器帧 (Compositor Frame) ,然后合成器帧通过IPC传送给浏览器进程，接着浏览器进程将合成器帧传送到GPU，然后GPU渲染到屏幕上。       
            恭喜你，你终于看到了页面的内容。       
            当以页面发生了滚动时，都会生成一个新的合成器帧，新的帧在传送给GPU,然后再次渲染到屏幕上。
 
PS:(如果有写错的地方，请大家指正出来)

版权声明：本文为DaZheZi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/DaZheZi/p/13948264.html