浏览器输入一个url的过程，以及加载完html文件和js文件的标志

原文链接： https://www.mk2048.com/blog/blog.php?id=h01jbk0akj0j&title=%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BE%93%E5%85%A5%E4%B8%80%E4%B8%AAurl%E7%9A%84%E8%BF%87%E7%A8%8B%EF%BC%8C%E4%BB%A5%E5%8F%8A%E5%8A%A0%E8%BD%BD%E5%AE%8Chtml%E6%96%87%E4%BB%B6%E5%92%8Cjs%E6%96%87%E4%BB%

简单理解：

当在浏览器地址栏输入一url时，浏览器会做以下几个步骤：

1、将url转化为ip地址，也就是DNS解析，（先找本地host文件中是否有对应的ip地址，如果有就直接用，没有的话，就按域名的二级，一级的顺序进行查找）。

2、找到请求的的服务器后，就开始建立tcp连接，此处有三次握手。

3、tcp建立连接后，开始向服务器发送请求，服务器首先响应并返回的是一个html文档。

4、此处就是浏览器解析html文档了，

解析html文档，就是按照html文档标签的顺序，从上往下进行解析，并在这个过程中构建dom树(dom tree)，

如果遇到css文件，则向服务器请求加载css文件，并解析，构建css规则树（css rule tree）,

解析过程中，如果遇到需要加载js文件，则会阻塞dom树和css规则树的构建，

因为js中有修改dom,以及css样式的代码（所以，一般情况下，是将js文件放在body最下方，防止构建dom树时被阻塞）(此处说一下，js文件加载完成的标志是window.onload事件)

dom树构建完成的标志是，监听DomContentLoaded事件

然后根据dom树和css rule tree一起构建渲染树（render tree）。

然后根据render tree 进行布局（layout）,然后进行绘制painting

//此处是一个完整的，解决兼容的判断js文件加载完成的标志
function loadJsAsync(url){
    var body = document.getElementsByTagName('body')[0];
    var jsNode = document.createElement('script');

    jsNode.setAttribute('type', 'text/javascript');
    jsNode.setAttribute('src', url);
    body.appendChild(jsNode);

    if (jsNode.onload) {
        jsNode.onload = function() {
            // do something
        }
    } else {
        // ie6, ie7不支持onload的情况
        jsNode.onreadystatechange = function() {
            if(jsNode.readyState == 'loaded' || jsNode.readyState == 'complete') {
                // 异步js加载完毕
                // do something执行操作
            }
        }
    }
}

参考文章：https://www.cnblogs.com/ranyonsue/p/6734446.html， http://blog.csdn.net/xiaobing_hope/article/details/78318471

加深理解：

按照浏览器引擎的渲染机制理解。

浏览器的每一个tab页都是打开一个新的进程

而每一个进程都是由多个线程所组成。

所以每一个浏览器tab页都是有：主进程，而主进程包含浏览器渲染引擎、浏览器数据存储

浏览器渲染引擎由以下多个线程组成：定时器线程、事件处理线程、异步http请求线程、js解析，ui渲染（与js解析互斥）

所以js的加载会阻塞页面的渲染。

js判断页面当前实在手机端还是pc端

if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)){

}

此文是按本人的理解写的，如有路过的大神，看到有不合理的地方，谢谢指正！

更多专业前端知识，请上【猿2048】www.mk2048.com

浏览器输入一个url的过程，以及加载完html文件和js文件的标志

猜你喜欢