JavaScript时间线

最新推荐文章于 2024-06-15 23:55:05 发布

Zhweb_box

最新推荐文章于 2024-06-15 23:55:05 发布

阅读量267

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ZiXiaweb/article/details/108967405

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

JavaScript是一种运行在JS解释器/独立引擎中的解释型脚本语言
（解释型语言，编译行语言，弱类型语言，单线程）
同步现象：上一件事情没做完，下一件事情必须等待
配合异步：提高单线程的执行效率。

get和post的区别：

1、GET请求

请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。

POST请求

POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。
2、传输数据的大小

在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。

3、安全性

POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site
request frogery攻击

<body>
    <div style="width:100px;height:100px;background-color:red;"></div>
    <script>
        window.onload = function () {
            document.write('a');
        }//这个时候页面就只会输出a，div就被清除了
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
 <script>
        console.log(document.readyState);
        //loading  因为解析web页面的时候，script标签也是dom元素，所以它也要识别
<script>
</body>
</html>

js加载时间线步骤

创建Documen对象开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’ 。
遇到link外部css,创建线程加载，井继续解析文档。
遇到script外部js，并且没有设置async，defer, 浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
遇到script外部js.并且设置有async， defer, 浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。(异步禁止使用document.write()，因为它会清除文档流）
遇到img等，先正常解析dom结构，然后浏览器异步加载src,并继续解析文档。
当文档解析完成，document.readyState = ‘Interactive’。
文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意 async的不同，但同样禁止使用document.wite()) ;
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
当所有async的脚本加载完成井执行后。img等加载完成后，document.readyState = ‘complete’, window对象触发load事件。
从此，以异步响应方式处理用户输入，网络事件等。

DOMContentLoaded事件只有用addEventListener绑定才有效

document.addEventListener('DOMContentLoaded',function(){ console.log('a')},false);
//正常的情况下，当文档加载（解析文档，就是构成dom树，然后再加载dom元素）
//完毕后，才执行js代码，
//但是document对象触发DOMContentLoaded事件可以当dom解析完了
//(dom树构建完成，还没加载完毕的时候)就去执行js代码

// 就像jquery里面的
当dom解析完就执行的部分
$(document).ready(function (){
.............
})
   </script>

现在用document对象触发DOMContentLoaded事件放在head里面，照样可以拿到div，因为它是在dom树构建完成之后就调用事件的那个处理函数，不用等到文档全部加载完毕。而window.onload()就是要等到文档全部加载完毕了，它才会执行window.onload()里面的js。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            var div = document.getElementsByTagName('div')[0];
            console.log(div);
        },false);
    </script>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red"></div>
</body>
</html>