在前端js worker里使用dom并且加载jquery
四个工具:
- nodejs + npm
- npm安装的jsdom
- npm安装的jquery
- npm安装的browserify
网址:
browserify: https://browserify.org/
jsdom: https://github.com/jsdom/jsdom/
安装:
npm install -g jsdom
npm install -g jquery
npm install -g browserify
代码(main.js):
const { JSDOM } = require("jsdom");
const { window } = new JSDOM("");
const document = window.document;
let $ = require("jquery")(window);
globalThis.window = window;
globalThis.document = document;
globalThis["$"] = $;
不带jquery的
```
const { JSDOM } = require("jsdom");
const { window } = new JSDOM("");
const document = window.document;
globalThis.window = window;
globalThis.document = document;
```
编译(算是?):
browserify main.js -o wdj.js
我起的名字是简写(Window Document Jquery)
让worker引入wdj.js
importScripts("wdj.js");
实际效果:

第一次写这么简洁的博文,原因是三天考完期末,有点累
在前端js worker里使用dom并且加载jquery的更多相关文章
- html dom的加载
操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...
- 前端性能优化:细说JavaScript的加载与执行
本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...
- Web前端性能优化总结——如何提高网页加载速度
一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- 【转】js JavaScript 的性能优化:加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- JS判断单、多张图片加载完成
转:http://www.daqianduan.com/6419.html 试想,如果模板中有图片,此时如何判断图片是否加载完成? 在此之前来了解一下jquery的ready与window.onloa ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件
win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
- 页面全部加载完毕和页面dom树加载完毕
dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) { ///兼容FF,Google ...
随机推荐
- drf-day2——restful规范、序列化反序列化、基于django编写五个原生接口、drf介绍和快速使用、cbv源码分析
目录 一.restful规范(重要,不难) 概念 十个规范 二.序列化反序列化 三.基于django原生编写5个接口 四.drf介绍和快速使用 概念 安装 代码 五.cbv源码分析 六.作业 1.使用 ...
- 12月12日内容总结——Django之数据增删改查、Django请求生命周期流程图、Django路由层(路由匹配、转换器、正则匹配)、反向解析
目录 一.可视化界面之数据增删改查 二.django请求生命周期流程图 三.django路由层 1.路由匹配 2.转换器 3.正则匹配 不同版本的区别 正则匹配斜杠导致的区别 4.正则匹配的无名有名分 ...
- JSON Crack 数据可视化工具
JSON Crack简介 JSON Crack 是一个很方便的 JSON 数据可视化工具. 该项目不是简单的展示 JSON 数据,而是将其转化为类似思维导图的形式,支持放大/缩小.展开/收缩.搜索节点 ...
- 安卓逆向 JNI实先java与C互通
先来一张吊图 jdk_1.6.0_43/include/jni.h 这个头文件的地址 头文件分布 我们需要熟悉的 反射获取java中的类 1.jclass/类型 (JNICALL *FindClas ...
- 如何在不额外读流的情况下计算md5值
设想这样一个场景:从网络流中读取文件到硬盘中并计算文件的md5值.通常的做法是先将文件保存下来,再计算文件的md5,但这样会一共会出现三次I/O,一次网络I/O,两次磁盘I/O. 导致额外磁盘I/O的 ...
- 大曝光!从RabbitMQ平滑迁移至Kafka架构设计方案!
历史原因,公司存在多个 MQ 同时使用的问题,我们中间件团队在去年下半年开始支持对 Kafka 和 Rabbit 能力的进行封装,初步能够完全支撑业务团队使用. 鉴于在之前已经基本完全实施 Kafka ...
- JZOJ 4276【NOIP2015模拟10.28A组】递推
[NOIP2015模拟10.28A组]递推 思路一 对于 \(30%\) 的数据,由于 \(n\) 和 \(x_i\) 都比较小,所以依题暴力枚举每个整点的坐标算贡献即可 思路二 对于额外 \(20% ...
- JZOJ 5460. 士兵训练
题目 \(1\le n,q \le 2\cdot {10}^5,0\le b_i,l_i \le {10}^9,b_i \ge 1,1 \le S_i \le n\) \(Solution\) 这题很 ...
- JZOJ 3494. 【NOIP2013模拟联考13】线段(segment)
题目 数轴上有很多单位线段,一开始时所有单位线段的权值都是 \(1\).有两种操作,第一种操作将某一区间内的单位线段权值乘以 \(w\),第二种操作将某一区间内的单位线段权值取 \(w\) 次幂.并且 ...
- js中Math.floor、Math.ceil、Math.round和parseInt小数取整小结
虽然知道结果都可以返回一个整数,但是四者的区别尤其是关于-0.5的取整情况貌似还是需要注意一下一.Math.floor(向下取整) 作用:返回小于等于参数的最大整数. eg: Math.floor(5 ...