进程线程阻塞模式 defer

最新推荐文章于 2024-09-07 10:11:54 发布

_聪明勇敢有力气

最新推荐文章于 2024-09-07 10:11:54 发布

阅读量312

点赞数 1

分类专栏： js 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_65402230/article/details/127251046

版权

js 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

进程

是计算机中的程序关于某数据集合上的一次运行活动是系统进行资源分配和调度的基本单元

多进程

启动多个进程多个进程可以一块来执行多个任务

单线程

进程内一个相对独立的可调度的执行单元与同属的一个进程共享着进程中的资源（同一时间只能做一件事情）

多线程

启动一个进程在一个进程内部启动多个线程这样多个线程也可以一块执行多个任务（也是通过调度来做的如同多进程能做多任务一样多线程也能做多任务）

浏览器是多进程的

browser进程：第三方插件进程 GPU进程浏览器渲染引擎进程（浏览器内核）
浏览器渲染引擎进程（浏览器内核）是多线程的
1.js引擎线程（单线程）
2.GUI 线程（渲染用户界面）与js引擎线程互斥
3.http 网络请求线程
4. 定时器触发线程
5.浏览器事件处理线程

为什么JS引擎是单线程的

DOM冲突当两个script标签引入的js脚本执行都要对同一个dom进行操作
一个要修改一个要删除如果恰好在同一时间操作就会产生冲突

那入如果数据量非常大怎么解决

解决方案
1.SSR（服务端渲染）计算交给后端渲染交给前端
2.webworker 向js引擎申请开启一个js单线程下的子线程浏览器开启的 webworker无法访问

那计算量不大怎么解决

使用异步
js的运行原理：js引擎线程（单线程）同时执行异步执行（事件驱动）

阻塞模式（同步加载）

浏览器引擎加载script标签是同步的因为 script里的js脚本操作dom 所以一般放在最后面
script标签加上 defer = ‘defer’ 异步加载
普通的script加载完就执行里面的js脚本而加上defer后加载完不立即执行要等DOM树构建完毕才执行
script标签加上 async = ‘async’ 异步加载但是与defer不同的是加载完成后立即执行js脚本
异步加载不要在js脚本里写直接对文档进行操作的东西

动态创建异步script标签

什么时候下载文件

当s.src时就下载该文件

什么时候正确执行该脚本文件

当把动态创建的脚本放到html里中就执行了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript"></script>
  </head>
  <body>
    <script type="text/javascript">
      (function () {
        function async_load() {
          var s = document.createElement('script');
          var oScript = document.getElementsByTagName('script')[0];
          s.type = 'text/javascript';
          s.src = 'utils.js';
          oScript.parentNode.insertBefore(s, oScript);
        }
        if (window.attachEvent) {
          window.attachEvent('onload', async_load);
        } else {
          window.addEventListener('load', async_load, false);
        }
      })();
    </script>
  </body>
</html>

创建异步script并且调用utils的fn函数

下载的时候会阻塞onload 所以s.src写在后面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript"></script>
  </head>
  <body>
    <script type="text/javascript">
      function exec_utils_with_loading_script(url, fn) {
        var s = document.createElement('script'),
          oScript = document.getElementsByTagName('script')[0];
        s.type = 'text/javascript';
        if (s.readyState) {
          s.onreadystatechange = function () {
            var state = s.readyState;
            if (state === 'complete' || state === 'loaded') {
              utils[fn]();
            }
          };
        } else {
          s.onload = function () {
            utils[fn]();
          };
        }
        s.scr = url;
        oScript.parentNode.insertBefore(s, oScript);
      }
    </script>
  </body>
</html>