- 博客(41)
- 收藏
- 关注
原创 小程序性能优化
在app.json中通过usingComponents 全局引用的自定义组件和通过 plugins 全局引入的插件,会在小程序启动时随主包一起下载和注入js代码,影响启动耗时。对于复杂页面可以采用 渐进式渲染 优先展示页面关键内容,对于非关键内容或者不可见部分延迟更新。同时,与视图渲染无关的数据尽量不要放在 data 中,避免影响页面渲染时间。跳转页面时,可以提前发起请求,对下一个页面做一些准备,使用将数据传输给下一页。
2023-06-23 18:31:13
2106
原创 观察者模式和发布-订阅模式区别
一般至少有一个可被观察的对象subject,可以有多个观察者observer去观察这个对象。二者的关系是通过subject主动建立的,subject至少有三个方法:添加observer,删除observer,通知observer。当subject将某个observer添加到自己的观察者列表后,二者的联系就建立起来了。核心基于一个中心来建立整个体系,其中发布者和订阅者不能直接进行通信,而是发布者将要发布的消息交给中心管理,订阅者也是根据自己的情况,按需订阅中心的消息。
2023-06-10 18:26:27
144
原创 vue2首次渲染过程
此时vm._update函数的作用就是对比新旧两个vnode,得出差异,更新需要更新的地方。4.如果是编译器版本,需要在 src/platform/web/runtime/entry-runtime-with-compiler 中重写$mount方法。1.首先在 core/instance/index 中生命vue的构造函数后,经过一系列的操作初始化了一些实例成员。3.在 web/runtime/index 中初始化了平台相关的内容,主要是实例成员 $mount 方法。7.进入 watcher 构造函数。
2023-06-08 16:26:14
908
原创 vue2双绑原理
4.MVVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数据变化,通过compile来解析编译模板指令,最终利用watcher搭起observer和compile中间的通信桥梁,达到数据变化->视图更新,视图交互变化(input)->数据model变更的双向绑定效果。③待属性变动,dep.notify()通知时,能调用自身的update方法,触发compile中绑定的回调。①在自身实例化时,往dep(属性订阅器)中添加自己。
2023-06-03 14:21:30
101
原创 vue3的diff优化了哪些
在完整diff的过程中,采用的是 头头对比,尾尾对比,处理新增的和删除,然后处理未知子序,通过构建一个索引图来优化进一步寻找需要移除或者添加的节点,以及更新 sameVnode,通过获得未知子序的最长递增子序列,以这个最长递增子序列不动为前提,倒序遍历剩余节点,对节点进行最少的移动,完成对两个同级数组的更新,如果有儿子,继续递归(patch),最终完成对整个subTree的更新。最后,还增加了静态事件,因此在diff的过程中,如果是静态事件,事件的变化将不会引起组件的update。
2023-06-03 13:35:19
646
原创 vue3和vue2的区别
的方式组织源码,任何一个单一模块都可以独立抽出来使用,比如。(vue2.7也支持了compositionAPI)3.响应式原理改变,vue2响应式原理是。6.增加了vite(vue2也可以使用)1.源码组织方式发生变化,采用。,组件可以拥有多个根节点。可以单独提供响应式功能。2.vue2使用的是。
2023-05-31 15:42:32
648
原创 vue2实例初始化流程
方法,将内建组件下的全部组件都拷贝给Vue.options.components(extend实现了两个对象属性的浅拷贝)16.如果options上存在el,则直接调用$mount执行组件挂载,Vue构造函数初始化时存在el,立即挂载根节点。方法,内部调用observe,让入参对象变成一个响应式对象,并返回这个响应式对象。当vue实例成员初始化完成后,也就开始执行构造函数了,也就是最终 的。实例成员,指向实例的_data和_props,并禁止修改,只能获取。5.初始化了Vue.options对象,其。
2023-05-30 17:56:30
1103
原创 vue项目性能优化
对于较大图片,可使用。9.长列表可使用虚拟滚动,只渲染部分区域内容,减少重新渲染组件和创建dom节点的时间。6.图片懒加载,将页面未出现在可视区域的图片先不做加载,待滚动到可视区域再去加载(抽离vue、vuex、vue-router、ui组件库等,使用cdn方式引入。1.开启gzip压缩,上传至cos桶,使用cdn缓存并开启cdn加速。3.v-for必须加key,不可和v-if同级使用。5.组件销毁时,手动移除事件监听器,避免内存泄漏。2.提取公共代码,避免相同资源被重复加载,拆包(
2023-05-25 21:09:37
677
原创 文件大小转换
1. 先看代码const formatSize = (bytes) => { if (bytes.toString().includes('B')) { return bytes } if (isNaN(bytes)) { return ''; } let symbols = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let exp = Math.floor(Math.log(bytes)
2021-11-25 09:16:53
224
原创 uniapp历史页面栈watch问题
神坑。页面前进,不会卸载,则永远保持挂载状态,即都可以执行监听watch,若监听vuex的数据,则所有页面都会监听到。页面后退,才会卸载上个页面。
2021-10-31 17:06:41
840
5
原创 使用npm命令下载sass时出现Error: not found: python2
先删掉node_modules中的依赖,执行npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/再正常安装其他依赖即可。
2021-08-23 19:15:06
433
原创 scss解析/deep/以及>>>深度选择器报错
若存在::v-deep未生效的情况,确认使用的文件是否为组件级,若为组件级,改为在调用该组件的页面设置::v-deep即可。但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.如果vue的style使用的是css,那么则。此时我们可以使用第三种方式。
2021-07-30 15:11:27
4123
2
转载 利用safe-area-inset-*兼容iPhoneX
分别创建屏幕上边框,右边框,下边框,左边框安全距离:safe-area-inset-top,safe-area-inset-right,safe-area-inset-bottom,safe-area-inset-left使用:iOS 11padding-top: constant(safe-area-inset-top);padding-right: constant(safe-area-inset-right);padding-bottom: constant(safe-area-in
2021-07-23 16:17:25
828
原创 npm无法在powershell运行
以管理员身份运行 powershell ,然后在控制栏输入 set-ExecutionPolicy RemoteSigned输入:y
2021-05-18 10:45:01
4569
2
原创 面试总结
一、选择除第一个元素外的所有元素<div class="father"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="chi
2021-04-17 12:18:44
130
原创 移动端兼容问题整理
一、iOS 滚动卡顿-webkit-overflow-scrolling: touch;二、JavaScript中的Date对象在Safari与IOS中的坑var date =new Date("2018-07-25 19:25");这段代码是获得字符中指定的日期,它Firefox、Chrome中就能运行,但是放在Safari就会报错,错误是NaN解决办法://将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 var value = '2018-07-25
2021-04-15 19:51:30
96
原创 webpack和gulp的区别
1.gulp是工具链、构建工具。可以配合各种插件做js压缩,css压缩,less编译等,可以替代手工实现自动化工作。而webpack是文件打包工具,可以把项目的各种js文件、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案。2.在定义和使用类比中两者都有各的用途,同时webpack为初级编译程序,gulp为高级编译程序,在功能上要比webpack应用程序中多。3.webpack可以很方便使用node_module、es6或者样式注入等功能,作为最初级的...
2021-04-11 14:18:36
7389
转载 vue3.0是如何变得更快的
vue3.0是如何变快的?diff方法优化vue2.x中的虚拟dom是进行全量的对比。而vue3.0新增了静态标记。在与上次虚拟节点进行对比的时候,只对比带有patch flag的节点,并且可以通过flag的信息得知当前节点要对比的具体内容。下面我们来举个例子,以下是代码片段。<div> <p>标签</p> <p>{{msg}}</p></div>vue2.x的diff算法是对虚拟dom树全量的对比。
2021-04-10 17:27:59
253
原创 实现一个observer观察者类
const Observer = (() => { const _message = new WeakMap() class Observe { constructor() { _message.set(this, {}) } on(type, fn) { le...
2021-04-10 15:47:32
282
原创 dns预获取(dns-prefetch)
dns预获取(dns-prefetch)link rel="dns-prefetch",DNS Prefetch也就是DNS预获取。设置DNS预获取(dns-prefetch)有两个作用:减少DNS的请求次数, 进行DNS预先获取。当网页打开时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS的解析,减少用户等待时间,提高用户体验。dns预获取浏览器支持情况:Firefox: 3.5+Chrome: SupportedSafari 5+
2021-04-03 17:59:53
760
转载 AMD , CMD , CommonJs 和 ES6 对比
1.CommonJS1.1 基本概念为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。 同步 CommonJS规范 通过model.exports定义的,在前端浏览器中并不支持 NodeJS是CommonJS规范的实现,webpack 也是以CommonJS的形式来书写的。 CommonJS定义的模块分为: 模块引用(require) ; 模块定义(exports) ; 模块标识(module)require()用来引
2021-04-01 17:10:03
154
原创 前端面试题总结
一、vue项目性能优化一、代码层面优化1.v-if和v-show使用场景区分2.computed和watch使用场景区分3.v-for必须加key,且不可和v-if同级使用4.长列表性能优化5.事件销毁6.图片懒加载7.路由懒加载8.第三方插件按需引入9.优化无限列表性能10.服务端渲染SSR或预渲染二、webpack层面的优化1.webpack对图片进行压缩2.减少ES6转ES5的冗余代码3.提取公共代码4.模板预编译5.提取组件的css
2021-03-25 16:31:49
560
转载 git cherry-pick 使用指南
git cherry-pick可以选择某一个分支中的一个或几个commit(s)来进行操作。例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开发版本的分支v3.0,我们不能直接把两个分支合并,这样会导致稳定版本混乱,但是又想增加一个v3.0中的功能到v2.0中,这里就可以使用cherry-pick了,其实也就是对已经存在的commit 进行再次提交.简单用法:git cherry-pick <commit id>注意:当执行完 cherry-pick 以后,将会生成一个新的提交;这
2021-03-18 19:42:34
494
原创 swiper activeIndex无法指向最后一个轮播
swiper 的activeIndex默认指向当前屏幕最左侧的轮播。若想指向最后一个,配置项增加normalizeSlideIndex:false即可。官方文档:https://www.swiper.com.cn/api/grid/322.html
2021-03-09 16:59:08
1332
原创 wampserver apache开启ssi
1.找到apache的配置文件httpd.conf①找到,LoadModule ssl_module modules/mod_ssl.so,将前面的注释(#)去掉②找到类似这两行AddType text/html .shtmlAddOutputFilter INCLUDES .shtml改成AddType text/html .shtmlAddOutputFilter INCLUDES .shtml .html .htm .php开启对于.shtml .html ...
2021-03-01 20:34:07
144
转载 WampServer中MySQL服务一直无法开启,几种解决方式!(之前已安装过MySQL)
wampserver三个服务(apache+php+MySQL)中唯独MySQL服务开启不了,以下分享几种解决方式:由于之前已安装过MySQL,这次安装不会覆盖它,但是开启MySQL服务是开启之前的MySQL1.可以通过设置环境变量改变开启MySQL服务:MYSQL_HOME::添加路径C:\wamp64\bin\mysql\mysql5.7.23...
2021-03-01 17:25:41
921
原创 小程序input框失去焦点后触发bindinput事件
背景:在真机浏览/调试中发现,在input中绑定bindinput后,在bindinput的事件中加一个console,在input失去焦点后,vconsole中可以看到打印结果,代表失去焦点触发了bindinput事件。具体的实现方式是:1.在data中增加变量isClear: false2.在点击清空按钮时,除了做基本的数据清空操作外,增加了将isClear赋值为true,证明是点击了清空按钮3.在bindinput绑定的事件中,增加了判断:if (this.data.isClaer)
2021-03-01 17:17:06
3981
原创 git 批量CRLF转LF
项目目录:git config --local core.autocrlf false之后再拉取一次代码即可:git pull
2021-03-01 17:13:38
404
原创 纯css实现滚动视差
通过设置属性background-attachment: fixed;实现。此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。demo:html:<section class="g-word">Header</section><section class="g-img g-img1">IMG1<...
2019-08-13 14:40:21
461
转载 vue双向绑定实现核心方法
vue通过数据劫持的方式来做数据绑定,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门...
2019-07-11 11:31:23
653
原创 http-server禁止浏览器缓存
在network中勾选,disable cache,即可若不行,在启动http-server时,输入:http-server -c-1
2019-05-07 16:49:53
1933
原创 H5解决软键盘弹起导致遮挡输入框问题
var clientHeight = $(window).height()// 初始化屏幕高度 var isFocus = false// 是否有input标签被选中,false没有, true有 var focusDom = null// 当前选中的input标签 $(document).on('f...
2019-03-26 11:48:54
3392
原创 webstrom 使用node-sass
需先安装node-sass设置=》工具=》file watchers具体参数:program(主程序,如果node-sass在全局可用,直接写node-sass。如果不是全局可用,请写全路径。):C:\Users\15541\AppData\Roaming\npm\node-sass.cmdArguments(参数,注意不要写-w --watch 因为file ...
2019-02-28 22:06:36
989
1
原创 横向iscroll阻止纵向浏览器滚动条
参考iscroll官方文档,options.eventPassthrough有些时候你想保留原生纵向的滚动条但想为横向滚动条增加iScroll功能(比如走马灯)。设置这个属性为true并且iScroll区域只将影响横向滚动,纵向滚动将滚动整个页面。在移动设备上访问event passthrough demo。注意,这个值也可以设置为'horizontal',其作用和上面介绍的相反(横向...
2018-09-25 15:06:56
914
1
原创 elementUI select多级联动
需求:编辑时将值回显,若某一级修改,之后的全部清空实现:通过watch监听值的改变,若改变,清空后一级的值,并调用方法请求下一级的option问题:编辑赋值的时候也会触发watch,导致只能讲第一级的值回显,之后的被清空解决:在select上添加回调方法visible-change,可以得到当前改变的值是编辑回显还是用户手动修改,通过一个变量控制,从而控制是否需要清空代码:do...
2018-09-23 21:49:45
25289
11
原创 elementUI table填充数据出现多余线条
解决方法:body .el-table::before { z-index: inherit;}
2018-07-18 10:23:56
5792
原创 使用vue-cli, ie白屏问题
安装插件babel-polyfillbabel-plugin-transform-es2015-arrow-functions(转箭头函数)并进行配置在webpack.base.config.js中修改为:context: path.resolve(__dirname, '../'), entry: { app:['babel-polyfill','./src/main.js'] },...
2018-07-06 16:42:53
4618
4
原创 elementUI table表头错位问题
解决方法:body .el-table th.gutter{ display: table-cell!important;}目前缩放也不会再出问题了。
2018-07-04 18:05:39
29103
30
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人