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

简单理解：

当在浏览器地址栏输入一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

DomContentLoaded 事件的触发

 　DOMContentLoaded 事件在 html文档加载完毕，并且 html 所引用的内联 js、以及外链 js 的同步代码都执行完毕后触发。

load 事件的触发

   当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件。

//此处是一个完整的，解决兼容的判断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)){

}

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