当前你在浏览器地址栏输入内容时,浏览器进程的UI线程会捕捉到你的输入内容。如果访问的是网址,则UI线程会启动一个网络线程来请求DNS进行域名解析,解析成功后开始连接服务器获取数据。如果你的输入不是网址而是一串关键词浏览器就知道你是要进行搜索,于是就会使用默认配置的搜索引擎来查询。
网络线程获取到数据后:当网络线程获取到数据后,会通过safeBrowsing来来检查站点,是否是恶意站点,如果是则会提示警告页面,告诉你这个站点有安全问题,浏览器会阻止你的访问,当然用户也可以强行继续访问。
safeBrowsing是谷歌内部的一套站点安全系统,通过检测该站点的数据来判断是否安全,比如通过查看该站点的IP地址是否在谷歌的黑名单之内,当返回数据准备完毕,并且安全校验通过时。
网络线程会通知UI线程我准备好了,然后UI线程会创建一个渲染器进程(Renderer Thread)来渲染页面;然后进入渲染流程。渲染器进程接收到的数据也就是HTML,渲染器进程的核心任务就是把html,css,js,image 等资源渲染成用户可以交互的web页面。渲染器进程的主线程会将html进行解析,构造DOM数据结构,(DOM也就是文档对象模型,是浏览器对页面在其内部的表示形式,是web开发程序员可以通过js与之交互的数据结构和API。)
然后进行DOM树渲染。HTML代码中往往会额外引入一些资源,比如图片、css,js脚本等;图片,css这些资源需要通过网络下载或者从缓存中直接加载,这些资源不会阻塞html的解析,因为他们不会影响dom的生成,当时当HTML解析过程中遇到script标签,就会停止html解析流程,转而去加载并解析并执行js(这是因为浏览器并不知道js执行是否会改变当页面的HTML的结构,如果js代码修改了html,那么之前的html解析就没有意义了,这也是为什么要把Script标签放在合适位置的说法了)。在html解析完成后我们会获得一个DOM Tree,这时我们还不知道DOM树上的每个节点应该长什么样子,主线程需要解析css,并确定每个DOM节点的计算样式,即使你没有提供自定义的css的样式,浏览器也自己默认的样式表。