qq_34639706的博客

原创 js判断数组类型方法

1

原创 前端项目数据埋点接入神策

应用中特定的流程收集一些信息，用来跟踪应用使用的状况，以便后续进一步优化产品或者提供运营的数据支撑。如访问数，访客，停留时常，页面浏览数等。

原创 微前端小记

记录下微前端思路

原创 前端vue项目埋点方案

特殊情况可通过命令式埋点完成，如对于uni-app底部tabbar埋点，可通过onTabItemTap事件完成。可视化埋点：使用可视化的工具进行埋点，即无痕埋点。声明式埋点：在需要埋点的地方新增自定义属性，通过识别自定义属性绑定事件，采集并上传埋点数据；命令式埋点：在需要埋点的地方添加埋点逻辑代码。可视化埋点和无埋点方案前期投入较大，故在此考虑使用代码埋点的方案。代码埋点：在需要埋点的地方添加埋点逻辑代码或自定义属性实现。无埋点：前端自动采集全部事件并上报埋点数据。故最终埋点方案使用：声明式代码埋点。

原创 【无标题】

CSS滤镜支持的方法（function）有– grayscale 灰度– sepia 褐色– saturate 饱和度– hue-rotate 色相旋转– invert 反色– opacity 透明度– brightness 亮度– contrast 对比度– blur 模糊– drop-shadow 阴影。

原创 位运算在js的应用

位运算

原创 uniapp 开发所遇到的问题

uniapp开发问题集

原创 常见的几个meta标签元素

指定字符集<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>向搜索引擎说明你的网页的关键字<meta name="keywords" content="关键字"/>告诉搜索引擎你的站点的主要内容<meta name="description" content=""/>定时让网页在指定的时间内跳转<meta http-equiv="refresh".

原创 前端的埋点

手动埋点手动埋点的技术本质是什么呢？我们看看从javascript中能轻松获得哪些信息：域名：document.domainURLdocument.URL页面标题：document.title分辨率：window.screen.height & window.screen.width颜色深度：window.screen.colorDepthReferrer：document.referrer客户端语言：navigator.language除了上面列举的常规信息以外，还有大量.

转载 内容安全策略（CSP）详解

内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。 1.CSP是什么 CSP指的是内容安全策略，为了缓解很大一部分潜在的跨站脚本问题，浏览器的扩展程序系...

原创 如何清楚易懂的解释“UV和PV＂的定义？

转载 tree shaking 及其工作原理

写在前面 今天这道题目是在和小红书的一位面试官聊的时候： 我：如果要你选择一道题目来考察面试者，你最有可能选择哪一道？ 面试官：那应该就是介绍一下tree shaking及其工作原理？ 我：为什么？ 面试官：是因为最近面了好多同学，大家都说熟悉webpack，在项目中如何去使用、如何去优化，也都或多或少会提到tree shaking，但是每当我深入去问其工作机制或者原理时，却少有人能回答上来。（小声 bb：并不是我想内卷，确实是工程师的基本素养啊，哈...

原创 js实现前端性能监控与错误监控

前端监控一般包括：1.性能监控；2.错误监控1.前端性能这里引用他人文章对前端性能的描述：通常前端性能可以认为是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。简单的总结一下，就是一般用时间来衡量前端性能。比如一些耳熟能详的：白屏时间、首屏时间等那么当我们打开一个网页，如果获取跟网页性能相关的时间呢？2.性能数据采集打开控制台，输入window.performance可以看到performance对象的组成，其中我们关注一

转载 JavaScript如何判断一个链有环

如下图, 单链表中存在环: 怎么判断单链表中存在环呢?先创造一下带环的单链表: 代码如下: 创建带环单链表: 结果可见: 判断单链表是否带环,以下有三种方法: 第一种方法, 创建哈希表,不过会占用较大的空间,不是最佳方法.( 时间复杂度O(n) ) 遍历链表,将链表各节点添加至哈希表中,添加前判断此节点是否已存在哈希表中,存在的话说明链表中存在环. 结果如下: 检测到节点B是重复项,说明存在环 &n...

转载 什么是跨域？跨域解决方法

一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protoco...

转载 html的解析过程

创建Document对象，开始解析web页面，解析HTML元素和字符数据，添加Element节点和text节点到Document中，此时，document.readyState = loading2.遇到 link 外部 CSS，创建线程加载，并继续解析文档3.遇到 script 外部Js:（1）未设置 async、defer浏览器加载Js，并堵塞，等待Js加载完成后执行脚本，然后继续解析文档（2）设置 async异步加载脚本，脚本加载完立即执行脚本（3）设置defer异步加载脚本，等待.

原创 HTML的语言编码charset

html的header部分加上<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />CSS文件顶部加上@charset "utf-8";GB2312编码可以通俗理解为国内通用的语言。UTF-8可以通俗理解简体繁体可用此编码如台湾和内地使用此编码。...

原创 图片使用base64位存储的利弊

优点提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。加密: 让用户一眼看不出图片内容 , 只能看到编码。方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率缺点base64

转载 TCP拥塞控制原理

一、拥塞控制的一般原理1、产生拥塞的原因：在某段时间，若对网络中某一资源的需求超过了该资源所能提供的可用部分，网络的性能就会变坏。即对资源的需求 可用资源注意拥塞控制与流量控制的区别：拥塞控制是防止过多的数据注入网络中，使得网络中路由器或链路不致过载，有一个前提是，网络能够承受现有的网络负荷，是一个全局性过程；流量控制是指点对点通信的控制，做的是抑制发送端发送数据的速率，便于接收端来得及接收。2、拥塞控制是一个动态的过程，通常使用网络负载（单位时间输入给网络的分组数量）和吞吐量（单位时间从网络输出的

原创 一文搞清 js 中 if ( in ) 用法

let names = ['Lily', 'Barry', 'Dendi', 'Boogie', 'Lily'];let nameNum = names.reduce((pre, cur) => { if (cur in pre) { //pre 中是否有 cur 属性 pre[cur]++; } else { pre[cur] = 1; //为 pre 这个对象添加 cur 属性，并且赋值为 1 } return pre;}, {

原创 reduce的用法小结

reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高…1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 r

原创 js 字符串转换成数字的三种方法

方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。转换函数：js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。一些示例如下：复制代码 代码如下:parseInt(“1234blue”); //returns 1234parseInt(“0xA”); //returns 10parseInt(“22.5

原创 JS判断字符串中是否包含某个字符串

String对象的方法一、indexOf()var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。二、search()var str = "123";console.log(str.search("3") != -1 ); // truesearch() 方法用于检索字符串中指定的子字符串，或检

原创 懒加载原理以及实现

原理一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。懒加载思路及实现实现懒加载有四个步骤，如下：1.加载loading图片2.判断哪些图片要加载【重点】3.隐形加载图片4.替换真图片...

转载 图片性能优化方法

围绕着这3个方向来进行优化的：缩短请求响应时间、减少请求数、减少请求大小。 一、缩短请求响应时间 1 域名收敛 我们明白，页面资源请求过程是这样的： DNS解析 --> 请求等待 --> 发送http请求 --> 服务器响应 --> 接收数据 我们明白，典型的DNS解析过程是这样的： 浏览器缓存 --> Hosts文件/系统缓存 --> 本地域名服务器--> 向...

转载 跨越平台桌面应用开发框架electron使用的心路历程

前言     首先声明一下这篇文章不谈代码，只谈心。     从接触Electron到真正去做出一个桌面应用，再到今天写下这边文章，大概花了三个月时间吧，到不是因为有多难，主要是这纯碎是个人兴...

原创 TCP和UDP的区别

连接方面区别TCP面向连接UDP是无连接的，即发送数据之前不需要建立连接2、安全方面的区别TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。UDP尽最大努力交付，即不保证可靠交付。3、传输效率的区别TCP传输效率相对较低。UDP传输效率高，适用于对高速传输和实时性有较高的通信或广播通信。4、连接对象数量的区别TCP连接只能是点到点、一对一的。UDP支持一对一，一对多，多对一和多对多的交互通信。  TCPUDP

原创 什么是事件流？ 什么是事件冒泡？ 什么是事件捕获？

好好学习，天天向上。ready？go！！！事件流？当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫作DOM事件流元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种冒泡事件？微软提出的 事件由子元素传递到父元素的过程，叫做冒泡捕获事件？网景提出的 事件由父元素到子元素传递的过程，叫做事件捕获...

原创 什么是事件冒泡，它是如何工作的？如何阻止事件冒泡？

1、什么是事件冒泡，他是如何工作的在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）2、阻止事件冒泡的几种方法2.1）第一种：event.stopPropagation();2.2）第二种：ret

转载 HTTP PUT方法和POST方法的区别

POST 方法用来传输实体的主体，PUT方法用来传输文件，自身不带验证机制。 这两个方法看起来都是讲一个资源附加到服务器端的请求，但其实是不一样的。一些狭窄的意见认为，POST方法用来创建资源，而PUT方法则用来更新资源。这个说法本身没有问题，但是并没有从根本上解释了二者的区别。事实上，它们最根本的区别就是：POST方法不是幂等的，而PUT方法则有幂等性。那这又衍生出一个问题，什么是幂等？幂等（idempotent、idempotence）是一个抽象代数的概念。在计算机中，可以这么理解，一个幂等操作的特点

原创 关于css背景位置background-position属性

div { width: 200px; height: 200px; border: 1px dashed #ccc; background-repeat: no-repeat; background-position: center center; background-image: url(img/bg.gif);}x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为：x = (对象的

转载 高性能JavaScript

1.字符串合并的时候使用简单的’+‘和’+='操作符。let str+='abc'+'efg'; //2个以上的字符串拼接，会产生临时字符串let str=str+'abc'+'efg'; //推荐，提速10%2.避免双重求值：避免使用eval()和function()构造器来避免双重求值带来的性能消耗，同样的，给setTimeout()和setInterval()传递函数而不是字符串作为参数。//双重求值：就是在js代码中执行另一段js代码，不建议使用下面这些方式eval('代码')func

原创 Vue如何定义全局函数

1.在main.js里面直接写函数Vue.prototype.test = function() { console.log('执行全局函数test');};组件中调用this.test()2.写一个模块文件，挂载到main.js上面// base.jsexports.install = function(Vue, options) { Vue.prototype.text1 = function() { console.log('执行成功1'); }; Vue.pr

原创 什么是Bom?有哪些常用的Bom属性

Bom是浏览器对象常用的Bom属性：location对象location.href-- 返回或设置当前文档的URLlocation.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd… 返回包括(?)后面的内容?id=5&name=dreamdulocation.hash – 返回URL#后面的内容，如果没有#，返回空 location.host – 返回URL中的域名部分，例如http://www.dreamdu.comlo

原创 关于常用的Math方法

方法 描述 abs(x) 返回数的绝对值。 acos(x) 返回数的反余弦值。 asin(x) 返回数的反正弦值。 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 ceil...

原创 前端图片选择

学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、 技术笔记 2 遍2、CSDN 技术博客 3 篇

原创 小程序中所使用的单位与布局计算

基础问题记录下：

原创 小程序v-for解析的两个注意点

原创 html标签中的meta charset=“utf-8“

charset是规定HTML文档的字符编码；charset=gb2312不能用繁体字，而charset=utf-8可以用繁体首先来说明一下“utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。各个字符编码含义：gb2312：代表国家标准第2312条，其中是不包含繁体的（虽然咱们不怎么使用繁体了，但是台湾还在使用繁体啊。那怎么办呢？）。gbk：国家标准扩展版

转载 Git常用命令总结

一般来说，Git日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住100个命令。 下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。 Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库 一、新建代码库 在当前目录新建一个Gi...