![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 72
gqkmiss
前端
展开
-
Web 网页性能优化
预加载扫描程序的角色是推测性,也就是说,它会检查原始标记,以便查找资源,以便在主要HTML解析器发现之前抓取相应资源预加载扫描程序是一种浏览器优化,采用辅助HTML解析器的形式,可扫描原始HTML响应,以找出并推测性地提取资源,然后主HTML解析器才会发现这些资源为了充分利用预加载扫描器,服务器发送的HTML标记中应包含关键资源。由CSS使用属性加载的图片。这些图片引用位于CSS中,预加载扫描器无法发现这些引用动态加载的脚本,采用元素标记(使用JavaScript注入DOM。原创 2024-06-04 20:31:56 · 1143 阅读 · 0 评论 -
Web 页面性能衡量指标-以用户为中心的效果指标
FCP:从网页开始加载到网页内容的任何部分呈现在屏幕上所用的时间。首次内容绘制 (FCP) 是一项以用户为中心的重要指标,用于衡量感知的加载速度。它标记了网页加载时间轴中用户可以看到屏幕上任何内容的第一个点。FCP衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标,内容是指文本、图片(包括背景图片)、元素或非白色元素。LCP:从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间LCP。原创 2024-06-04 13:50:29 · 846 阅读 · 0 评论 -
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
页面卸载时的日志记录:在用户离开页面时记录行为数据,如页面停留时间、点击行为等。分析和监控:发送用户行为数据到分析服务器,用于网站性能监控和用户行为分析。状态报告:向服务器报告应用程序状态或错误信息。是一个专为可靠性设计的API,特别适用于在页面卸载时发送少量数据。它具有简单、非阻塞、可靠等优点,特别适合日志记录和用户行为分析等场景。发出的是异步请求,并且是POST请求。只能判断出是否放入浏览器任务队列,不能判断是否发送成功。无需处理返回值。需要注意浏览器兼容问题。原创 2024-05-24 10:11:08 · 428 阅读 · 0 评论 -
JS 监听用户页面访问&页面关闭操作并进行数据上报
页面访问&页面关闭数据上报能清楚的掌握用户的使用数据,对营销活动或者画像分析很有帮助整体没有难点,就是不同项目不同分析如果你的项目是hash改变,那就可以针对hash进行监听主要就是使用进行可靠的数据传输。原创 2024-05-24 10:06:19 · 316 阅读 · 0 评论 -
JavaScript 中的 Range 和 Selection 对象
最近在做鼠标框选的需求,鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围,Selection表示选择的文档内容。下面就详细说下这两个对象。原创 2024-05-23 11:31:58 · 821 阅读 · 0 评论 -
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
鼠标框选上报能监控用户在页面的行为,能为后续的数据分析等提供便利基于JS中的Selection和Range实现的,使用原生JS涉及到的操作比较多,包含键盘、鼠标右键、全选等能对框选的内容进行分类,区别html和text,更方便的看出用户选择了哪些内容。原创 2024-05-23 10:15:13 · 1402 阅读 · 2 评论 -
ES 2024 新特性
ECMAScript 2024,第 15 版,添加了用于调整 ArrayBuffer 和 SharedArrayBuffer 大小和传输的功能; 添加了一个新的 RegExp /v 标志,用于创建具有更高级功能的 RegExp,用于处理字符串集; 并介绍了用于构造 Promise 的 Promise.withResolvers 便捷方法、用于聚合数据的 Object.groupBy 和 Map.groupBy 方法等...原创 2024-05-13 14:26:19 · 660 阅读 · 0 评论 -
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
水印技术调研显示,水印在保护版权、信息标识和安全保护方面具有重要作用。通过CSS、JavaScript或第三方库,可以实现页面水印功能。过多或显眼的水印可能影响用户体验,而性能和兼容性也是考虑的因素。综合评估水印的利弊,可结合实际需求谨慎选择适合的实现方式。如果需求有更复杂的水印,可以按步骤去改即可。原创 2024-04-30 11:09:00 · 1100 阅读 · 1 评论 -
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
需求点:给出一组颜色列表,渲染对应的颜色以及颜色值,但是要保证文本颜色和背景色不冲突,文本颜色保持 和 两种即可示例如下:每个模块背景色为当前颜色,文案内容为当前颜色值,文案颜色为当前颜色通过计算后的 ‘black’ 或 ‘white’四、案例效果展示案例图片展示原创 2024-04-23 17:09:12 · 228 阅读 · 0 评论 -
Axios.post 请求报错: 403 Forbidden missing csrf token 和 invalid csrf token
Axios.post。原创 2023-11-30 17:41:42 · 2095 阅读 · 0 评论 -
网格画法:原生 Canvas 画网格,可拖动、可放大缩小、并带有坐标系 0 0 位置辅助线
使用原生 Canvas 画网格,可拖动、放大缩小、并带有坐标系辅助线原创 2022-08-19 15:58:16 · 2807 阅读 · 0 评论 -
V8 v9.1 版本新特性:顶层 await
V8 release v9.1 04 May 2021 releaseV8 release v9.1Chrome V8 于 5 月 4 号发布 v9.1 版本,带来几个新特性一、Top-level await (顶层 await)Top-level await is enabled by default in V8 starting with v9.1 and is available without --harmony-top-level-await.一句话就是:我们可以在模块顶级中使用.原创 2021-06-07 10:47:28 · 2511 阅读 · 3 评论 -
JavaScript 中 web worker 如何使用?又有哪些限制?
Web Worker1、什么是 web worker?有哪些好处?有哪些问题?Web Worker 就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。好处:好处就是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。问题:Worker 线程一旦新建原创 2021-05-14 15:58:07 · 1759 阅读 · 1 评论 -
link 标签和 script 标签中 dns-prefetch、prefetch、preload、defer、async 字段有什么区别?
标签中 dns-prefetch、prefetch、preload、defer、async 的区别1、dns-prefetch域名转化为 ip 是一个比较耗时的过程,dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名,这时候更加需要 dns 预取。<link rel="dns-prefetch" href="//m.baidu.com">2、prefetchprefetch 一般用来预加载可能使用的资源,一般是对用户行为的一种判断,浏览器会在空闲的时原创 2021-05-14 15:46:40 · 1598 阅读 · 2 评论 -
JavaScript 中 rem 的实现和计算
rem1、定义rem(font size of the root element)是指相对于根元素的字体大小的单位。1rem 等于根元素 htm 的 font-size,即只需要设置根元素的 font-size,其它元素使用 rem 单位时,设置成相应的百分比即可。2、如何实现rem(倍数) = width / (html的font-size)=> width = (html的font-size) * rem(倍数)只要 html 的 font-size 的大小变了,width 就原创 2021-05-12 16:38:46 · 5150 阅读 · 3 评论 -
JavaScript 中的 Map、WeakMap 和 Set、WeakSet
Map、WeakMap 和 Set、WeakSetWeakMap 和 WeakSet 都是弱引用1、什么是弱引用弱引用是指不能确保其引用的对象不会被垃圾回收器回收的引用,换句话说就是可能在任意时间被回收。弱引用随时都会消失,遍历机制无法保证成员的存在2、Set遍历顺序:插入顺序没有键只有值,可认为键和值两值相等添加多个 NaN 时,只会存在一个 NaN添加相同的对象时,会认为是不同的对象添加值时不会发生类型转换(5 !== "5")keys() 和 values() 的行为完全一原创 2021-05-12 15:59:28 · 232 阅读 · 4 评论 -
JavaScript 中 你需要知道的有关于数组的详细知识点
JavaScript 中你需要知道的有关于数组的详细知识点1、ES6 新增数组方法Array.from()、Array.of()、copyWithin()、find()、findIndex()、fill()、entries()、keys()、values()、includes()。2、ES5 新增数组方法forEach()、map()、filter()、some()、every()、indexOf()、lastIndexOf()、reduce()、reduceRight()。3、数组的这些方法,哪原创 2021-05-12 15:39:54 · 248 阅读 · 3 评论 -
JavaScript 中 你需要知道的 Promise 详细知识点
JavaScript 中 你需要知道的 Promise 详细知识点1、如何实现一个 sleep 函数(延迟函数)通过 promise 和 setTimeout 来简单实现/** * 延迟函数 * @param {Number} time 时间 */function sleep (time = 1500) { return new Promise((resolve) => { setTimeout(() => { resolve(tru原创 2021-05-12 15:28:01 · 958 阅读 · 7 评论 -
XSS 攻击和 CSRF 攻击各自的原理是什么?两者又有什么区别?以及如何防范?
XSS 攻击和 CSRF 攻击1、XSS 攻击1. 概念XSS(Cross Site Scripting):跨域脚本攻击。2. 原理不需要你做任何的登录认证,它会通过合法的操作(比如在 url 中输入、在评论框中输入),向你的页面注入脚本(可能是 js、hmtl 代码块等)。3. 防范编码;对于用户输入进行编码。过滤;移除用户输入和事件相关的属性。(过滤 script、style、iframe 等节点)校正;使用 DOM Parse 转换,校正不配对的 DOM 标签。HttpOnly。原创 2021-05-12 10:36:37 · 1943 阅读 · 3 评论 -
JavaScript 中 自执行函数&函数类型&函数表达式各有什么特点,三者又有什么区别?
函数&自执行函数&函数类型1、自执行函数特点函数表达式与函数声明不同,函数名只在该函数内部有效,并且此绑定是常量绑定。对于一个常量进行赋值,在 strict 模式下会报错,非 strict 模式下静默失败。IIFE 中的函数是函数表达式,而不是函数声明。2、函数类型函数声明函数表达式函数构造器创建1. 函数声明(FD)有一个特定的名称在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中在进入上下文原创 2021-05-11 20:15:25 · 592 阅读 · 17 评论 -
浏览器的跨域问题&跨域问题有哪些解决方法& JSONP 是如何实现跨域的?
浏览器跨域问题1、什么是浏览器同源策略?同源策略是一个重要的安全策略,它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互,它能帮助阻隔恶意文档,减少可能被攻击的媒介。所谓同源策略,是指只有在地址的:协议名域名端口名均一样的情况下,才允许访问相同的 cookie、localStorage,以及访问页面的 DOM 或是发送 Ajax 请求。2、没有同源策略限制有哪些危险场景?ajxa 请求Dom 的查询同源策略确实能规避一些危险,不是说有了同源策略就安原创 2021-05-11 15:33:11 · 263 阅读 · 1 评论 -
JavaScript 中 cookie、localStorage 和 sessionStorage 三者的区别?以及如何进行跨域操作 Storage?
cookie、sessionStorage 和localStorage1、三者区别cookie 用来保存登录信息,大小限制为 4KB 左右localStorage 是 Html5 新增的,用于本地数据存储,保存的数据没有过期时间,一般浏览器大小限制在 5MBsessionStorage 接口方法和 localStorage 类似,但保存的数据的只会在当前会话中保存下来,页面关闭后会被清空。名称生命期大小限制与服务器通信是否可以跨域cookie一般由服务器生成,可设置原创 2021-05-11 09:50:20 · 1491 阅读 · 1 评论 -
JavaScript 中 == 是怎么进行比较的?==、=== 和 Object.is() 三者又有什么区别?
==、=== 和 Object.is()1、区别== 两边值类型不同的时候,先进行类型转换,在比较=== 不进行类型转换,直接值比较Object.is(val1, val2) 判断两个值是否为同一值2、== 类型转换是怎么转换的?如果类型不同,进行类型转换判断比较的是否是 null 或者是 undefined,如果是,返回 true判断类型是否为 string 或者 number,如果是,将 string 转换为 number判断其中一方是否为 boolean,如果是,将其中一方转原创 2021-05-11 09:41:22 · 269 阅读 · 0 评论 -
JavaScript 中 for in 和 for of 的区别
for in 和 for of 的异同点比较for infor of不同点可以遍历普通对象 遍历出数组的原型对象 可以遍历出数组自身属性 遍历出来的值是 key 不可以遍历 map/set 不可以迭代 generators IE 支持不能遍历普通对象 不会遍历出原型对象 不会遍历自身属性 遍历出来的值是 value 可以遍历 map/set 可以迭代generators IE 不支持相同点可以遍历数组 可以 break 中断遍历可以遍历数组 可以 brea原创 2021-05-11 09:33:31 · 94 阅读 · 0 评论 -
JavaScript 中 var、let 和 const 三者的区别
JS 中的 let、const、var1、JS 中有几种定义变量的方法?letconstvarclassimportfunction2、let、const、var 有什么区别?varletconst没有块级作用域有块级作用域有块级作用域声明全局变量在 window 下(全局属性下) 全局变量不在全局属性下全局变量不在全局属性下重定义变量不会报错会报错会报错声明变量声明变量声明一个常量存在变量提升不存在变量提升不存在变量提原创 2021-05-11 09:27:48 · 190 阅读 · 0 评论 -
JavaScript 中 null 和 undefined 的区别
null 和 undefined 的区别1、Nullnull 表示一个"无"的对象,转为数值为 0;作为函数的参数,表示该函数的参数不是对象;作为对象原型链的终点;Number(null) 为 0;5 + null 为 5;JSON.stringify(null) 为 'null' (字符串);JSON.parse(null) 为 null (null 基本类型)。2、Undefined变量被声明了,但是没有赋值,就等于 undefined;调用函数时,应该提供的参数没有提供,该原创 2021-05-11 09:20:57 · 710 阅读 · 0 评论 -
JavaScript 模块化
JS 模块化1、模块化发展历程IIFE 自执行函数AMD 使用 requireJS 来编写模块化(依赖必须提前声明好。)CMD 使用 seaJS 来编写模块化(支持动态引入依赖文件。)CommonJS nodeJs 中自带的模块化UMD 兼容 AMD、CommonJS 语法webpack(require.ensure):webpack 2.x 版本中的代码分割ES Modules: ES6 引入的模块化,支持 import 来引入另一个 jsscript 标签 type="module"原创 2021-05-11 09:12:47 · 228 阅读 · 0 评论 -
实现[[“a“, “b“], [“n“, “m“], [“0“, “1“]] => [“am0“, “am1“, “an0“, “an1“, “bm0“, “bm1“, “bn0“, “bn1“]
逛论坛发现这个问题,所以写了一下 实现[["a", "b"], ["n", "m"], ["0", "1"]] => ["am0", "am1", "an0", "an1", "bm0", "bm1", "bn0", "bn1"]1. 问题由 [["a", "b"], ["n", "m"], ["0", "1"]] 转为 ["am0", "am1", "an0", "an1", "bm0", "bm1", "bn0", "bn1"]2. 解法function changeArr (arr).原创 2021-04-29 15:57:06 · 538 阅读 · 2 评论 -
拯救你的面试:前端面试大全--js面试题(超长文章)
一、什么是编译型语言?什么是解释型语言?JS 是什么类型的语言?1、编译型语言1. 解释程序在执行之前需要一个专门的编译过程,把程序编译成 为机器语言的文件,运行时不需要重新翻译,直接使用编译的结果就行了。2. 优缺点程序执行效率高,依赖编译器,跨平台性差些。3. 举例C、C++ 都是编译型语言。2、解释型语言1. 解释程序不需要编译,程序在运行时才翻译成机器语言,每执 行一次都要翻译一次。2. 优缺点解释型语言执行效率较低,且不能脱离解释器运行,但它的跨平台型比较容易,只需提供特定原创 2021-04-21 16:23:02 · 824 阅读 · 3 评论 -
六万字、42个知识点、超长篇幅助你了解 JS
一、什么是编译型语言?什么是解释型语言?JS 是什么类型的语言?1、编译型语言1. 解释程序在执行之前需要一个专门的编译过程,把程序编译成 为机器语言的文件,运行时不需要重新翻译,直接使用编译的结果就行了。2. 优缺点程序执行效率高,依赖编译器,跨平台性差些。3. 举例C、C++ 都是编译型语言。2、解释型语言1. 解释程序不需要编译,程序在运行时才翻译成机器语言,每执 行一次都要翻译一次。2. 优缺点解释型语言执行效率较低,且不能脱离解释器运行,但它的跨平台型比较容易,只需提供特定原创 2021-04-20 15:05:52 · 424 阅读 · 3 评论 -
input 输入框频繁请求接口,怎么正确的显示最后一次接口返回的数据?
面试题系列阿里面试题中有一问:input 输入框频繁请求接口,怎么正确的显示最后一次接口返回的数据?1. 后端返回请求值(最简单)前端请求接口的时候会把 input 输入框中的值传给后端,此时后端返回接口数据时把前端传入的值返回回去,页面渲染时只需要进行判断即可。2. 终止上一次请求当再次请求的时候把上次的请求终止掉:ajax:abort()axios: CancelTokenfetch:AbortController百度用的就是这种取消请求的方式js:https://ss1.b原创 2021-03-26 16:30:23 · 2897 阅读 · 2 评论 -
前端学习思维导图
前端学习思维导图最近整理了前端学习大纲,理了一份思维导图,使用 GitMind官网 (打钱),包含了三种格式下载地址:github码云CSDN原创 2021-03-25 17:27:04 · 880 阅读 · 1 评论 -
video/audio标签倍速播放
video/audio标签倍速播放在现在浏览器中,各种播放器都支持 倍速播放,1.5倍,2.0倍等。playbackRate 属性html元素“audio”和“video”的playbackRate 属性允许我们改变一段正在播放的网页音频或者视频的速度,或速率。当为1.0的时候为正常播放示例<video id="video" controls src="**.mp4" type="video/mp4"></video>选择倍速播放:<select id=原创 2020-09-28 15:27:44 · 16718 阅读 · 1 评论 -
Vue3.x中使用的 JS Proxy 代理
ProxyProxy 对象用于定义基本操作的自定义行为语法const p = new Proxy(target, handler)参数target要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。handler 对象的方法handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器(trap)。所有的捕捉原创 2020-09-15 14:10:37 · 875 阅读 · 0 评论 -
Fetch
FetchFetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。一、概念Fetch 提供了对 Request 和 Response 对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是 service worker、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。它同时还为原创 2020-08-31 15:53:03 · 361 阅读 · 0 评论 -
css变量
css变量相信大家都用过CSS预处理,比如,less、scss(sass)。不可避免的会用到变量。在less中是以 @ 定义变量;在scss中是以 $定义变量;然后在css中,也有变量,以-- 定义变量(两根连线词)css变量的定义1、语法:--variableName: variableValue;variableName表示自定义变量名,variableValue表示属性值。2、规范:以“–”双横杠开头,后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合原创 2020-08-28 16:57:27 · 362 阅读 · 0 评论 -
Proxy和Object.defineProperty实现简单的数据绑定
简单实现数据绑定Object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。备注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。语法Object.defineProperty(obj, prop, descriptor)参数obj要定义属性的对象。prop要定义或修改的属性的名称或 Symbol 。descriptor原创 2020-08-21 13:09:20 · 261 阅读 · 0 评论 -
JS深度优先遍历和广度优先遍历
JS深度优先遍历和广度优先遍历深度优先遍历 (DFS)Depth First Search(1)访问顶点v;(2)依次从v的未被访问的邻接点出发,对图进行深度优先遍历;直至图中和v有路径相通的顶点都被访问;(3)若此时图中尚有顶点未被访问,则从一个未被访问的顶点出发,重新进行深度优先遍历,直到图中所有顶点均被访问过为止。递归实现深度遍历通过递归实现深度优先遍历let depth1 = (node, nodeList = []) => { //node不能为null if原创 2020-08-20 20:32:01 · 1155 阅读 · 0 评论 -
JavaScript 常见的六种继承方式
JavaScript 常见的六种继承方式继承是面向对象软件技术当中的一个概念,与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。一、原型链继承 prototype子类型的原型为父类型的一个实例对象。父类function Parent(name, age) { this.name = name, this.age = age, this.play = [1, 2, 3] this.setName = functio原创 2020-08-19 20:05:13 · 306 阅读 · 0 评论 -
js实现call、apply、bind方法
js实现call、apply、bind方法一、call 函数的实现步骤:判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。判断传入上下文对象是否存在,如果不存在,则设置为 window 。处理传入的参数,截取第一个参数后的所有参数。将函数作为上下文对象的一个属性。使用上下文对象来调用这个方法,并保存返回结果。删除刚才新增的属性。返回结果。// call函数实现Function.prototype.myCall = function(原创 2020-08-18 16:13:01 · 551 阅读 · 4 评论