![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 51
可乐少点冰
这个作者很懒,什么都没留下…
展开
-
web性能监控
web 的性能一定程度上影响了用户留存率,Google DoubleClick 研究表明:如果一个移动端页面加载时长超过 3 秒,用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒,用户就会流失 10%。我们希望通过监控来知道 web 应用性能的现状和趋势,找到 web 应用的瓶颈?某次发布后的性能情况怎么样?是否发布后对性能有影响?感知到业务出错的概率?业务的稳定性怎么样?转载 2022-11-15 22:42:44 · 443 阅读 · 1 评论 -
Vue3-composition 技巧
Ref自动解包watch直接接受Ref作为监听对象,在回调中解包const counter = ref(0)watch(counter, count => { console.log(count) // same as `counter.value`})在模板中自动解包reactive解包import { ref, reactive } from 'vue'const foo = ref('bar')const data = reactive({ foo, id原创 2021-05-30 22:10:02 · 488 阅读 · 1 评论 -
Babel处理代码初探
系列文章目录一文搞定babel转换文章目录系列文章目录前言二、使用步骤1.引入库2.读入数据2.获取当前节点3.修改节点4.生成代码并输出总结前言babel让你可以对代码进行为所欲为操作,以下为记录babel的初始尝试处理api接口文件生成适合批量录入菜单权限的结构转换前转换后将注释的安装配置_autoAssign 分为[title]_[key]两部分# 一、Babel是什么?Babel 是JS编译器,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 Ja原创 2020-12-03 17:04:49 · 421 阅读 · 0 评论 -
发布插件(组件)到npm
接着上一篇vue中编写通过方法调用的组件我们已经开发完成一个插件,接下来将其发布到npm,供他人使用同时也方便后续其它地方复用。接下来的打包主要是使用vue-cli3脚手架搭建的环境。cli2的打包发布可以看这篇文章 教你一步步封装vue组件并发布到npm。1、修改项目package.jsonvue-cli 3.x 提供了构建目标的命令,不用再去配置webpack.config,直接新增命令搞定target: 默认为构建应用,改为 lib 即可启用构建库模式name: 输出文件名.原创 2020-09-27 14:17:30 · 597 阅读 · 0 评论 -
前端异常处理
捕获异常js同步异常js异步异常资源加载异常Promise异常try…catch…√√window.onerror√√window.addEventListener(‘error’)√window.addEventListener(‘unhandledrejection’)√try catch捕获当前调用栈中的错误,因此无法捕获异步异常(抛出错误时try catch调用栈已经执行完毕退出。同时捕获后,异常不会向上继续抛出 ...原创 2020-08-11 18:33:25 · 185 阅读 · 0 评论 -
通过二进制获取图片格式以及宽高
通过把文件的二进制数据转为16进制字符转再进行相应的判断获取图片格式以及宽高等二进制转字符串通过readAsBinaryString转换blob对象为二进制字符串通过charCodeAt转换二进制字符串为Unicode码将Unicode码转换为16进制async blobToString(blob){ return new Promise(resolve=>{ const reader = new FileReader() reader.o.原创 2020-07-14 18:45:38 · 2974 阅读 · 1 评论 -
深入理解浏览器垃圾回收机制(V8)
文章目录栈堆堆的垃圾回收优化效率栈定义栈用来在函数执行时存储保存执行上下文环境,我们一般也称调用栈,如基本类型的变量,引用类型的引用地址等都保存在栈中。执行到当前函数时进行入栈,执行完毕进行出栈。回收方式有一个记录当前执行状态的指针(称为 ESP)指向活动栈,函数执行完毕,esp下移到后一节点,销毁当前函数执行上下文。新的函数执行上下文入栈直接覆盖掉销毁的空间即可 .function test() { const a = { name: 'a' }; function showNam原创 2020-06-18 17:47:53 · 2417 阅读 · 0 评论 -
记一次web性能优化实战
效果展示优化前优化后可以看到优化前有明显的延迟,详细信息才出现。优化后详细信息基本秒现。问题分析出现数据显示有明显的延时的情况,我们分析大方向可能有接口缓慢网络问题前端问题渲染问题:渲染节点过多、重排、重绘等js阻塞页面渲染原因定位1、查看network最大值784ms,因此可以排除接口和网络问题2、使用performance记录一次过程可以看到js耗费将近14s。此处可能由于performance记录需插入很多记录钩子所以比正常范围时间耗费要放大很原创 2020-05-12 17:26:25 · 256 阅读 · 0 评论 -
Vue实例化过程
参考:Vue原理解析原创 2020-03-23 17:14:22 · 602 阅读 · 0 评论 -
强类型转换
字符串与数字的隐式强类型转换ES5规范11.6.1节,如果某操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作。如果其中一个操作数为对象(包括数组),则先调用ToPrimitive抽象操作,该操作在调用[[DefaultValue]],以数字作为上下文。ToPrimitive先调用valueOf(),再Tostring转换为字符串String()直接调用Tost...原创 2020-03-11 18:16:21 · 245 阅读 · 0 评论 -
vue中编写通过方法调用的组件
通过函数调用的组件,常见的toast提示框,loading等创建文件目录结构|---loading |---Loading.vue |---index.js编写index.js思路创建组件构造器实例化组件挂载到一个新建的div上新增至body页面上通过实例对组件进行代理操作import Vue from 'vue'import LoadingComp...原创 2020-01-10 10:03:16 · 1118 阅读 · 0 评论 -
使用vue-cli3搭建typescript移动端
安装vuecli3npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue create project-typescript手动选择特性选择babel、ts、router、vuex、css预编译器这里我们使用基于类的组件选择sass编译器eslint规则独立的配置文件配置在App.vue中新增路...原创 2020-01-08 16:44:28 · 399 阅读 · 0 评论 -
前端单元测试
文章目录测试类型unit测试E2E 测试单元测试原因vue项目中进行单元测试安装环境编写测试用例结论测试类型unit测试主要对组件进行测试。数据的有效性测试关注组件本身。vue 单元测试的范围仅限于数据流动是否正确,逻辑渲染是否正确(v-if v-show v-for),style 和 class 是否正确,我们并不需要关系这个组件在浏览器渲染中的位置,也不需要关系对其它组件会造成...原创 2019-10-16 18:09:01 · 263 阅读 · 0 评论 -
html5 meta
转载自http://blog.csdn.net/kongjiea/article/details/17092413一、大众机型常用meta标签name的设置1、name之viewport说明:屏幕的缩放content的几个属性: width viewport的宽度[device-width | pixel_value]width如果直接设置pi转载 2017-08-04 17:31:17 · 509 阅读 · 0 评论 -
JS中0.1+0.2 != 0.3 的原因
在JS中进行数字运算时,会有一个叫做 数字运算中的精度缺失的问题。这篇文章,就带着大家了解下JS运算中精度的缺失问题。现象我们在js中进行如下运算时console.log(0.1+0.2) // 结果0.30000000000000004 而不是0.3可以看到0.1 + 0.2 != 0.3原因数字的存储方式原理在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存...转载 2018-10-12 11:47:57 · 4863 阅读 · 0 评论 -
前端web性能优化
这里写自定义目录标题优化方法资源合并减少http请求非核心js异步加载浏览器缓存强缓存协商缓存使用cdn进行dns预解析优化方法每个请求都需建立连接消耗一定时间,请求数越多则网页加载时长越长。资源合并减少http请求我们可以将资源尽可能的合并从而减少请求:图片合并,使用Sprites精灵图 ;CSS 文件合并 ;非核心js异步加载动态脚本加载defer html解析完成后才执...原创 2018-10-09 21:38:50 · 166 阅读 · 0 评论 -
浏览器同源政策及其规避方法
转载至阮一峰的浏览器同源政策及其规避方法概述含义1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说,http://www.example.com/dir/page.html 这个网址,协议..转载 2018-10-26 17:45:23 · 135 阅读 · 0 评论 -
百度开放平台调用人脸识别等api问题
v3接口中人脸识别api文档中提示请求体格式化:Content-Type为application/json,通过json格式化请求体。在使用json格式请求体时会发送预检请求option,由于我使用的是axios时,设置header 的Content-Type不起作用option请求无法设置,接口直接报错,无请求参数,debug里显示如下Request header field Cont...原创 2018-11-13 20:57:25 · 3151 阅读 · 0 评论 -
Javascript函数参数传递
js中所有函数参数传递都是值传递堆内存和栈内存栈内存为自动分配的内存空间,它由系统自动释放;堆内存则是动态分配的内存,大小不定也不会自动释放。js数据类型值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(es6新增)。引用数据类型:对象(Object)、数组(Array)、函数...原创 2019-03-08 10:18:06 · 604 阅读 · 0 评论 -
SSR
前后端分离后单页面应用盛行,出现了服务端渲染的说法,其能更好的SEO什么是服务器端渲染 (SSR)服务器将组件和获取到的数据解析生成html字符串,发送给客户端。过程同之前的php、java等的全栈开发,使用模板引擎,获取数据后解析为html字符串后,发到客户端展现。服务器渲染的 Vue.js 应用程序,可以同时在服务器和客户端上运行。为什么使用服务器端渲染 (SSR)更好的 ...原创 2019-08-09 10:54:08 · 3053 阅读 · 0 评论 -
浏览器运行流程
参考文献:1、图解浏览器的基本工作原理2、前端文摘:深入解析浏览器的幕后工作原理原创 2019-08-07 11:12:22 · 508 阅读 · 0 评论 -
js运行流程
js引擎处理js的过程同传统编译语言的代码编译大致相同文章目录流程预编译阶段声明提升let、const阻止提升的原因LHS与RHS查找类型流程步骤传统编译语言JS引擎1词法/语法分析词/语法分析2解析生成AST解析生成AST3代码生成预编译4执行执行预编译阶段js代码是运行时编译(编译发生在代码执行前几微秒),即预编译完立即...原创 2019-08-29 10:11:44 · 714 阅读 · 0 评论 -
webpack 处理网页小图标favicon
问题现象:vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖,因此设置小图标的时候按原来的方法会出现问题 在页面源文件index.html的标签之间插入<link rel="shortcut icon" href=" /favicon.ico" /> 仍然无法加载小图标解决方法:HtmlWebpackPlugin插件中加入小图标 ...原创 2018-09-05 16:52:24 · 5379 阅读 · 1 评论 -
js函数柯里化
定义柯里化,也称为局部套用,是把多参函数转换为一系列单参函数并进行调用的技术。add(4,5)=>add(4)(5)作用降低通用性、提高适用性 编码中表现形式为 参数复用、提前返回、延时执行编写一个curryfunction curry(fun,args){ var length=fun.length; // 函数fun的参数个数 ...原创 2018-07-17 19:41:44 · 1815 阅读 · 0 评论 -
javascript的垃圾回收机制与内存管理
一、垃圾回收机制—GCJavascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间...转载 2018-03-30 14:19:54 · 316 阅读 · 0 评论 -
问题杂记-Vue父子组件传值(ElementUI-Dialog)
1.vue父子组件使用props传值时props数组里用驼峰命名转到父组件使用时会需变更为短横线分割命名即 myData=>my-data2.sync语法糖 :data.sync="val"=> :data @update:data="newval=>val=newval" 触发父组件更新值时使用驼峰命名 3.子组件中使用element.ui组件中的dialog组件后,通过父组件...原创 2018-03-19 21:57:45 · 8932 阅读 · 0 评论 -
webpack原理
webpack核心概念entry 一个可执行模块或库的入口文件。chunk 多个文件组成的一个代码块,例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。loader 文件转换器,例如把es6转换为es5,scss转换为css。plugin 插件,用于扩展webpack的功能,在webpack构建生命周期的节点上加入扩展hook为webpack加转载 2017-11-06 10:31:12 · 2194 阅读 · 0 评论 -
css选择器之-of-type 以及nth- 补充
-of-type 限制类型p:first-of-type;p:nth-of-type(n);如上 计算时只计算p标签不是p标签的不计算在内p:first-of-type{background:#ff0000;}p:first-child{background:#ff0000;}:first-child 不限制类型 所以h1标签也属于p父标签子标签既原创 2017-11-09 09:53:00 · 706 阅读 · 0 评论 -
node.js querystring类介绍
转载至node.js querystring类介绍querystring从名字就可以看出是一个和参数相关的帮助类,node.js原生自带,直接 require('querystring') 即可使用.此类一共包括4个方法:querystring.stringify(obj, [sep], [eq]) querystring.parse(str, [sep转载 2017-11-07 11:25:21 · 1123 阅读 · 0 评论 -
export 到处模块从另一模块中出错
a.js作为中间件export模块 from使用说明原创 2017-07-06 17:02:00 · 1490 阅读 · 0 评论 -
配置参数
webpack配置项module.exports={entry:,//唯一入口文件output:{path:,//打包后存放地址filename:,//打包后文件名},devtool:,//编译文件与源文件对应的关系 module:{/loadersrules:[{test:,//loader处理文件扩展名的正则表达式loader:,//load原创 2017-08-17 15:09:21 · 299 阅读 · 0 评论 -
vue打包时遇到的问题(Es6)
Es6语法IE下兼容问题UglifyJsPlugin报错 UglifyJsPlugin不支持Es6语法,vue-cli生成的项目中当引入的node_modules里有es6的的语法vue文件时,会报错如: ERROR in static/js/vendor.2de645693dea309ad3b2.js from UglifyJs Unexpected token: operator (>)原创 2017-07-06 15:52:00 · 18607 阅读 · 3 评论 -
vue2.0 router遇到的问题
昨天按照教程安装好vue-router模块后,在应用中引入router 发现没有router.map方法,百度后原来是vue2.0里的路由改了// 1. 定义(路由)组件。// 可以从其他文件 import 进来const Foo = { template: 'foo' }const Bar = { template: 'bar' }// 2. 定义路由// 每个路由应该映射一个组件。原创 2017-02-09 08:33:44 · 10175 阅读 · 0 评论 -
问题杂记-Vue组件中使用地址引入图片
一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/> background="url(@/img/img1.png)"但在vue中style中这样使用会出错,找不到文件。template模板中既可以使用相对路径,也可以使用别名@ style中可以使用相对路径 不能使用webpack中配置的路径别名解决方法:1....原创 2018-03-21 23:32:53 · 5399 阅读 · 1 评论 -
webpack配置多页应用-3
一、使用babel编译es6语法引入css文件我们只需在入口文件里requirecss文件进来即可,当然也可以使用es6的import语法。这样的话我们得先安装es6转es5的加载器babel啦。具体步骤1.安装相关模块npm install --save-dev babel-core babel-loader babel-preset-env2.在webpack.config.js中添加load...原创 2018-04-09 15:24:14 · 707 阅读 · 0 评论 -
onprogress无法触发解决
在上传文件时要做进度显示 需要用到xhr.upload.onprogress事件,此时如果用到mock.js模拟数据的话 则无法触发onprogress事件 原因: mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效...原创 2018-07-17 11:58:51 · 9880 阅读 · 1 评论 -
vue原生js打印插件
需求在vue单页面应用中打印目标区域解决方案使用原生window.printvar printhtml = window.getElementById(dom).innerHtml // 获取打印区域var oldhtml = document.innerHtml // 保存原始内容document.innerHtml = printhtml // 赋值打印windo...原创 2018-06-12 14:20:59 · 16481 阅读 · 2 评论 -
Element级联菜单省市json数据
饿了么Cascader 级联选择器 省市数据混入文件下载地址源码options: [{ "label": "北京", "value": "北京", "children": [{ "label": &quo原创 2018-05-14 14:27:56 · 2225 阅读 · 0 评论 -
Vue中使用eslint代码检测
如何使用1、第一种 使用脚手架时配置使用vue-cli脚手架构建webpack模板的vue项目时会询问你是否使用eslint 选择yes 之后选择检测的配置文件a.选择eslint语法检测b.选择配置文件这里我选择的standard 据说airbnb非常严格这样生成之后就自带了代码检测测试一下cd myappnpm run dev显示没问题接下来我们将代码修改一下出错了函数和参数需要有空格。2...原创 2018-04-25 17:19:47 · 5024 阅读 · 0 评论 -
js基础-数组常用方法
数组常用方法一、Es3arr.push 数组末尾添加数据 arr.pop 删除数组最后一个数据并返回arr.unshift 数组头部添加数据arr.shift 删除数组第一个数据并返回arr.splice(index,many,item1,item2...) 从index位置删除many个数据并用item添加并返回删除的数据 arr.slice(start,end) 取start 到end的数据返...原创 2018-05-09 20:58:28 · 254 阅读 · 0 评论