[TOC] 0x01 前言简述 题外话: 由于公司内部系统不只支持将后台网页中的数据进行导出为docx或者html而只能打印成PDF，所以为了丰衣足食选择了自己进行开发一个浏览器插件来提取网页中的代码片段与提前设置好的...1.Firefox扩展开发简述 描述:Firefox 开发者工具可以帮助我们在 PC 和移动设备上检查，编辑，调试 HTML、CSS 及 JavaScript。...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行，实际上扩展是用来提升或补充网站功能； 让用户展现他们的个性：浏览器扩展可以操控网页的内容； 从网页中添加或删除内容...WeiyiGeek.临时加载 2.现在尝试访问访问，你将会在页面上看到有个红色的边框，与此同时修改main之后需要重新点击临时插件中的加载页面马上就会有变化 ?...WeiyiGeek.执行效果 2.第二个扩展实例 描述:实现将扩展添加一个新按钮到 Firefox 的工具栏，并在用户点击该按钮时，我们会显示一个弹出窗（popup）来让他们选择操作; 实现要点: 1.
[TOC] 0x01 前言简述 题外话: 由于公司内部系统不只支持将后台网页中的数据进行导出为docx或者html而只能打印成PDF，所以为了丰衣足食选择了自己进行开发一个浏览器插件来提取网页中的代码片段与提前设置好的...1.Firefox扩展开发简述 描述:Firefox 开发者工具可以帮助我们在 PC 和移动设备上检查，编辑，调试 HTML、CSS 及 JavaScript。...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行，实际上扩展是用来提升或补充网站功能； 让用户展现他们的个性：浏览器扩展可以操控网页的内容； 从网页中添加或删除内容...: WeiyiGeek.临时加载 2.现在尝试访问访问，你将会在页面上看到有个红色的边框，与此同时修改main之后需要重新点击临时插件中的加载页面马上就会有变化 WeiyiGeek.执行效果 2.第二个扩展实例...描述:实现将扩展添加一个新按钮到 Firefox 的工具栏，并在用户点击该按钮时，我们会显示一个弹出窗（popup）来让他们选择操作; 实现要点: 1.定义Browser Action设置相应的图标，
handleRes({a: 1, b: 2});Promise.allPromise.all是支持链式调用的，本质上就是返回了一个Promise实例，通过resolve和reject来改变实例状态。...return self.apply(context, [...args, ...arguments]) }}手写 Promise.all1) 核心思路接收一个 Promise 实例的数组或具有 Iterator...，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。...2）实现代码一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来...时才能转变， if (self.state === PENDING) { // 修改状态 self.state = RESOLVED; // 设置传入的值
解决办法： 使用软件编辑HTML网页内容； 如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码； 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换...{resolved>: 1} 代码的执行过程如下： 首先会进入Promise，打印出3，之后进入下面的Promise，打印出7； 遇到了定时器，将其加入宏任务队列； 执行Promise p中的resolve...在 Web 端，我们常见的就是 DOM 事件： DOM0 级事件，直接在 html 元素上绑定 on-event，比如 onclick，取消的话，dom.onclick = null，同一个事件只能有一个处理程序...内核，俗称 Firefox 内核； （4） Safari 浏览器内核：Webkit 内核； （5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了...因为事件绑定上在a标签元素上，而触发这些内部的元素时，e.target指向的是触发click事件的元素（span、img等其他元素）。
浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。...Gecko： 这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。..., 并将结果保存下来；碰到promise1.then这个微任务，将它放入微任务队列；promise2是一个新的状态为pending的Promise；执行同步代码1， 同时打印出promise1的状态是resolved...所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。...JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎
该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行....因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可...，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。...在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。在发起请求前，可以为这个对象添加一些信息和监听函数。...(this.statusText); }};// 设置请求失败时的监听函数xhr.onerror = function() { console.error(this.statusText);};//
上面已经说到了，命中协商缓存的条件有两个：max-age=xxx 过期了值为no-store使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本...（1）服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的...使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag...最终的状态是resolved还是rejected的它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。...{resolved>: undefined}复制代码需要注意的是最后一个定时器打印出的p1其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise
常见的浏览器内核比较 Trident： 这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好...Gecko： 这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。...3）Promise缺点 1、无法取消Promise，一旦新建它就会立即执行，无法中途取消。 2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。...//vue中购物车逻辑的实现 1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性 2. 在vuex中state中添加一个数据 cartList 用来保存这个数组 3....同理，在进行进程切换时，涉及当前执行进程 CPU 环境还有各种各样状态的保存及新调度进程状态的设置，而线程切换时只需保存和设置少量寄存器内容，开销较小。 如何防御 XSS 攻击？
也就是说你在.finally()函数中是无法知道Promise最终的状态是resolved还是rejected的它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的...Gecko： 这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。...，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。...懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的...因为服务器返回302代码，搜索引擎认为新的网址只是暂时的。使用场景：当我们在做活动时，登录到首页自动重定向，进入活动页面。未登陆的用户访问用户中心重定向到登录页面。访问404页面重新定向到首页。
重新整理一下产品的需求： 页面上查看服务器上的 pdf 文件 支持页码跳转、旋转、缩放 打开要快 基本上前两条上述方案都能满足，所以我们需要解决的关键问题在于如何让用户快速打开内容，减少等待时间。...总结 & 遇到的坑 我们在程序设计中，遇到请求数据较大、任务执行时间过长等场景时很容易想到通过数据切分、任务分片等方式来提升程序在系统中的执行&响应效果。...具体的实现大家有兴趣可以自己尝试。 实际使用场景中，我们也遇到了一些坑。上述方案在进行页面渲染时，会预先初始化整个容器（ contentView）的大小。...针对上述问题，目前我们思考了两种方案： 将大小不一样的页面进行缩放。当我们发现页面大小和保存的 pageSize 不一致时，可以将当前页进行缩放，这样就将所有页面的大小转化成了一样。...但是这样做用户体验会有所影响，因为用户看到的页面内容大小可能和他实际上传的不一样。 可以在服务器上提前计算好每一页的页面大小，返回给前端。前端在渲染指定页时，根据服务器返回的数据进行来计算页面位置。
获取构造函数的 prototype 对象 // 判断构造函数的 prototype 对象是否在对象的原型链上 while (true) { if (!...错误信息作为 Promise.all 的错误信息。...(null); }); return promise;}复制代码手写 call 函数call 函数的实现步骤：判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况...判断传入上下文对象是否存在，如果不存在，则设置为 window 。处理传入的参数，截取第一个参数后的所有参数。将函数作为上下文对象的一个属性。使用上下文对象来调用这个方法，并保存返回结果。...deepCopy(object[key]) : object[key]; } } return newObject;}复制代码实现Promise我很早之前实现过一版，而且注释很多，但是居然找不到了
，返回值数组与参数顺序一致参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。...2）实现代码一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来...; const res = context[fn](...args); delete context[fn]; return res;}复制代码实现字符串翻转在字符串的原型链上添加一个方法，实现字符串翻转...，但是居然找不到了,这是在网络上找了一版带注释的，目测没有大问题，具体过程可以看这篇史上最易读懂的 Promise/A+ 完全实现var PromisePolyfill = (function () {...在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。在发起请求前，可以为这个对象添加一些信息和监听函数。
获取构造函数的 prototype 对象 // 判断构造函数的 prototype 对象是否在对象的原型链上 while (true) { if (!...在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。在发起请求前，可以为这个对象添加一些信息和监听函数。...判断传入上下文对象是否存在，如果不存在，则设置为 window 。处理传入的参数，截取第一个参数后的所有参数。将函数作为上下文对象的一个属性。使用上下文对象来调用这个方法，并保存返回结果。..."，使其变成一个promise对象参数所有回调成功才是成功，返回值数组与参数顺序一致参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息...2）实现代码一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来
不过catch方法还有一个作用，就是在执行resolve回调函数时，如果出现错误，抛出异常，不会停止运行，而是进入catch方法中。...，这个数组按顺序保存着每一个promise对象resolve执行时的值。...如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；反之第一个promise变成rejected，那自身状态就会变成rejected。...事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数...}}对 rest 参数的理解扩展运算符被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组：function mutiple(...args) { let result = 1; for
在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。在发起请求前，可以为这个对象添加一些信息和监听函数。...(null);Promise.allPromise.all是支持链式调用的，本质上就是返回了一个Promise实例，通过resolve和reject来改变实例状态。...获取构造函数的 prototype 对象 // 判断构造函数的 prototype 对象是否在对象的原型链上 while (true) { if (!...delete context.fn; return result;};手写 apply 函数apply 函数的实现步骤：判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call...判断传入上下文对象是否存在，如果不存在，则设置为 window 。将函数作为上下文对象的一个属性。判断参数值是否传入使用上下文对象来调用这个方法，并保存返回结果。
对于 then 来说，本质上可以把它看成是 flatMap1. Promise 的基本情况简单来说它就是一个容器，里面保存着某个未来才会结束的事件（通常是异步操作）的结果。...其实早在2007年之前，市面上浏览器都是单进程的图片缺点不稳定：一个插件的意外崩溃会引起整个浏览器的崩溃不流畅：所有页面的渲染模块、JavaScript执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行不安全...，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题JavaScript也是运行在渲染进程中的...因为服务器返回302代码，搜索引擎认为新的网址只是暂时的。使用场景：当我们在做活动时，登录到首页自动重定向，进入活动页面。未登陆的用户访问用户中心重定向到登录页面。访问404页面重新定向到首页。...5XX (Server Error 服务器错误状态码)5XX 的响应结果表明服务器本身发生错误.（1）500 Internal Server Error该状态码表明服务器端在执行请求时发生了错误。
Gecko： 这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。...同理，在进行进程切换时，涉及当前执行进程 CPU 环境还有各种各样状态的保存及新调度进程状态的设置，而线程切换时只需保存和设置少量寄存器内容，开销较小。...（1）服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的...使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag...这时因为在b方法执行时，temp 的值为undefined。 如何实现浏览器内多个标签页之间的通信? 实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。
浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。...在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。...3）Promise缺点1、无法取消Promise，一旦新建它就会立即执行，无法中途取消。2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。...它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。...js语言是弱语言类型， 因此我们在项目开发中当我们随意更该某个变量的数据类型后有可能会导致其他引用这个变量的方法中报错等等。
框架介绍 Puppeteer 译为木偶，是一个 Node.js 库，内部通过 DevTools 协议提供控制 Chrome 或 Firefox 的一系列 API。...在示例中我尝试模拟用户在 caniuse.com 检索 Flexible 关键词，并打印出的第一条信息的描述内容： import puppeteer from 'puppeteer'; (async...Puppeteer 驱动的页面上下文中执行 JavaScript 函数同样在入门示例中有过使用，但没有提到如何传递参数和其中的一个缺陷。...$eval() 返回与选择器匹配的第一个元素上运行 JavaScript 函数的结果 page....$$eval() 返回与选择器匹配的每一个元素上运行 JavaScript 函数的结果 扩展选择器： XPath 选择器（-p-path）： import pptr from 'puppeteer'
只有你想不到的，没有我玩不顺的！奈何我们只有一块屏幕（ps: 用扩展屏的大佬打扰了），这个时候就需要一个辅助英雄——画中画，来提高我们桌面利用率并提高时间效率。...何为画中画 首先请允许我介绍下“画中画”：画中画（英文Picture-in-picture，缩写PiP）是指将一个电视节目（或其他画面）显示在整个画面上，同时将另一个或多个其他画面显示在角落中，通常只播放主窗口的声音...重启chrome浏览器 在含有视频的页面使用鼠标右击视频区域，点击菜单栏中的「画中画」选项观看视频 正式开启 到了70版本已默认开启该特性，安装chrome扩展插件可进入画中画，进入画中画后，页面选项卡会出现一个蓝色的图标...FireFox 目前Firefox的画中画功能还在测试之中，需要Firefox超前测试版Nightly才能开启画中画模式，具体步骤如下： 打开about:config设置页 搜索media.videocontrols.picture-in-picture.enabled...），我将对目前已支持的浏览器（chrome和safari）分别介绍其Web API： 在chrome上运行 先来看一个示例（示例中的视频源来自腾讯）： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
