前端
文章平均质量分 71
AwesomeCPA
上下求索
展开
-
超详细前端AI蔬菜水果生鲜识别应用优化之路
同样是为了减小数据体积,所以准备将原本mobilenet给出的1024维度的特征向量进行降维到256,数据量骤减,读取速度更快,代价是识别速度会慢一点,但相比读取速度的提升,这些代价是十分小的。先定性,带AI识别的生鲜收银机早就上市了,目前学习的只能说是别人玩剩的,但是依然收获满满,算是第一个ai识别的应用吧,关键是技术栈全是前端的,还是有一定参考价值。目前数据是存在本机,但后续一定是存服务器上的,这样不仅可以实现数据在各收银机的共用,还能为模型的增强学习提供数据集。原创 2024-08-23 12:03:44 · 355 阅读 · 0 评论 -
js如何控制一次只加载一张图片,加载完成后再加载下一张
一个完整的页面是由js、html、css组成的,按照解析机制,html元素会优先解析,尽管css样式是放在head标签内的,但也不意味着它会优先加载,它只有等到html文档加载完成后才会执行。再看一个例子:创建了一个div元素,然后将存放img标签元素的变量添加到div元素内,而div元素此时并不在dom文档中,页面不会展示该div元素,那么浏览器会发送请求吗?dom文档中不存在test元素时,即使设置了背景图片,也不会发送请求,只有test元素存在时才会发送请求。上面的代码如果运行起来后,就会发送请求。原创 2024-06-18 15:45:01 · 266 阅读 · 0 评论 -
最佳websocket封装
封装了weboskect,完美支持了断网重连、自动心跳的功能,且完全兼容原生写法,无任何学习负担,开开箱即用!原创 2024-06-17 14:58:59 · 472 阅读 · 0 评论 -
npm、yarn 与 pnpm 的逻辑区别
目录npm2的依赖管理npm3/yarn的依赖管理pnpm的依赖管理npm2的依赖管理npm2 安装依赖的时候比较简单直接,直接按照包依赖的树形结构下载填充本地目录结构。比如在项目中A和 C 都依赖 B,无论被依赖的 B 是否是同一个版本,都会直接无脑的生成对应的树结构,比如我们现在有下面的依赖:A@2.0.0:BaseA@1.0.0 BaseB@2.0.0B@3.0.0:BaseA@1.0.0 BaseB@2.0.1那么npm i之后node_modules里面生成的内容将是下面这样的这样原创 2022-02-09 17:48:01 · 470 阅读 · 1 评论 -
vue2 最后的倔强(知识点查漏补缺)
目录watch监听一个对象时,如何排除某些属性的监听computed如何实现传参?vue的hook的使用Vue的el属性和$mount优先级?动态指令和参数使用过吗?相同的路由组件如何重新渲染?自定义v-model如何将获取data中某一个数据的初始状态?为什么不建议v-for和v-if同时存在计算变量时,methods和computed哪个好?watch监听一个对象时,如何排除某些属性的监听下面代码是,params发生改变就重新请求数据,无论是a,b,c,d属性改变data() { retu原创 2022-01-26 17:20:11 · 1011 阅读 · 0 评论 -
vite 项目部分安卓机型白屏或报错
vite打包的项目在部署安卓机型中(主要是蓝绿厂的)会直接报兼容性错误,主要原因是因为<script type="module">在webview内核小于63的情况下无法识别引入@vitejs/plugin-legacy也无法解决目前2018及之前的机子有相当于一份是webview<63的别纠结了,直接换vue3+webpack吧,用vuecli搭出基础后直接改...原创 2022-01-17 15:22:29 · 5921 阅读 · 5 评论 -
为什么浏览器中有些文件点击后是预览,有些是下载
今天给大家分享两个比较有用的浏览器行为与预期不一致的现象,这两个问题其实并不是什么难题,但在工作中发现不少人被难住了,在我的印象中至少有三位同事在群里问这样的问题,上周又有同事被此现象困住了,所以我觉得这应该是个共性问题,在这里分享给大家,希望对大家有帮助现象一、点击按钮无法实现文件下载前端同事反馈在浏览器里点击实现好的「下载商品图片」按钮却无法下载(预期应该下载 zip 文件)img但如果你在浏览器的地址栏里输入此下载地址却又能直接从浏览器里下载,这是为何?我们可以打开调试工具「网络部分」,然原创 2021-07-07 11:46:50 · 10728 阅读 · 1 评论 -
前端基础知识汇总(一)
目录1. 箭头函数和普通函数的区别2. var,let和const之间的区别3. Bigint和Number的区别4. 基本数据类型和引用数据类型的区别5. defer和async的区别6. async await对比promise的优缺点7. get和post的区别8. 用框架和不用框架的区别,vue和react的区别9. cookies和session的区别10. 宏任务和微任务有什么区别11. fetch,Ajax,axios区别12. TCP和UDP的区别13. js中的堆和栈,栈和队列有什么区别1原创 2021-06-28 17:43:24 · 1101 阅读 · 3 评论 -
用babel按需引入两套UI框架
babel 6.x"plugins": [ [ "import",// 当时babel-plugin-component时用"component" { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, { "libraryName": "view-design", "libraryDirectory": "src/components" }, ] ]babel 7.原创 2021-04-25 14:09:57 · 470 阅读 · 0 评论 -
关于实现setTimeout准时性的探讨
目录背景whileWeb WorkerrequestAnimationFramesetTimeout 系统时间补偿背景运行代码如下,通过一个计数器来记录每一次 setTimeout 的调用,而设定的间隔 * 计数次数,就等于理想状态下的延迟,通过以下例子来查看我们计时器的准确性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</原创 2021-04-22 10:18:16 · 771 阅读 · 0 评论 -
文本溢出的几种解决方案
目录单行文本溢出多行文本溢出拓展的多行文本溢出自定义多行文本溢出高亮多行文本溢出单行文本溢出width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;兼容性一片绿呀,基本上所有的浏览器都支持多行文本溢出这个效果也可以通过 css 来实现width: 100px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-原创 2021-04-20 11:16:51 · 3064 阅读 · 0 评论 -
vue优化之少用this去读取data中数据
在计算属性和template模板中滥用this去读取data中数据会导致多次重复地收集依赖,从而产生性能问题,那要怎么避免这种情况。计算属性中如何避免用ES6对象解构赋值来避免,计算属性的值是一个函数,其参数是Vue的实例化this对象,在上述计算属性中滥用this的例子中可以这样优化。优化前:computed:{ d:function(){ let result = 0; for(let key in this.a){ if(this原创 2021-04-02 14:07:36 · 1031 阅读 · 0 评论 -
webpack要点
首先我们应该简单了解一下webpack的整个打包流程:读取webpack的配置参数;启动webpack,创建Compiler对象并开始解析项目;从入口文件(entry)开始解析,并且找到其导入的依赖模块,递归遍历分析,形成依赖关系树;对不同文件类型的依赖模块文件使用对应的Loader进行编译,最终转为Javascript文件;整个过程中webpack会通过发布订阅模式,向外抛出一些hooks,而webpack的插件即可通过监听这些关键的事件节点,执行插件任务进而达到干预输出结果的目的。其中文原创 2021-04-01 18:12:42 · 111 阅读 · 0 评论 -
Node.js 三大基础模块常用 API
目录Process 模块process.cwd()process.argvprocess.envprocess.platformPath 模块path.join(...paths)path.resolve(...paths)path.basename(path[, ext])path.dirname(path)path.extname(path)对比File System 模块fs.stat(path[, options], callback)同步方法fs.readdir(path[, options],原创 2021-04-01 16:19:50 · 600 阅读 · 0 评论 -
前端应掌握的5种设计模式
目录什么是设计模式?单例设计模式定义实现策略模式定义实现观察者模式定义实现发布订阅模式定义实现观察者模式 VS 发布订阅模式:装饰器模式定义实现代理模式定义实现什么是设计模式?设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。使用设计模式是为了可重用代码、让代码更容易被原创 2021-04-01 11:44:00 · 273 阅读 · 0 评论 -
webpack热更新原理
目录热更新原理热更新的过程启动阶段文件热更新阶段热更新原理热更新的过程几个重要的概念(这里有一个大致的概念就好,后面会把它们串起来):Webpack-complier :webpack 的编译器,将 JavaScript 编译成 bundle(就是最终的输出文件)HMR Server:将热更新的文件输出给 HMR RuntimeBunble Server:提供文件在浏览器的访问,也就是我们平时能够正常通过 localhost 访问我们本地网站的原因HMR Runtime:开启了热更新的话,在打原创 2021-04-01 11:01:56 · 796 阅读 · 0 评论 -
小程序动态埋点思路
ddd原创 2021-03-22 18:46:06 · 286 阅读 · 0 评论 -
js小知识点整理
目录获取一个月有多少天关于函数的 length 属性数组中字符串键值的处理void 运算符关于 JSON.stringify不安全的 JSON 值toJSON 方法JSON.stringify 的第二个参数一元运算符字位反转操作符 ~~ 的用途字位截除类型转换问题1..toString 的问题获取一个月有多少天new Date(2019, 12, 0).getDate(); // 31new Date(2018, 2, 0).getDate(); // 28// 根据这个我们可以得到一个方法fun原创 2021-03-19 10:14:36 · 126 阅读 · 0 评论 -
前端性能优化建议,24条
1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP :这是一个 HTTP 请求,请求的文件大小为 28.4KB。名词解释:Queueing: 在请求队列中的时间。Stalled: 从TCP 连接建立完成,到真正可以传输数据之间的时间差,此时间包括代理协商时间。Proxy negotiation: 与代理服务器连接进行协商所花原创 2021-03-18 09:43:54 · 151 阅读 · 0 评论 -
es6的函数默认参数作用域
有默认值的函数,的确是开辟了单独的“参数声明作用域A”,这个作用域与函数体内的作用域是互不相干的,独立的。函数体内的同名变量接受来自同名参数的默认赋值,并单独开辟函数体内的一个作用域B.在作用域B中找不到变量时,程序会攀援“scope-chain”找到作用域A中的变量,并加以操作。所以,在没有var之前的作用域A和作用域B是互相独立又有“上溯”查找的关系。但是再有let和var 之后两个作用域有相互独立了...原创 2021-02-23 10:59:07 · 127 阅读 · 0 评论 -
react,vue优化技巧之巧用child
vue<template> <div :style="{ opacity: number / 300 }"> <div>{{ heavy() }}</div> </div></template><script>export default { props: ['number'], methods: { heavy () { const n = 100000 l原创 2021-02-22 15:52:43 · 187 阅读 · 0 评论 -
window.open打开新窗口被浏览器拦截的处理方法
window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,那么如何避免呢。注意,只有直接使用js调用 window.open(url); 打开新窗口时,才会被拦截,如果是改变原理额窗口:window.open(url,’_self’); 则不会被拦截。那么 js调用 window.open(url); 打开新窗口,如何才能不会浏览器拦截呢?浏览器会拦截你,是认为你将弹出广告等用原创 2021-01-28 10:08:13 · 6647 阅读 · 3 评论 -
前端要掌握的算法知识大纲
目录什么是算法算法的特征衡量算法的方式常用算法排序算法查找算法深度优先算法广度优先算法动态规划算法贝叶斯分类算法压缩算法加密算法图形渲染算法什么是算法算法是完成某一特定任务的过程,通常使用数据结构作为辅助工具来完成算法程序=数据结构+算法可以用自然语言,流程图,伪代码来表示算法例如:排序算法查找算法推荐算法贪婪算法算法的特征有穷性:算法在执行有限的步骤后必须终止确切性:算法的没一个步骤都必须有明确的定义有0或多个输入项至少有一个输出项可行性(有效性):每一个步骤都可以被分原创 2020-11-10 16:31:07 · 182 阅读 · 0 评论 -
typescript查漏补缺
查漏补缺点与js比较enmu(枚举)类型可变参数访问修饰符接口泛型modules(替换为namespace)装饰器类装饰器属性装饰器方法装饰器方法参数装饰器装饰器的执行顺序Mixins三斜线指令错误信息列表与js比较加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更像是传统的面向对象语言通过规定变量和函数类型,提高代码可读性var add:(name:string,age:string)=>number=function(n:string原创 2020-11-04 17:03:50 · 231 阅读 · 0 评论 -
前端核心技能
原创 2020-11-02 09:36:11 · 131 阅读 · 0 评论 -
css面试题汇总(104道详解)
104道 CSS 面试题,助你查漏补缺(上)104道 CSS 面试题,助你查漏补缺(下)原创 2020-10-30 15:15:32 · 150 阅读 · 0 评论 -
https数字证书(CA证书)原理
目录1.基础知识1.1非对称加密算法(asymmetric key algorithms)1.2RSA简介1.3签名和加密2.一个加密通信过程的演化2.1 第一回合:2.2 第二回合:2.3 第三回合:2.4 第四回合:2.5 第五回合:2.6 完整过程:2.7 其它问题:3. 证书的构成和原理3.1 证书的构成和原理3.2 如何向证书的发布机构去申请证书3.3 证书的发布机构4. 在windows中对数字证书进行管理4.1 查看、删除、安装 数字证书4.2 如何自己创建证书1.基础知识1.1非对称加密原创 2020-10-27 17:00:41 · 2175 阅读 · 0 评论 -
MD5加密简介
目录特点关于撞库破解关于MD5加盐算法原理MD5全称:message-digest algorithm 5翻译过来就是:信息 摘要 算法 5特点长度固定:不管多长的字符串,加密后长度都是一样长作用:方便平时信息的统计和管理易计算:字符串和文件加密的过程是容易的.作用: 开发者很容易理解和做出加密工具细微性一个文件,不管多大,小到几k,大到几G,你只要改变里面某个字符,那么都会导致MD5值改变.作用:很多软件和应用在网站提供下载资源,其中包含了对文件的MD5码,用户下载后只需要用工具原创 2020-10-26 14:11:00 · 418 阅读 · 0 评论 -
前端要了解的数据结构基本知识
目录js数据类型堆栈空间分配区别:堆栈缓存方式区别:堆 、栈数据结构区别:数据结构数据结构分类逻辑结构:存储结构:线性结构 :非线性结构二叉树遍历js数据类型基本类型(栈 stack) : Number、String 、Boolean、Null 和 Undefined , Symbol(es6 新增); 基本数据类型是按值访问 由高向低分配,栈内存最大是 8MB,(超出报栈溢出), String:是特殊的栈内存 (向高分配大小不定),程序员分配引用类型(堆 heap) :Object 、Array原创 2020-10-23 17:16:37 · 414 阅读 · 0 评论 -
前端需要掌握的基础算法
目录排序基本排序算法冒泡排序选择排序插入排序高级排序算法快速排序希尔排序时间复杂度总结是否稳定辅助记忆递归Deep Clone实战例题Q1:Array数组的flat方法实现Q2 实现简易版的co,自动执行generatorQ3. 爬楼梯问题Q4.二分查找二叉树和二叉查找树树的基本概念二叉查找树二叉树的遍历中序遍历的实现前序遍历后序遍历二叉树的查找排序基本排序算法基本排序的基本思想非常类似,重排列时用的技术基本都是一组嵌套的for循环: 外循环遍历数组的每一项,内循环则用于比较元素。冒泡排序func原创 2020-10-23 11:26:09 · 3781 阅读 · 1 评论 -
前端面试复习必读文章【超三百篇】
参考原文JavaScript 基础1.1 执行上下文/作用域链/闭包理解 JavaScript 中的执行上下文和执行栈[1]JavaScript深入之执行上下文栈[2]一道js面试题引发的思考[3]JavaScript深入之词法作用域和动态作用域[4]JavaScript深入之作用域链[5]发现 JavaScript 中闭包的强大威力[6]JavaScript闭包的底层运行机制[7]我从来不理解JavaScript闭包,直到有人这样向我解释它…[8]破解前端面试(80% 应聘者不原创 2020-10-22 10:40:14 · 9185 阅读 · 1 评论 -
一文搞懂http和https
目录http历史HTTPSHTTP特点:HTTPS特点:HTTP通信传输HTTPS实现原理问题运用与总结http历史http:超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。版本产生时间内容发展现状HTTP/0.91991年不涉及数据包传输,规定客户端和服务器之间通信格式,只能GET请求没有原创 2020-10-20 14:13:16 · 122 阅读 · 0 评论 -
Base64加密原理和应用场景
目录Base64编码使用场景Base64编码原理Base64编码base64 最早就是用来邮件传输协议中的,原因是邮件传输协议只支持 ascii 字符传递,因此如果要传输二进制文件,如:图片、视频是无法实现的。因此 base64 就可以用来将二进制文件内容编码为只包含 ascii 字符的内容。我们知道在计算机中任何数据都是按ascii码存储的,而ascii码的128~255之间的值是不可见字符。而在网络上交换数据时,比如说从A地传到B地,往往要经过多个路由设备,由于不同的设备对字符的处理方式有一些不同原创 2020-10-20 13:51:06 · 656 阅读 · 0 评论 -
cdn加速原理浅析
目录CDNCDN相关技术1.负载均衡技术2.动态分发与复制技术3.缓存技术工作原理CDNCDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比喻:CDN=更智能的镜像+缓存+流量导流。因而,CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决原创 2020-10-20 11:13:32 · 292 阅读 · 0 评论 -
常见的几种WEB攻击
目录1.XSS攻击:2.CSRF攻击:3.SQL注入:4.文件上传漏洞:5.DDos漏洞:6.DNS Query Flood攻击:7.CC攻击:1.XSS攻击:指的是跨脚本攻击,指的是攻击者在网页中嵌套,恶意脚本程序,当用户打开网页时,程序开始在浏览器上启动,盗取用户的cooks,从而盗取密码等信息,下载执行木马程序。解决方法:XSS之所以会发生,是因为用户输入的数据变成了代码。因此,我们需要对用户输入的数据进行HTML转义处理,将其中的“尖括号”、“单引号”、“引号” 之类的特殊字符进行转义编码。原创 2020-10-20 11:07:29 · 1133 阅读 · 0 评论 -
浏览器渲染原理浅析
目录进程和线程的联系和区别浏览器的进程和线程浏览器的进程包括浏览器内核(渲染进程)Browser进程和浏览器内核(Renderer进程)的通信过程浏览器内核中线程之间的关系进程和线程的联系和区别官方的定义是:进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位),在一定的环境下,把静态的程序代码运行起来,通过使用不同的资源,来完成一定的任务。线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程,个进程中的线程可以互相通信,共享内存等资源,不同原创 2020-10-20 11:01:53 · 231 阅读 · 0 评论 -
js数值精度和大数、小数计算
JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。第1位:符号位,0表示正数,1表示负数第2位到第12位:指数部分第13位到第64位:小数部分(即有效数字)符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。IEEE 754 规定,有效数字第一位默认总是1,不保存在64位浮点数之中。也就是说,原创 2020-10-19 16:22:02 · 1018 阅读 · 0 评论 -
一文搞懂垃圾回收机制
目录栈和堆垃圾回收算法第一步:标记空间中「可达」值。第二步:回收「不可达」的值所占据的内存。第三步,做内存整理。什么时候垃圾回收?分代收集主垃圾回收器副垃圾回收器分代收集增量收集闲时收集面试题1:浏览器怎么进行垃圾回收?面试题2:浏览器中不同类型变量的内存都是何时释放?面试题3:哪些情况会导致内存泄露?如何避免?闭包会导致内存泄露吗?面试题4:weakMap weakSet 和 Map Set 有什么区别?总结栈和堆Stack为自动分配的内存空间,它由系统自动释放;Heap则是动态分配的内存,大小不定原创 2020-10-19 16:04:02 · 409 阅读 · 0 评论 -
HTTP2.0详解
HTTP2.0和HTTP1.X相比的新特性新的二进制格式(Binary Format),HTTP1.x的解析是基于文本。与Http1.x(文本协议)不同,Http2是一个二进制协议,所有的消息被http2拆分封装成更小的消息单元帧,并进行二进制编码。其中http1.x的首部信息被封装成HEADER帧和CONTINUATION帧,请求体被封装到DATA帧,如下图所示:为什么使用二进制协议?二进制协议二进制协议一般消息头固定和消息体变长 ,每个字段固定了含义 ,其特点如下:可读性差,难于调试原创 2020-10-13 11:48:39 · 3003 阅读 · 0 评论 -
一文搞懂回流和重绘
浏览器的渲染过程解析HTML,生成DOM树,解析CSS,生成CSSOM树将DOM树和CSSOM树结合,生成渲染树(Render Tree)Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素Display:将像素发送给GPU,展示在页面上。(这一步其实还有很多内容,比如会在GPU将多个合成层合并为同一个层,并展示在页面中。而css3硬件加速的原理则是新建合成层,这里我们不原创 2020-10-13 09:48:11 · 192 阅读 · 0 评论