追逐丶的博客

对于熟练的前端开发来说，http请求是最常见不过的家常便饭。但是对于深度疑难问题，只会F12的网络分析，就显得有些不足了；本文深度介绍https原理，及对前端开发的实际帮助。

在某些情况下，当用户执行诸如导航到不同页面或提交表单之类的操作时，我需要发送带有一些数据的请求来进行一些站点统计。本文探讨如何可靠的发送这些请求

多活主备选择性DNS问题背景知识背景DNS解析存在多级缓存（此处仅列举到DNS服务器层；后续流程不涉及）DNS一对多域名的解析随机性DNS 域名解析负载均衡缺点：可能方案方案一、dns解析层面控制DNS解析结果1.1 通过内置DNS服务器控制IP解析（伪造DNS）1.2、让备机nginx的状态能够影响DNS服务器解析方案二、在DNS解析到备机后，提供备机跳转解决方案2.1 、在访问到备站点后，前端使用脚本/在备机nginx层进行域名重定向2.1.1 nginx层控制2.1.2 备机页面脚本层控制2.1.3

“低代码开发”最早可追溯到20世纪90年代至21世纪初的编程语言和工具（百度百科）。阿里云智能总裁张建锋在钉钉6.0发布会上也表示，“低代码开发”，将成为新一代的软件开发方式。“钉钉宜搭低代码开发工具，让不懂代码的用户，也能快速开发新应用。”一、 什么是“低代码开发平台”“低代码开发平台”，英文全称“Low-Code Development Platform”，简称LCDP，是通过少量代码或零代码就可以快速生成新应用的开发平台。其实就是让不懂写代码的用户，或者技术人员，利用“可视化”窗口，通过“拖拽

前言：7月4日，字节跳动Web开发引擎负责人杨扬（dexteryy）在 GMTC 全球大前端技术大会（北京站）2021 上又搞了一场「跨年演讲」（内容超多的意思），不但现场爆满、超时严重，而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来，大家可按需取用。亮点：为了方便大家理解，杨扬（dexteryy）同学为这次分享画了 90 张图（工具是 Keynote），其实在内部版《Modern Web Stack》里有 120 多张图…可以看到幻灯片上的标题，跟会议日程里的标题有些不一样，「现代 We.

SMC前端自动化测试用例开发指南一、前置步骤1.1 如何运行测试框架1.1.1 生产环境运行1.1.2 开发&调试环境1.2 用例的树状设计概念1.3 一个用例产生的过程二、用例设计2.1 设计原则2.1.1 页面覆盖度原则2.1.2 业务最小化原则2.2 设计步骤三、用例实现3.1 代码结构3.1.1 `cases`3.1.2 `config`3.1.3` core`3.1.4 `enum`3.1.5 `interfaces`3.1.6 `utils`3.2 Case类3.2.1 `exec` 函

背景纯nodejs环境，直接使用tsc编译nodejs。源码目录是src，编译输出目录为bin。代码结构如下：srcutilsa.tsb.tsconfig…bintsconfig.json在其他深层次目录引用utils或者config下的文件时，总是要写一长串的'../../../../'，还需要数数。这显然是不能接受的。用过webpack开发的小伙伴们，想想别名功能，typescript这种成熟框架不可能没有。于是百度一波，得到如下配置：{ "baseUrl"

在访问网页的时候，因为浏览器自身的安全设置问题，对于https的网页访问会出现安全隐私的提示，甚至无法访问对应的网站，尤其是chrome浏览器，因此本文主要讲解如何设置chrome浏览器的设置，来解决该问题，具体如下：问题Chrome访问https页面显示ERR_CERT_INVALID，以往版本可以选择跳过，继续访问，但是新版本Chrome不允许继续，且提示：您的连接不是私密连接攻击者可能会试图从 XX.XX.XX.XX 窃取您的信息（例如：密码、通讯内容或信用卡信息）。了解详情 ，NET.

背景项目组前端代码eslint久失维护，大家有的人有代码规范，有的人没有。新来的代码规范也是从老的手里copy一份。每个人eslint插件的版本、配置、代码项均不同。导致改代码的时候，为了避免自动fix带来的大量代码改动，不得不暂时关闭eslint，改完后，无规则校验上库。代码规范缺乏校验，上库代码质量日益下降。第一步按照可信认证规则（标准代码规范）配置eslintrc文件，插件的配置自不必说。为了支持js/ts/jsx/tsx ，需要安装eslint的4个插件,配置在plugin中。注意为了支持ts

一、背景Vue 3.0已经出到3.0.5了，React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks，那么Hooks式的编程到底有什么好处？参加本人的这篇文章。二、使用项目ReactVue包名swrvue-swr仓库地址github-swrgithub-vue-swr二、useSWR随着React Hooks的浪潮，各种基于Hooks 的方案越来越多，其中主要包含 状态管理、数据请求、通用功能的封装 等等。而 数据请求 是日常业务开

一、背景二、步骤2.1 升级webpack5 npm 包至 5.9.0以下的 configuration 标识配置的根对象2.2 npm run build2.1 configuration.node 不兼容：5.x 版本node只有3个配置项。详见 这里4.x node 配置 详见这里这里修改前：node: { module: 'empty', dgram: 'empty', dns: 'mock', fs: 'empty'

背景随着Babel、TypeScript、VueLoader、Terser等编译、转译技术的大规模使用，Webpack的编译时间正不断膨胀。为了优化编译速度，社区主要有两种方案：通过把loader的处理结果缓存到本地磁盘，来加速二次编译通过预编译dll让webpack跳过一些模块的编译，来加速编译这些方案在一定程度上解决了编译速度慢的问题，但随之而来的是成堆的配置，严重影响了Webpack的使用体验，甚至出现了“Webpack配置工程师”这种“新职业”。与此同时，社区出现了一些新兴的编译技术，

一、背景什么是Pnp?可以详见本人的这篇博客。Pnp实际是yarn的一个特性，所以说如果你的项目中不使用yarn构建，那就可以不用使用这个插件。其次，即使你使用了yarn，如果不通过文中所述的开启pnp的方法去启用pnp，那这个插件对你来说也是无用的。二、使用大家知道webpack的reslove模块是用来配置模块解析规则的。如果你的项目中启用了pnp，那么想象一下，最基本的，就是你没有node_modules文件夹了。你的所有的依赖配置都会存储在.pnp.js文件中（实际依赖项安装在系统根目录），这

一、前言Yarn 团队在春节前公布了 Yarn 2.0 的规划。其中提到了一个之前没听说过的名词 “PnP”。发现 Yarn 的这个功能早在 18 年 9 月份就被提出并实现了。于是花了一些时间了解了一下它的工作原理以及解决的问题并整理除了本篇文章。二、现状与痛点Yarn 团队开发 PnP 特性最直接的原因就是现有的依赖管理方式效率太低。引用依赖时慢，安装依赖时也慢。先说说 Node 在处理依赖引用时的逻辑，这个流程会有如下两种情况：如果我们传给 require()调用的参数是一个核心模块（例如

一、 javascript 中包管理的历史npm 出现之前：前端依赖项是保存到存储库中并手动下载的2010：npm 发布并支持 nodejs2012：npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持2012：npm 有了一个竞争对手 bower，它完全支持浏览器2012-2016：前端项目的依赖项数量成倍增加2012-2016：构建和安装前端应用变得越来越慢2012-2016：大量（重复的）依赖项存储在神奇的 node_modules 内

一、背景要了解WorkboxWebpackPlugin，首先需要说两个概念：第一个是ServiceWorker,第二个是PWA。ServiceWorker 本人写了一篇浅谈，大家可以先看一下。关于PWA,网上的讲解也很多，大家看完ServiceWorker，就知道ServiceWorker其实是基于WebWorker的一门技术。而PWA，就是基于ServiceWorker的一门技术。#mermaid-svg-gugOl7MTKFg3nMxO .label{font-family:'trebuchet m

一、 service worker 是什么一句话概括一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。细碎的描述基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）在web worker的基础上增加了离线缓存的能力

一、背景说道referer ，大家想必知道的清楚一些。referer是用来防止 CORS（跨站请求伪造）的一种最常见及有效的方式。对于自身服务器，通过客户端发来的请求中带有的referer信息，可以判断该请求是否来源于本网站。这样就可以一定程度上避免其他网站盗取自身服务器信息，或者可以通过referer来实现广告流量引流，说白了，referer是一种客户端带到服务器的客户端信息，而Referrer-Policy则是客户端对这个带信息策略的配置。二、配置方式1 、HTML 配置既然是客户端策略，那么在

一、要实现的功能我们使用React开发项目的时候，基本上是单页面应用，也就离不开路由。路由看似神秘，当我们简单的模拟一下它的核心功能后，发现也就这么回事儿。本文就详细的介绍一下react-router-dom 的 HashRouter的核心实现逻辑。本文主要实现的功能主要包含：HashRouterRouteLinkMenuLinkSwitchRedirect二、 实现的逻辑先不说代码是怎样写的，先上图，让大家看一下这个HashRouter到底是个什么东东:好吧，肯定有人会说这些圈

一、背景这三种插件都是Webpack常用的压缩代码插件。这三者有什么不同？使用的时候有什么注意点？接下来我们一起探究一下。一、webpack.UglifyjsWebpackPlugin这个是Webpack官方维护，用Uglifyjs进行代码压缩的插件。它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)

一、背景对于Webpack的output属性，大家都知道可以配置文件的输出名称。一般来说，默认的配置都是这样：output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist')}翻看官方文档，我们发现hash 还可以替换为 chunkhash，那么这些到底有什么区别？对于我们的意义又是什么？我们知道，浏览器为了优化体验，会有缓存机制。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接

一、缓存过程分析浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：由上图我们可以知道浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与

一、问题产生项目中为了改进效率，大量采用PureComponent代替原先的Component，来避免跟组件的重新渲染，带动所有子节点数的重新渲染。对于PureComponent来说，我们清楚的知道他只是在原有的Component基础上，通过shallowEqual浅比较，为我们提供了一层shouldComponentUpdate的判断。来避免我们在props和state不变的情况下，重复调用render函数，导致性能下降。大部分的改进很顺利，只需要提取浅层的props传递即可。但是对于有函数式的prop

一、前言对于react 高阶组件。大家基本只知道定义和用法，在实际开发中，使用的可能并不多。项目组下来一个任务，重写某个由Antd Table渲染为主要功能的模块，这里发现一些问题，Antd Table在渲染时，即使没有改变Table的props，只是改变包裹Table的组件，Table组件也会重新渲染。二、问题产生import { Table} from 'antd';class TestRoot extends Component { change() { this.setState(

一、问题产生项目中由于版本问题必须升级stomp.js。然而stomp.js包内部使用的TextEncoder和TextDecoder在IE下并不兼容。导致整个项目在IE下无法跑。兼容性查看入口.二、解决尝试text-encoding.js在npm上找到了兼容库 text-encoding.js,这是github 链接地址,这是npm链接地址。然而很不幸的是，这两个都已经停止维护，公司也无法将其作为开源软件引入，故放弃。当然，对于大家要求没那么严格来说，完全可以使用。自己写一个text-encod

一、概念DLLPlugin和 DLLReferencePlugin用某种方法实现了拆分 bundles，同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 DllReferencePlugin 来引用动态链接库的代码。一般会对常用的第三方模块使用这种方式，例如 react、react-dom、lodash 等。只要这些模块不升级更新，这些动态链接库就不需要重新编译。故我们需要创建一个

前言移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图 所示。根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢,用户就会失去耐心而选择离开。首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。本文我们通过 8 道面试......

一、前言看到一个关于通过实践代码，将webpack讲的非常好的文章。拿过来给大家分享一下,强烈建议准备一个IDE 按照步骤编写代码，完事后，会有非常大的收获。什么是webpack?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency grap...

说明以下方式可以直接拷贝到浏览器运行，缩放拖动浏览器大小即可观看效果。一、 利用定位实现<!doctype html><html><style> .wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%; }......

前言echartsGL官网示例有个很炫酷的散点图，通过服务器分批加载实现了千万条以上数据的展示：domo可以看这里。其实就是分批加载服务器数据然后呈现。看上去很简单，其实坑不是一般的多。二、数据转换通过官网下载上述demo，放到本地，打开控制台，找到数据请求地址，修改demo里的ROOTPATH，尝试在本地跑起来。一看，报错。接口不支持跨域。没办法，只能模拟一下接口返回的数据，通过Fl......

一、问题产生开发微信小程序，需要在原生的map组件上覆盖一个按钮图片，用来进行分享（很常见的需求）。可是了解api得知，要覆盖地图组件，只能使用cover-view进行。并且官方文档说的很清楚，cover-view内部是可以镶嵌button的，并且分享功能只能通过button组件的open-type进行。写下如下代码：<cover-view class="share-cover-view......

问题产生在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit('u......

一、直接上效果demo在这里（受到带宽限制，加载可能略慢）如果不能看，可以看这个。二、说明这是一个基于cesium-navigation-es6 迁移的仓库。但是原作者仅提供es6 模式下的引用，需要npm 安装。我使用rollup重新编译了原作者的release。去掉了dev依赖。dist中内容为编译产物。可以直接引用。原作者github主页三、使用说明如果你的......

一、问题产生问题产生很简单。公司要做一个需求，定位飞行功能，即，点击定位，获取经纬度，一个飞行的动画，飞到目标点和层级。拿到这个需求的时候，心里想，这简单啊。直接查OpenLayer API.找到了这样的一个函数：view.animate(var_args)于是手气刀落，敲下了这样一段代码：//获取目标定位点等函数省略this.map.getView().animate({cente......

一、前言看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的XMLHttpRequest标准。看完标准后我如同......

一、问题产生好好的webpack项目，本来正常跑，正常编译。结果某天突然就这样：ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,“remove”:true}!../pcClient/node_modules/_vue-......

<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0">强制浏览器每次请求资源时，从服务器下载最新资源。记下来，备用...

一、抛砖引玉对于Leaflet创建map。总有一个很重要头疼的属性–crs: this.map = L.map("view-map", { zoomControl: false, attributionControl: false, crs: L.CRS.EPSG3857, minZoom: 1, maxZoom: 20,...

一、为什么选用roll-uproll-up是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，...

一、问题产生本人在写一个用户可以自定义编写代码逻辑的软件。对于某个代码块，需要执行用户自己编写的javascript代码（字符串），自然而然的就用到了eval。对此我声明了一个处理类，主要逻辑函数如下。export default class DBCCondition extends ConditionBase { constructor(past_results, cdata) {...