JavaScript 后台处理(Web Worker)

举报
福州司马懿 发表于 2021/11/19 05:19:40 2021/11/19
【摘要】 webWorker.html <html> <head> <style> body { ...

webWorker.html

<html>
    <head>
        <style>
            body {
                width: 100%;
            }
            table {
                border-spacing: 0px;
            }
            table th, table td {
                color: white;
                background-color: black;
                padding: 5px;
                border-right: 1px solid red;
                border-bottom: 1px solid red;
            }
            ul {
                position: fixed;
                right: 10px;
                border-radius: 5px;
                border: 1px solid gray;
                box-shadow: 3px 3px 10px gray;
                list-style: none;
                /* 主要是取消掉左边的边距 */
                padding: 0px;
            }
            ul li {
                background: -webkit-linear-gradient(gray 90%, white 100%);
                color: white;
                padding: 5px 10px 5px 10px;
            }
            ul li:hover{
                background: -webkit-linear-gradient(orange 90%, gray 100%);
                color: black;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <ul id="controlDiv">
            <li onclick="normalCreate()">Normal Create</li>
            <li onclick="webWorkerCreate()">Web Worker Create</li>
            <li onclick="removeAllTable()">Clear All</li>
        </ul>
        <script>
            if(typeof(Worker) != "undefined") {
                // Yes! Web worker support!

                //firefox可以正常执行
                //chrome: Uncaught SecurityError: Failed to create a worker: script at '(path)/webWorker.js' cannot be accessed from origin 'null'.
                //var worker = new Worker("./webWorker.js");
                //解决方案如下:
                function worker_function() {
                    var columnCount = 10;
                    //注意:onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的
                    onmessage = function(event) {
                        var num = parseInt(event.data);
                        var rowCount = num / columnCount;
                        var lastColumnCount = num % columnCount;
                        for(var j=0; j<rowCount; j++) {
                            var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;
                            for(var i=0; i<thisColumnCount; i++) {
                                //postMessage这里不需要将变量赋值给event,它会自动赋值
                                postMessage({"i":i, "j":j});
                            }
                        }
                    }
                }
                //会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串,你可以像使用一个普通URL那样使用它,比如用在img.src上。
                var url = URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'}));
                var worker = new Worker(url);
                //释放资源
                URL.revokeObjectURL(url);

                //注意:onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的
                worker.onmessage = function(event) {
                    var i = event.data.i;
                    var j = event.data.j;
                    var table = document.getElementById("table");
                    if(!table) {
                        table = createAndAddTable();
                    }
                    if(i === 0) {
                        table.insertRow(j);
                    }
                    var cell = table.rows[j].insertCell();
                    cell.innerHTML = "(" + i + "," + j + ")"
                }
                worker.onerror = function(e){
                    //打印出错消息
                    console.log(e.message);
                    //中断与子线程的联系
                    worker.terminate();
                }

                //创建并添加table
                function createAndAddTable() {
                    table = document.createElement("table");
                    table.id = "table";
                    document.body.appendChild(table);
                    return table;
                }

                //删除body内的所有table
                function removeAllTable() {
                    var tables = document.getElementsByTagName("table");
                    if(tables && tables.length > 0) {
                        for(var i=tables.length-1; i>=0; i--) {
                            document.body.removeChild(tables[i]);
                        }
                    }
                }

                //待创建的单元格数目
                var cellCount = 1000000;

                function normalCreate() {
                    removeAllTable();
                    var table = createAndAddTable();
                    var columnCount = 10;
                    var rowCount = cellCount / columnCount;
                    var lastColumnCount = cellCount % columnCount;
                    for(var j=0; j<rowCount; j++) {
                        var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;
                        var row = table.insertRow();
                        for(var i=0; i<thisColumnCount; i++) {
                            var cell = row.insertCell();
                            cell.textContent = "(" + i + "," + j + ")"
                        }
                    }
                }

                function webWorkerCreate() {
                    removeAllTable();
                    worker.postMessage(cellCount);
                }

            } else {
                alert("Sorry! No Web Worker support...");
            }
        </script>
    </body>
</html>
  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143

webWorker.js

var columnCount = 10;
//注意:onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的
onmessage = function(event) {
    var num = parseInt(event.data);
    var rowCount = num / columnCount;
    var lastColumnCount = num % columnCount;
    for(var j=0; j<rowCount; j++) {
        var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;
        for(var i=0; i<thisColumnCount; i++) {
            //postMessage这里不需要将变量赋值给event,它会自动赋值
            postMessage({"i":i, "j":j});
        }
    }
}
  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

这里写图片描述

注意:在Chrome浏览器中常规的Web Worker会报如下错误。

这里写图片描述

解决方案已写在代码中了,需要借助var url = URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'}));来实现。

文章来源: blog.csdn.net,作者:福州-司马懿,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/chy555chy/article/details/54927472

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200