首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web性能优化之Worker线程(上).md

任何与「创建」共享工作者线程脚本「同源」脚本,都可以向共享工作者线程发送消息或从中接收消息 服务工作线程Service Worker:主要用途是「拦截」、「重定向」和「修改页面发出请求」,充当「网络请求...WorkerGlobalScope 在网页上,window 对象可以向运行在其中脚本「暴露各种全局变量」。...工作线程和父上下文间」传输信息,以及「捕获」专用工作线程发出事件。...,也包括「全局变量」。...---- 共享工作线程Shared Workers 从行为上讲,共享工作线程可以看作是专用工作线程一个「扩展」。线程创建、线程选项、安全限制和 importScripts()行为都是相同

1.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

Workbox5+Webpack4构建离线应用

上图从深入理解浏览器缓存处参考 http缓存依赖于服务端配置,memory cache和disk cache缓存内容不可控,而且只缓存一些静态资源,push cache是临时缓存,localstorage...引入方式 有两种方式可以引入workbox: 第一种最为方便,就是通过importScripts()方法从谷歌官方CDN中引入。...通过以下四个步骤,我们能将webpack引入到一个由webpack构建应用中并实现缓存。...console.log("注册sw") register(`/${swDest}`, { ready(registration) { // 此方法是我们项目中自己封装创建自定义事件公共方法...,需要在src目录下创建一个sw.js(命名自定义,但需要和webpack配置中一致),在这个文件中我们可以进行预缓存等操作。

1K10

Web Worker 初探

作用就是给JS创造多线程运行环境,允许主线程创建worker线程,分配任务给后者,主线程运行同时worker线程也在运行,相互不干扰,在worker线程运行结束后把结果返回给主线程。...,worker线程无法读取本地文件,它所加载脚本必须来自网络,且需要与主线程脚本同源 DOM操作限制 worker线程在与主线程window不同另一个全局上下文中运行,其中无法读取主线程所在网页...脚本限制 worker线程不能执行alert、confirm,但可以使用 XMLHttpRequest 对象发出ajax请求。...worker线程中加载脚本api: importScripts('script1.js') // 加载单个脚本 importScripts('script1.js', 'script2.js')...使用教程 JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景 Web Worker在项目中妙用 怎么在 ES6+Webpack 下使用 Web Worker

1K40

性能优化篇---Webpack构建代码质量压缩

, //是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句 drop_console...collapse_vars: true, // 提取出现多次但是没有定义成变量去引用静态值 reduce_vars:true...;但是它依赖于ES6静态花模块语法import\export导入和导出 webpack接入 修改.babelrc保留ES6模块话语句 注意新版本babel-preset-env已经预设babel-preset-es2015...,babel推荐使用babel-preset-env取代babel-preset-es2015,并且继续使用babel-preset-es2015会发出警告信息。...接入好处: 代码体积减少 代码在运行时因为创建函数作用域更少了,内存开销也随之变小 webpack接入ModuleConcatenationPlugin内置插件 const ModuleConcatPlugin

1K00

Webpack 原理系列九:Tree-Shaking 实现原理

,若变量没有被其它模块使用则删除对应导出语句 标记功能需要配置 optimization.usedExports = true 开启 也就是说,标记效果就是删除没有被其它模块使用导出语句,比如:...示例中,bar.js 模块(左二)导出了两个变量:bar 与 foo,其中 foo 没有被其它模块用到,所以经过标记后,构建产物(右一)中 foo 变量对应导出语句就被删除了。...方法生成代码 在 apply 方法内,读取 ModuleGraph 中存储 exportsInfo 信息,判断哪些导出值被使用,哪些未被使用 对已经被使用及未被使用导出值,分别创建对应 HarmonyExportInitFragment...3.3 禁止 Babel 转译模块导入导出语句 Babel 是一个非常流行 JavaScript 代码转换器,它能够将高版本 JS 代码等价转译为兼容性更佳低版本代码,使得前端开发者能够使用最新语言特性开发出兼容旧版本浏览器代码...Webpack 无法对转译后模块导入导出内容做静态分析,示例: 示例使用 babel-loader 处理 *.js 文件,并设置 Babel 配置项 modules = 'commonjs',将模块化方案从

2.1K10

探索 模块打包 exports和require 与 export和import 用法和区别

;第二种写法则是先进行变量声明,然后再用同一个export语句导出。.../api/module/es6_export.js'   ES6 Module导入、导出语句都是声明式,它不支持导入路径是一个表达式,并且导入、导出语句必须位于模块顶层作用域(比如不能放在if语句中...中count值,但是并不会对PageModule.vue中导入时创建副本造成影响。...3.3  循环依赖    循环依赖是指模块A依赖于B, 同时模块B依赖于模块A。...但实际情况往往是A依赖于B,B依赖于C,C依赖于D,最后绕了一圈,D又依赖于A。当中间模块太多时就很难发现A和B之间存在着隐式循环依赖。   因此,如何处理循环依赖是开发者必须要面对问题。

1.7K10

CommonJS与ES6 Module本质区别

/calculator.js'; ES6 Module导入、导出语句都是声明式,它不支持导入路径是一个表达式,并且导入、导出语句必须位于模块顶层作用域(比如不能放在if语句中)。...中count是对calculator.js中count一份值拷贝,因此在调用add函数时,虽然更改了原本calculator.js中count值,但是并不会对index.js中导入时创建副本造成影响...ES6 Module中导入变量其实是对原有值动态映射。...但实际情况往往是A依赖于B,B依赖于C,C依赖于D,最后绕了一大圈,D又依赖于A。当中间模块太多时就很难发现A和B之间存在着隐式循环依赖。 因此,如何处理循环依赖是开发者必须要面对问题。.../foo.js'; 执行结果如下: value of foo: undefined value of bar: This is bar.js 很遗憾,在bar.js中同样无法得到foo.js正确导出值

31310

Webpack 概念

什么是 webpack 模块 对比 Node.js 模块,webpack 模块能够以各种方式表达它们依赖关系,几个例子如下: ES2015 import 语句 CommonJS require() 语句...AMD define 和 require 语句 css/sass/less 文件中 @import 语句。...: 操作符 对常用值使用常量或变量 编写并执行函数来生成部分配置 依赖图表(Dependency Graph) 任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。...入口(entry) webpack创建所有应用程序依赖关系图表(dependency graph)。图表起点被称之为入口起点(entry point)。...站在编译器(webpack) 角度 除了普通资源,编译器(compiler)需要发出 "update",以允许更新之前版本到新版本。"

1.4K80

web应用支持离线访问和策略缓存吗?

使用 service worker 前,需要创建一份注册文件,不妨在项目下创建一个名为 sw.js 文件 console.log('Hello, I am sw.js file') 然后在应用中通过这个文件进行注册...###导入Workbox 首先在 sw.js 第一行导入 workbox.js 语法如下 importScripts('https://storage.googleapis.com/workbox-cdn...接下来重点便是放在如何基于路由,如何体现策略。 前端大多资源都是通过 HTTP 请求得来,包括 js 、css 、 图片等等,既然这些内容都需要请求,那我能不能在请求发出后,做一些处理呢?...中使用workbox 首先安装 workbox-webpack-plugin ,选择使用npm安装 npm install --save-dev workbox-webpack-plugin 在webpack...配置文件中配置该插件 const workboxPlugin = require('workbox-webpack-plugin'); // ... webpack({ plugins: [

96120

Web Worker使用教程

Web Worker作用就是为JavaScript创建多线程环境,允许主线程创建Worker线程,将一些任务分配给后者运行,两者互不干扰。等到Worker线程完成计算任务,再把结果返回给主线程。...:Worker线程所在全局对象,与主线程不一样,无法读取主线程所在网页DOM对象,也无法使用document、windown、parent这些对象。...(4) 脚本限制:Worker线程不能执行alert()和confirm(),但可以使用XMLHttpRequest对象发出Ajax请求 (5) 文件限制:Worker线程无法读取本地文件,即不能打开本机文件系统...接着,主线程通过worker.onmessage指定监听函数,接收子线程发出消息。...Worker加载脚本 Worker内部如果需要加载其他脚本,有一个专门方法importScripts()。

1.6K00

前端er来学习一下webWorker吧

在项目中:我们可以把worker线程逻辑写在js文件里面,然后字符串化,然后再export、import,配合webpack进行模块化管理,这样就很容易使用了。 主线程其他 API: 1....importScripts('http~.js','http~2.js'); 脚本中全局变量都能被 worker 线程使用。...脚本下载顺序是不固定,但执行时会按照传入 importScripts() 中文件名顺序进行,这个过程是同步。...在 worker 线程内再新建 worker 线程就不能使用window.URL.createObjectURL(blob),需要使用同源脚本文件来创建 worker 线程,因为我们无法访问到window...一旦数据转移到其他线程,原先线程就无法再使用这些二进制数据了,这是为了防止出现多个线程同时修改数据麻烦局面 下方栗子出自浅谈 HTML5 Web Worker // 创建二进制数据 var uInt8Array

47720

webWorker详解与用法

注意:一旦terminate后,无法重新启用,只能另外创建。 //worker = new Worker('url'); worker.terminate(); 如,主页面: <!...worker.js执行上下文,与主页面html执行时上下文并不相同,最顶层对象并不是window,woker.js执行全局上下文,是个叫做WorkerGlobalScope东东,所以无法访问window...close 关闭当前线程,与terminate作用类似 importScripts 我们可以通过importScripts()方法通过url在worker中加载库函数 XMLHttpRequest 有了它...,才能发出Ajax请求 setTimeout/setInterval 延时执行函数和定时执行函数,和window对象方法相同。...实现不大一致,例如FF里允许worker中创建worker,而Chrome中就不行 4.IE这个新特性

1K20

记录:Webpack5把微前端qiankun配置文件干没了

核心问题是:当时发现子应用__webpack_publicPath__这个变量没有被修改,所以造成了请求host不对,异步加载js文件404了 由于在排查这个问题之前,我在群里说了一句,有问题大家要一起看...,其实是可以通过__webpack__pulicPath__这个变量来设置 这也是最早webpack5联邦模块实现思路,可以动态加载远程js文件,只要控制这个前缀变量__webpack_pulicPath...它依赖于 ES2015 模块语法 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来。...usedExports 依赖于 terser 去检测语句副作用。它是一个 JavaScript 任务而且没有像 sideEffects 一样简单直接。...它类似于 /#__PURE__/ 但是作用于模块层面,而不是代码语句层面。

1.2K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券