地址栏输入一段url会发生什么事情(精简版、面试必问)

比眉伴天荒 2022-09-11 08:16 127阅读 0赞

## 地址栏输入一段url会发生什么事情？ ##

### 1、题目分析：这套题目比较开放，可以围绕以下几个点来回答： ###

1.  DNS域名解析过程
2.  js时间线
3.  浏览器解析javaScript三部曲

### 2、精简版答案： ###

> **首先，通过域名解析系统解析浏览器地址（本地文件缓存，浏览器缓存，路由缓存，ISP DNS缓存，递归搜索…）找到对应的ip地址，发送请求；  
> 其次，服务器收到请求会给浏览器响应一段数据，浏览器收到数据后，开始解析文档（js时间线）；  
> 然后，当文档解析完成后执行js代码，这个过程就是js执行三部曲（语法检测，预编译，解释执行代码）；  
> 最后，所有过程执行完毕！**

### 3、衍生出来的一些问题解答： ###

#### 3.1、js时间线（JavaScript加载的过程、时间线的步骤） ####

1.  创建Document对象，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段Document。readyState  
    = “loading”。
2.  遇到link外部css，创建线程加载，并继续解析文档。
3.  遇到script外部js，并且没有设置async ， defer ，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档
4.  遇到script外部js，并且设置有async，defer 浏览器创建线程加载，并继续解析文档，对于async属性的脚本，脚本加载完成后立即执行（异步禁止使用docuemnt.write（））。
5.  遇到img标签等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档
6.  当文档解析完成，document.readyState = “interactive”；
7.  文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8.  当文档解析完成之后，document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段
9.  当所有async的脚本加载完成并执行后，img等加载完成后，document.readyState = “complete” window对象触发load事件
10. 从此，页面以异步响应方式处理用户输入，网络事件等。

> 精简版:**创建Document对象，浏览器开始解析html页面document.readyState = “loading”。 2.当遇到外部资源（外部的js文件，外部的css文件，外部的图片，a标签，iframe标签）的时候，除了script中的src(没有设置defer,async)为同步,其余都为异步（主线程调用子线程完成）有且只有这一个script标签中的src为同步，等待js加载完成并执行该脚本，继续解析文档至完成，document.readyState = “interactive” ，所有异步线程会按照顺序依次执行，同时document对象触发DOMContentLoaded事件（jquery中ready方法的封装），等待所有异步线程加载完毕，document.readyState=‘complete’.**

#### 3.2、JS运行时三部曲 ####

JS运行三部曲
    
    1.语法检测
    先全部检测一遍 看有没有语法错误.
    
    2.预编译(执行前一刻)
    函数声明整体提升
    变量 声明提升
    
    3.解释执行
    (解释一行执行一行)
    
    预编译执行四部曲
    函数中
    1.创建AO对象 (Activation Object (执行期上下文))
    2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
    3.将实参值和形参统一
    4.在函数体里面找函数声明,值赋予函数体
    
    全局中
    1. 生成一个叫GO 对象 Global Object
    (window就是全局)

例子：
    <script>
            /*首先执行前会进行全局预编译: 先把全局的变量声明找出来值为undefined 和函数声明 值赋予函数体,提升到最上端 GO{a:undefined; demo:function demo(e){.....} } 然后开始执行*/
            	a = 100;              //1.执行到这里 GO{a:100; 把100 赋值给a 然后下一行
            function demo(e){              //2.执行到这里 因为demo:function demo(e){.....} 提升 所以忽略 然后下一步
                function e(){ }             //5.提升 忽略
                arguments[0] = 2;         //6.实参值改变 形参也改变 AO{ e:2;
                console.log(e);        //7. 输出 2
                if (a){                 //8. a此刻为 AO{ a:undefined; 所有if整段代码不执行
                    var b = 123;
                }
                var c;          //9.提升 忽略
                a = 10;         // 10. AO{ a:10;
                var a;            //11.提升 忽略
                console.log(b);   //12.因为AO{ b;undefined; 所以 输出 undefined
                f = 123;           //13.因为 AO中没有f ,所以把f放入GO中GO{f:undefined; 把123赋值给它GO{f:123;
                console.log(c);   //14.因为AO{ c;undefined; 所以输出 undefined
                console.log(a);         //15. 看10步 AO{ a:10; 输出 10 执行完毕
            }
            var a; //3. 提升 忽略 下一步
    
             //4.函数执行前进行函数预编译
            /*4.1找形参和变量声明,将变量和形参名作为AO属性名,值为undefine AO{ e:undefined; c:undefined; a:undefined; } 4.2将实参值和形参统一 AO{ e:1; c:undefined; a:undefined; } 4.3在函数体里面找函数声明,值赋予函数体 AO{ e: function e(){}; b;undefined; c:undefined; a:undefined; } */
            demo(1); 
            console.log(a); //100 //16. 看1. GO{a:100; 输出 100
            console.log(f); //123 //17.看 13. GO{f:123; 输出 123 
    
        </script>