随笔分类 - 前端其他
浏览器&打包等等
摘要:Could not find iPhone X simulator 本地装的 RN 0.57.8,node 8.11.0,xcode 11.5 找到 node-modules/react-native/local-cli/runIOS/findMatchSimulator.js 的这行 if (!v
阅读全文
摘要:介绍 浏览器指纹简单来说就是获取浏览器一些具有辨识度的信息,计算得到的值,以此指纹信息可以对应此用户。辨识度的信息可以是 UA、时区、地理位置或者是你使用的语言等其他的参数,信息越多并且信息的区别度越大,越能决定浏览器指纹的准确性。 直接使用 fingerprint2 库 <script src="
阅读全文
摘要:描述 浏览器控制台警告 A cookie associated with a cross-site resource at was set without the SameSite attribute 参见Chrome Platform Status 与 stackoverflow - SameSi
阅读全文
摘要:设我们有这么一个数据希望能导出成为 csv 文件 const title = { name: '名字', age: '年龄', sex: '性别', city: '所在城市', weight: '体重', height: '身高', }; const body = [ { "name": "张三",
阅读全文
摘要:指标: 页面是否能正常访问?首次内容绘制(First Contentful Paint, FCP) 页面内容是否有用?首次有效绘制(First Meaningful Paint,FMP) 页面功能是否可用?可交互时间(Time to Interactive,TTI) 页面内容是否有用比较主观。难以规
阅读全文
摘要:面试时被问过 link prefetch,发现我还是对 HTML5 的内容有所小瞧,那就做一篇笔记吧。 什么是预加载 借助 MDN-Link prefetching FAQ 的描述 链接预取是一种浏览器机制,其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示
阅读全文
摘要:写作背景 今日逛 B 站,发现在弹幕大量涌出来的时候,做了掉帧监测,然后减少掉一些弹幕的出现。那么笔者对 JS 怎么做掉帧监测到的感兴趣。 查了一下方法,还真有一个叫 Frame Timing API 的东西,还是草案,也不是 W3C 标准的,截至 Chrome 80 仍旧没有被支持的迹象。 那么该
阅读全文
摘要:根据 "webpack 官方 v.4.43.0" 的说法是 tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 E
阅读全文
摘要:浏览器的线程模型 我们知道浏览器内核是多线程的 GUI 渲染线程 JavaScript引擎线程 定时触发器线程 事件触发线程 异步http请求线程 其中 GUI 渲染线程和 JavaScript 引擎线程是交替执行的,JavaScript 也可以通过 DOM 接口来对视图进行控制。 这么样的结构还导
阅读全文
摘要:简介 上传是个老生常谈的话题了,多数情况下各位想必用的是uplodify,webUploader之类的插件,但近期团队定制组件的时候,笔者总觉得插件太重,许多功能用不到,那么就自己练手写了一个demo,并且支持图片拖拽排序。支持chrome 31及以上,IE就呵呵了。不过笔者的团队就是不用兼容IE,
阅读全文
摘要:场景 以前见到过一个当你保存某表单成功后,显示倒计时并自动关闭页面的效果,现在终于轮到我来实现了。 不过这有何好说,直接调用下面的代码不就关闭了么? 然而,在最新的 chrome 浏览器上写上却是显示一个警告并且代码并不生效。 翻了好多资料却都于事无补。 close函数的限制 上面出现的警告信息我在
阅读全文
摘要:能捕获的错误类型 语法错误 运行时异常 资源加载异常 img script link audio video iframe ...外链资源的DOM元素 异步请求异常 Promise异常 CSS中资源异常 font face background image 其他的暂时无法捕获 @font face
阅读全文
摘要:简介 让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格),就可以使用EditorConfig插件,会在项目根目录寻找.editorconfig文件并使用其中定义的编码风格。 常用的编码规范 EditorConfig 支持的常用的编码规范,如下 charset:文件编码。可
阅读全文
摘要:"eslint官网" 部分规则的中文解释如下: "no alert": 0,//禁止使用alert confirm prompt "no array constructor": 2,//禁止使用数组构造器 "no bitwise": 0,//禁止使用按位运算符 "no caller": 1,//禁止
阅读全文
摘要:简介 makefile 原来是C语言作为工程化处理的一个实用工具,然后慢慢的迁移到其他平台上了,而在工作中看到的确也有使用 makefile 来集成一些命令的功用。 基本格式 target就是你要执行的命令套件,prerequisties就是依赖,而command就是实际执行的命令, 必须注意:必须
阅读全文
摘要:原理 path标签拥有两个属性:stroke dasharray,stroke dashoffset。 stroke dasharray 前一个数值表示dash,后一个数字表示gap长度(只写单个值表示dash/gap尺寸一致),往复循环; stroke dashoffset 虚线开始时的偏移长度,
阅读全文
摘要:简介 近日业务需要,特来钻研一阵,最后选型svg技术实现,因为方便。 实现步骤 一、先画一圆环 定义让外层容器为宽高110px的正方形,并且定义在容器的中心处(cx="50%"" cy="50%")画半径为50px的圆(r="50"),圆的内容不着色(fill="none")。描边为10px,着描边
阅读全文
摘要:实现 创建一个input,并append到body中,设置其value,并且让其select选中文本。 调用 document.execCommand 命令复制,最后移除input。 var doCopy = function (code) { var input = document.create
阅读全文
摘要:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
阅读全文

浙公网安备 33010602011771号