![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 71
gqkmiss
前端
展开
-
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
页面卸载时的日志记录:在用户离开页面时记录行为数据,如页面停留时间、点击行为等。分析和监控:发送用户行为数据到分析服务器,用于网站性能监控和用户行为分析。状态报告:向服务器报告应用程序状态或错误信息。是一个专为可靠性设计的API,特别适用于在页面卸载时发送少量数据。它具有简单、非阻塞、可靠等优点,特别适合日志记录和用户行为分析等场景。发出的是异步请求,并且是POST请求。只能判断出是否放入浏览器任务队列,不能判断是否发送成功。无需处理返回值。需要注意浏览器兼容问题。原创 2024-05-24 10:11:08 · 428 阅读 · 0 评论 -
JS 监听用户页面访问&页面关闭操作并进行数据上报
页面访问&页面关闭数据上报能清楚的掌握用户的使用数据,对营销活动或者画像分析很有帮助整体没有难点,就是不同项目不同分析如果你的项目是hash改变,那就可以针对hash进行监听主要就是使用进行可靠的数据传输。原创 2024-05-24 10:06:19 · 318 阅读 · 0 评论 -
JavaScript 中的 Range 和 Selection 对象
最近在做鼠标框选的需求,鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围,Selection表示选择的文档内容。下面就详细说下这两个对象。原创 2024-05-23 11:31:58 · 822 阅读 · 0 评论 -
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
鼠标框选上报能监控用户在页面的行为,能为后续的数据分析等提供便利基于JS中的Selection和Range实现的,使用原生JS涉及到的操作比较多,包含键盘、鼠标右键、全选等能对框选的内容进行分类,区别html和text,更方便的看出用户选择了哪些内容。原创 2024-05-23 10:15:13 · 1402 阅读 · 2 评论 -
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 评论 -
在前端爬虫或者插件中,淘宝API/接口调用里签名算法sign是如何实现的?
淘宝API/接口调用里签名算法 sign在做插件或者爬虫调用淘宝接口或者淘宝API 的时候,都需要一个叫 sign 的签名字段,淘宝叫他API输入参数签名结果,一般是一个 md5 加密之后的签名。为了防止API调用过程中被黑客恶意篡改,调用任何一个API都需要携带签名,TOP服务端会根据请求参数,对签名进行验证,签名不合法的请求将会被拒绝。TOP目前支持的签名算法有三种:MD5(sign_method=md5),HMAC_MD5(sign_method=hmac),HMAC_SHA256(sign_原创 2021-03-08 10:27:32 · 4080 阅读 · 5 评论 -
拯救你的面试:前端面试大全--js面试题(二)
一、js内部函数和闭包区别内部函数:一般来说在一个函数内部定义另外一个函数,这样的函数就是内部函数。闭包:能够读取其他函数内部变量的函数。二、简述下js事件代理(事件委托)以及它有什么缺点事件代理:一般来说就是通过事件冒泡把一个元素的响应事件的函数代理到它的父层或者更外层元素上。缺点:只能支持冒泡的事件,对于不冒泡的事件无法代理( focus/blur )所有事件都代理容易出错,建议就近委托内部元素层级过多,容易被某层阻止掉三、怎么样判断对象的真实类型?Object.prototy原创 2021-02-01 15:47:51 · 235 阅读 · 0 评论 -
39条性能优化建议--前端性能优化大全:使用Lighthouse来针对性提高页面性能
lighthouseLighthouse是用于提高网页质量的开源自动工具。 您可以在公开或需要身份验证的任何网页上运行它。 它对性能,可访问性,渐进式Web应用程序,SEO等进行审核。一、使用Lighthouse生成报告打开自己项目页面控制台command + shift + p 打开选项搜索 lighthouse选择 lighthouse右边显示移动端还是PC端,左边点击Generate report进行报告生成生成一个惨不忍睹的性能报告二、针对性的性能原创 2021-01-13 19:20:02 · 1585 阅读 · 2 评论 -
chrome浏览器插件开发-在当前网页中嵌入插件页面
浏览器插件开发在当前网页中嵌入插件页面既然想嵌入插件页面就是需要写html和css在myPlugin中创建contentCss文件夹,里面创建index.css文件在manifest.json中引入"content_scripts": [ { "matches": ["https://*.taobao.com/*"], "css": ["contentCss/index.css"], "js": ["contentJs/jquery.js"原创 2020-12-04 16:12:09 · 6236 阅读 · 3 评论 -
谷歌浏览器插件content_scripts、background、popup之间的通信
谷歌浏览器插件content_scripts、background、popup之间的通信1、content_scripts和background的通信接收消息:chrome.runtime.onMessage.addListener发送消息:chrome.runtime.sendMessage我们先在content_scripts里面加一个按钮,用来触发事件contentJs/index.js//contentJs/index.jsconst but2 = $('<button原创 2020-12-04 16:02:13 · 6367 阅读 · 4 评论 -
全方面手把手从0到1带你开发谷歌浏览器插件
谷歌浏览器开发一、创建myPlugin文件夹以及manifest.json文件1、在manifest.json文件写入这段代码如果你对manifest.json里面的字段描述不清楚,建议先看完此文章,先照猫画虎,在阅读 manifest.json 字段解析文章 网上最全谷歌浏览器插件manifest.json文件字段解析{ "name": "my Plugin", "description": "this is my plugin", "version": "0.0.1"原创 2020-12-04 15:52:45 · 6844 阅读 · 17 评论 -
fabric.js转化对象时保存自定义属性
fabric.js转化对象时保存自定义属性我们在用 fabric.js 操作canvas画版添加各种形状/图片时,有时候会自己添加对应的自定义属性,当涉及到撤销/恢复时,要保存之前的canvas的数据以及状态,此时一般通过toJSON()、toDatalessJSON()、toDatalessObject()等来获取canvas中的内容进行保存。但是自定义属性是保存不了的。转化成对象时保存自定义属性canvas.toJSON(['myFabricType'])canvas的toDatalessJ原创 2020-12-03 09:59:41 · 1580 阅读 · 0 评论 -
fabric.js 画板进行撤销、恢复和保存操作(上一步/下一步)
fabric.js 撤销、恢复和保存操作(上一步/下一步)const state = { saveLen: 0, deleLen: 0, operIndex: -1}window.saveOperateList = []window.deleteOperateList = []const getters = { }const mutations = { // 操作保存的数据 OPERATE_OPERATE_DATA (state) {原创 2020-11-17 15:09:51 · 5501 阅读 · 8 评论 -
fabric.js loadSVGFromString Uncaught TypeError: Cannot set property ‘crossOrigin‘ of undefined
fabric.js loadSVGFromString Uncaught TypeError: Cannot set property ‘crossOrigin’ of undefined在 fabric.js 的项目中,使用 canvas.toSVG() 生成的 SVG 代码,在通过 loadSVGFromString 来进行渲染,报错错误内容fabric.js:4477 Uncaught TypeError: Cannot set property 'crossOrigin' of undefi原创 2020-11-17 14:04:13 · 645 阅读 · 0 评论 -
fabric.js 中 loadSVGFromString 加载 SVG 导致位置不对
loadSVGFromString 加载 SVG 导致子元素left和top值不对问题:通过 loadSVGFromString 加载 SVG ,渲染完成之后回导致 里面的子模块 left 和 top 的值不正确原因:这个是因为,通过 loadSVGFromString 加载的 SVG 回被组成一个组合,组合里面的子元素按照组合的基点来算 left 和 top 值,而组合的基点所在位置是中心点,不是我们通常的canvas的顶点位置所以可以先进行组合、在进行组合拆分const card = new f原创 2020-11-17 11:33:42 · 2118 阅读 · 1 评论 -
location.search转为Vue Router的$route.query
location.search转为Vue的$route.query在重构的项目中,其他项目跳转到当前项目并不是通过location.hash来添加对应的参数的,而是通过加载到location.search里面来传递参数的,那我们就不能通过 Vue Router的 this.$route.query来获取参数了,我们可以直接取用location.search的值,或者把 location.search 转为 query 数据转化 location.search在main.js中// 一定要先注册原创 2020-11-16 11:56:32 · 1348 阅读 · 0 评论 -
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 评论 -
Vue3.x API
一、Application Config(app.config)config是一个包含Vue应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性:const app = Vue.createApp({})app.config = {...}1、devtools类型: boolean默认值: true (false in production builds)使用:app.config.devtools = true配置是否允许vue-devtools检查。此选项的默认原创 2020-09-11 16:46:50 · 1624 阅读 · 0 评论 -
Vue3.x和Vue2.x的不同之处
Vue3.x和Vue2.x的修改点1、main.js引入方式不一样// vue3 import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')// 没有全局的Vue// vue2.Ximport Vue from 'vue'import App from './App'Vue.config.productionTip = false/* eslint-disable原创 2020-09-10 15:06:06 · 665 阅读 · 3 评论 -
Vue3.x中的新增点
Vue3.x中的新增点1、多根节点组件在Vue 3中,组件现在正式支持多根节点组件,即片段!<template> <header>...</header> <main>...</main> <footer>...</footer></template>2、Teleport 传送Teleport提供了一种的方法,使我们可以控制要在DOM中哪个父对象下呈现HTML,而不必求助于全局状态原创 2020-09-10 15:00:26 · 1557 阅读 · 0 评论 -
创建Vue3.x项目、Vue3.x项目和2.x项目的不同点以及Vue3.x项目的新增点
Vue3项目的创建使用vue create proNamevue create vue3-pro 自动下载安装包或者npm init vite-app vue3-pro 不会自动下载安装包然后选中 Vue3,回车即可,自动下载安装包? Please pick a preset: Default ([Vue 2] babel, eslint) ❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select feat原创 2020-09-10 09:38:33 · 5498 阅读 · 1 评论 -
Fetch
FetchFetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。一、概念Fetch 提供了对 Request 和 Response 对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是 service worker、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。它同时还为原创 2020-08-31 15:53:03 · 361 阅读 · 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 评论