u014125106的博客

原创 Vue3.0 - 源码解读 - 调度系统

一、前言vue3.0是如何对框架执行中的任务进行调度的呢？我们知道js是单线程的，如果所有任务都是一鼓作气的同步去执行，会导致主线程的阻塞，那么当你想在表单输入东西时，由于主线程被其他任务占据，所以你的输入任务是无法立即得到响应的。调度系统是为了解决这个问题。vue的调度系统相对比较轻，并没有像react那样引入fiber这么重的调度算法（做了快两年），而是巧妙的运用了js微任务机制，将更新触发的任务放到一个微任务中，这样就保证在有大量更新任务时，主线程不会被阻塞，等主线程任务执行完毕后，微任务中的更新

原创 Vue3.0源码解读 - 编译系统

position：包含offset、line、column三个属性，offset记录parser解析到的位置相对原始template string开头的位置，line记录parser解析到的行数，column为列数，因为parse过程中会遇到\n\t\f之类的转义字符。baseParse:将template string解析成AST，AST是vue对节点的一种表述形式，和平时JS生成的抽象语法树是两码事。export function baseParse( content: string, //

原创 Vue3.0源码解读 - 响应式系统

核心方法track：const arr = [2, 3, 6]const proxy = new Proxy(arr, { get(target, key, receiver) { console.log('get', key) return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log('set', ke

原创 vue3.0源码解读 -渲染系统

vue3.0的patch相对于2.0做了很多优化，vue3.0在编译阶段会对vnode截形flag标记，用于对vnode更新时的diff做性能优化。下面我们从patch函数入口开始一步一步的了解3.0时如何进行patch的，以及具体有了哪些性能提升。...

原创 webpack打包性能优化

原创 宏任务与微任务

业务场景：最近在公司做前端业务时，遇到了如下的一个场景，一个配置商品并进行付费的页面，页面的数据交互比较复杂，当任意一款商品的某个参数变化后，需要重新计算价格以保证商品的价格适中快速准确的更新。由于数据交互比较频繁，因此加入不作任何优化的话，页面会频繁的触发价格重新计算，每一次计算价格都需要调后端的api，假如连续不断的触发计算价格请求，会造成前端性能的极大浪费，因为很有可能连续几次请求的商品...

原创 node中间层在开发中的应用

由于最近项目上的原因，公司采用了node中间层，通过它来担当前端和真正意义上的后端之间的中转纽带。原因是我参与的这个项目是一个大型的云计算控制台，里面所涉及到的接口可谓是“鱼龙混杂”，有自己部门开发的接口，也有其他部门开发的接口，所以接口按照功能模块分为很多系列，不同的接口host也千差万别，如果不请node这个“大咖”介入，真的是乱了套了。node这个东西能让js运行在服务端，对于前端来说浏览...

原创 vue异步组件与按需加载

应用场景由于最近项目的需要，接触了vue的按需加载，也就是我们常说的vue异步组件，尤其是项目比较庞大的情况下，使用异步组件实现按需加载是非常重要的，假如我们不做按需加载优化，那么工程最后统统都打包到固定的几个bundle.js里，当我们去访问某个页面时，可能仅仅使用到一个组件，但是会将所有打包后的代码统统进行加载，这样就大大增加了加载成本，假如加载的这个js非常大，那么网页的白屏时间 ( js...

原创 高德地图前端面试经历

和面试官上个礼拜约的时间，但是面试前一天突然接到金山的终面邀请，因此一天需要去两场面试，中午抽午休时间去金山参加了终面，然后大气没怎么喘，晚上下了班就直奔高德，开始真的不想去了，但是爽约是很不好的行为，于是硬着头皮去了高德。由于两场面试都是占用的吃饭时间，所以基本一天没吃饭，路上买了俩包子随便垫吧了两口。我们公司离望京还比较远，本来约好的七点面试，等我到了七点半了已经，然后等于了一会儿来了一个比...

原创 好未来前端面试经历

由于种种原因，最近忙于下班之后各种跑面试，具体的就不少了，就是公司内部的种种原因吧。晚上六点半下了班之后，我就直奔科贸电子城，离我上班的地方很近，就隔了一个天桥。到了前台之后，等了十来分钟，一个比较随意的小哥突然走了过来，问我名字，开始我还以为是接待外宾的工作人员(我没说是保安啊喂！！)，看小哥拿了份简历，我就会知道他是面试官。然后面试官找了个没人的直播间(好未来的装潢还是挺大气的，不过人家主要面...

原创 汽车之家前端面试经历

一个礼拜前和汽车之家的hr约的时间，如期抵达，我是下了班晚上去的，因为没离职前的单位离汽车之家就隔了一条街。到了之后，先要填表，和之前面试好未来一个样儿，总之有的没的填了一堆吧。带我进门的小哥儿还挺热情的，在休息间等面试官的期间还拿了碗康师傅给我(虽然我没吃)。填完表之后面试官来了，是个看上去三十多不到四十的女强人，于是就开始了技术面，干货如下(能想起来的)。面试题目：1.自我介绍(通常都有...

原创 webpack中hash、chunkhash、contenthash区别

webpack中对于输出文件名可以有三种hash值：hashchunkhashcontenthash这三者有什么区别呢？hash如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。如：可以从上图清晰的看见每个压缩后的文件的hash值是一样的，所以对于没有改变的模块...

转载 前端移动端适配总结

前端移动端适配总结

转载 http请求user_agent字段解析

浏览器的常见User Agent 各字段的解释浏览器的User Agent字段令人迷惑，例如：某一版本的Chrome访问网络时，User Agent字段如下：Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.29 Safari/537.36其中既包含多个公司...

原创 小米前端面经(社招)

前言近一段时间我投了不少大厂的前端岗位，但是由于刚刚参加工作一年多点，所以要么简历没过筛选，要么面试一两轮就挂了，之前面试过阿里的，两轮挂了，头条一面没过，于是这段时间来自己又总结之前的面试经验，为自己充电。事情发生在一个月黑风高的夜晚，不对，说顺嘴了，抱歉！！事情发生在周五的一个傍晚，我正在参加公司的团建活动，大家聚餐比较热闹，吃完饭才发现有一个陌生号码。但是我拨回去却打不通了，当时我就觉得...

原创 js 深度比较两个对象是否相等

这道题是小米面试的时候遇到的，当时脑子抽筋细节处理的有问题，回来想了想写了一个相对完整的程序/** * 深度判断两个对象是否相同 */function diff (obj1, obj2) { const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== ...

原创 iview form 表单 自定义参数验证

由于公司项目快速开发需求，需要使用到iview组件库的Form组件，但是默认的表单验证不太能够满足相对复杂一些的验证需求，然后只能求助官方文档(太杂了，没看看明白)和度娘(度娘简单粗暴，再不行谷歌)。自定义的表单验证如下，没什么太需要注意的，只要用过iview的应该能看明白，直接贴代码：<FormItem label="分类：" prop="MenuClassifyId"> ...

转载 前端算法题集锦

https://github.com/Sojourn2017/algorithm

原创 vue双向绑定原理解析

vue双向绑定原理解析最近项目中大量用到vue技术栈的东西，让我这个对底层原理很感兴趣的菜鸟(这不是找虐吗，哈哈哈哈！)好奇vue的双绑定具体是怎么实现的，于是研究了一哈vue的源码(虽然过程略艰辛)，收获很大，为了能更加深入的体会一下双向绑定的魅力，于是乎自己撸了一个简易版的demo。ps一句：不得不佩服尤雨溪大神的脑回路，请收下我的膝盖！！！我相信用过vue的老帖们此时心里也在说：“俺也一...