- 博客(41)
- 收藏
- 关注
RSS订阅原创 小程序性能优化
在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关注的人