浏览器页面的生命周期

最新推荐文章于 2023-11-11 09:00:00 发布

巴山却话

最新推荐文章于 2023-11-11 09:00:00 发布

阅读量2.3k

点赞数

文章标签：页面生命周期浏览器生命周期 dom

本文链接：https://blog.csdn.net/mynewdays/article/details/89474062

版权

javascript 主要是运行在客户端浏览器中的。专业点说，浏览器是js运行的宿主环境，就好比浏览器是地球，js是人类，地球的生命多长，人类的生命也就是多长。地球毁灭，人类也就完蛋了。

当然，就像美国大片一样，人类总是幻想在地球毁灭之前，能够找到新的栖息地，虽然这对于人类还很遥远，但js已经找到了脱离浏览器，在服务器端运行的方式，就是Node。。。。

这里不讨论node，而是讨论客户端浏览器的生命周期，进而明白js的执行情况。

总体来说，页面的生命周期从点击“超链接”或地址栏中输入URL，前往页面开始，到关闭浏览器窗口结束。

在整个生命周期中，主要是处理了页面构建和事件处理两个阶段

页面构建

浏览器处理从服务器端获取的html、css和js代码，整个处理过程可以概括为下面几点

浏览器按照从上到下的顺序执行代码
浏览器遇到html代码，就会按照html构建dom，遇到script 标记，就执行其中的js代码

这里要注意几点

html源码与dom并不总是一样

在执行html 代码时要注意，我们编写的html与最终的dom并不总是一样的。因为浏览器会按照自己的规范，根据html构建dom，如下面的代码

<html>
    <head>
        <title>test</title>
        <p>where am i</p>
    </head>
    <body>
        
    </body>
</html>

浏览器构建的dom结构如下

页面构建阶段执行全局作用域的js代码

在页面构建阶段，浏览器遇到script 标签，只会执行其中的全局作用域代码，而不会执行函数内部的代码

函数中的代码需要调用才会执行

事件处理

用户移动鼠标、点击鼠标、以及发送的ajax请求都属于事件，浏览器还要负责这些事件的处理

注册事件处理器

事件处理器就是事件发生时执行的函数，注册事件处理器，就是将函数与对应的事件关联起来，推荐使用addEventListener方法注册事件

<html>
    <head>
        <title>test</title>        
    </head>
    <body>
        <p id="p1">where am i</p>
        <script>
        document.getElementById('p1').addEventListener('click',function(){
            this.textContent="click me";
        })
        </script>
    </body>
</html>

事件队列

注册事件后，会将事件放到一个事件队列中，浏览器有一个循环机制，总是检查事件队列的队首，如果有事件，则执行，执行完毕后，从队列中将此事件删除，下一个事件递进到队首，浏览器继续执行。一直到事件队列中没有事件，浏览器也会一致检查，直到有事件后继续执行整个事件

全局对象

如果页面中存在多个script标签，就会有多端script 代码，在其中一段中声明的变量，在所有script 标签中都是可以使用的，这是因为有一个全局对象window ，这个全局对象的作用域就是整个页面。

<html>
    <head>
        <title>test</title>        
    </head>
    <body>
        <p id="p1">where am i</p>
        <script>
        var a=10;
        </script>
        <p>hello</p>
        <script>
        document.getElementById('p1').textContent=a;
        </script>
    </body>
</html>

巴山却话

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器页面的生命周期

javascript 主要是运行在客户端浏览器中的。专业点说，浏览器是js运行的宿主环境，就好比浏览器是地球，js是人类，地球的生命多长，人类的生命也就是多长。地球毁灭，人类也就完蛋了。当然，就像美国大片一样，人类总是幻想在地球毁灭之前，能够找到新的栖息地，虽然这对于人类还很遥远，但js已经找到了脱离浏览器，在服务器端运行的方式，就是Node。。。。这里不讨论node，而是讨论客户端浏览器...
复制链接

扫一扫