超逸の博客

阿里智能事业群-达摩院-机器智能技术部一面自我介绍聊实习经历 主要工作内容，比如申请前端小组组长，与项目负责人沟通，完成模块发布工具前端框架。每日完成工作进度汇报，前端工作主要是表格页面渲染，比如树形表格，分组表格结合等，实现基本的增删改查功能… 项目中有用到SSR，说说对SSR的理解，目前为什么要用SSR？页面的渲染流程 浏览器通过请求得到一个HTML文本 渲染进程解析HTML文本，构建DOM树 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。 DOM树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree） 渲染进程开始对渲染树进行布局，生成布局树（layout tree） 渲染进程对布局树进行绘制，生成绘制记录 渲染进程的对布局树进行分层，分别栅格化每一层，并得到合成帧 渲染进程将合成帧信息发送给GPU进程显示到页面中 可以看到，页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程。而如今我们大部分WEB应用都是使用 JavaScript 框架（Vu ...

腾讯 QQ音乐 面经一面自我介绍了解ajax跨域嘛？什么是跨域回顾一下 URI 的组成: 浏览器遵循同源政策(scheme(协议)、host(主机) 和 port(端口) 都相同则为同源)。非同源站点有这样一些限制: 不能读取和修改对方的 DOM 不读访问对方的 Cookie、IndexDB 和 LocalStorage 限制 XMLHttpRequest 请求。(后面的话题着重围绕这个) 当浏览器向目标 URI 发 Ajax 请求时，只要当前 URL 和目标 URL 不同源，则产生跨域，被称为 跨域请求。 跨域请求的响应一般会被浏览器所拦截，注意，是被浏览器拦截，响应其实是成功到达客户端了。那这个拦截是如何发生呢？ 首先要知道的是，浏览器是多进程的，以 Chrome 为例，进程组成如下： WebKit 渲染引擎 和 V8 引擎都在渲染进程当中。 当 xhr.send 被调用，即 Ajax 请求准备发送的时候，其实还只是在渲染进程的处理。为了防止黑客通过脚本触碰到系统资源，浏览器将每一个渲染进程装进了沙箱，并且为了防止 CPU 芯片一直存在的Spectre 和 Meltdown漏 ...

生日之际，记录自己前端拼搏之路~ 2020年8月12日，破壳的一天，「小狮子の21岁」。特意在前一周准备了这篇博文，记录自己前端拼搏之路。此外，也入驻了掘金社区，发现了许多优秀前端博主，他们的文章内容输出都非常精致，我觉得有必要好好学习一下。 下文会有一部分自己感想，如果大家想要看干货的话，不妨跳到正文处阅读即可。其余部分闲暇时间阅读一下也是不错的嗷。 「生日愿望」：希望拿到一个满意的 offer ，成为一个优秀的前端博主！ 秋招在即，经过反复思考之后，我想到了一个提高效率的方式。原本的话，我可能会从头开始又把前端分模块复习一遍，但是这样效率不是很高，也 Get 不到重要部分，往往时间周期会比较长。本次呢，我打算采用面经复习法，将别人的面经整理一份知识点来学习。这样既能检测自己会不会这道题，同时也跟着大家步伐更新，个人觉得也是一个事半功倍的方式。 赶快来关注我吧，接下来的几个月里，我们一起逆风微笑，乘风破浪！ 过去几个月的我 大家好，我是 Chocolate，一个不是只会写业务代码的前端攻城狮（我的文章里有我的故事，所以你要带酒来倾听吗？） 2020年刚开始的时候，正是疫情蔓延的 ...

Vue源码解析—动手实现简化版MVVM引言 相信只要去面试 Vue，都会被用到 vue的双向数据绑定，你如果只说个 mvvm就是视图模型模型视图，只要数据改变视图也会同步更新，那可能达不到面试官想要的那个层次。甚至可以说这一点就让面试官觉得你知识了解的还不够，只是粗略地明白双向绑定这个概念。 本博客旨在通过一个简化版的代码来对 mvvm 理解更加深刻，如若存在问题，欢迎评论提出，谢谢您！ 最后，希望你给一个点赞或 star :star:，谢谢您的支持！ 实现源码传送门 同时，也会收录在小狮子前端笔记仓库里 ✿✿ヽ(°▽°)ノ✿ 小狮子前端の学习整理笔记 Front-end-learning-to-organize-notes 实现效果： 几种实现双向绑定的做法目前几种主流的 mvc(vm)框架都实现了单向数据绑定，即用数据操作视图，数据更新，视图同步更新。而双向数据绑定无非就是在单向绑定的基础上给可输入元素（如 input、textarea等）添加了 change(input)事件，来动态修改 model 和 view，这样就能用视图来操作数据了，即视图更新，数据同步更新。 实现 ...

1. 电商管理后台 API 接口文档1.1. API V1 接口说明 接口基准地址：http://127.0.0.1:8888/api/private/v1/ 服务端已开启 CORS 跨域支持 API V1 认证统一使用 Token 认证 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌 使用 HTTP Status Code 标识状态 数据返回格式统一使用 JSON 1.1.1. 支持的请求方法 GET（SELECT）：从服务器取出资源（一项或多项）。 POST（CREATE）：在服务器新建一个资源。 PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。 PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。 DELETE（DELETE）：从服务器删除资源。 HEAD：获取资源的元数据。 OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。 1.1.2. 通用返回状态说明 状态码 含义 说明 200 OK 请求成功 201 CREATED 创建成功 204 DELET ...

引言这个项目是我第二次做了，第一次做的时候好多地方不是很懂，而现在学习了基础知识后，回过来再做一次，发现原来不是很懂的地方也弄明白了，然后又在B站找了项目实战撸了一把，想通过这篇文章，对其中的模块实现做一下总结，同时希望能够加深对项目的理解，不断发掘其中的亮点。如果你觉得本文还行，请毫不留情的点赞！ element-ui篇element-ui 官方中文文档传送门 el-form 组件问题el-form 组件默认是 content-box，我们设置其如下属性时，就会出现长度比我们想象中长一点的情况。 .login_form{ position: absolute; bottom: 0; width: 100%; padding: 0 20px;} 解决办法如下，直接设置 box-sizing 为 border-box 即可。 .login_form{ position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: bor ...

引言 写这篇博客原因：一位朋友突然很丧，然后找到了我，聊了许久之后，还是觉得没有大的效果，因为迷茫期不是那么容易就过去的。答应整理一份软测学习路线&资料，于是就有了这一篇文章。废话少说，进入正文： 正文“长江后浪推前浪，前浪死在沙滩上”，曾经一句让人会心一笑的调侃，而今变成了软件测试行业的真实写照。由于软件测试行业入门门槛低，薪资报酬高，不断有新鲜血液冲刷着软件测试行业的“前行者”们，给我们带来了非常大的压力。 那些入行几年，但是依然是功能测试的同学所面临的的压力可想而知。说到底，软件测试行业还是属于技术岗位。既然是技术岗位，那就要靠技术说话。不断掌握新的技能，提高软件测试“找bug”的能力也就变成了目前软件测试从业人员迫在眉睫需要解决的问题。因此，现在大部分初级功能测试人员都在向自动化、性能、安全靠拢。 但是还是有不少的软件测试工程师站在“十字路口”迷茫、无助，找不到自己的方向。 一切的迷茫都是因为想得太多而做的太少！每位软件测试行业从业者都能意识到目前自己面临的窘境，但能及时作出改变，顺应时代变化的人还是太少。多数人明明“泰山崩于前而面色如土”却只能眼睁睁看着自己被行业淘 ...

投递初还是源自于学校里发了一个恒生招聘的pdf文件，首先看文件，就明确了会招前端，为什么说是会招呢？请看下图吧。 本次预计就招380人，而对于前端来说，只招20个，你没看错，就20名，这比例我刚开始看的时候就感觉有点离谱。可想这次招聘的难度了… 投递后我不知道简历会不会刷人，你简历通过了的话，会发一个邮件邀请你加入恒生招聘群聊，我起初那时候加入的时候才400左右的人数，到今天6月21日晚早已经达到了群的容量2000人了，虽然期间有小部分退群的。但基本上这次招聘的话投递恒生的都是1000人以上了，而这1000多人中，我想搞 Java 的应该挺多的，毕竟招的人最多。不管怎样，这个群里投前端的也得有好几百人吧，还包括一些硕士研究生，而我得从这好几百人里面挤进前20。但我依旧还是觉得有希望的，相信自己！ 我想既然投的也这么多，而看群里的话，应该很少有人会因为简历被刷掉。那么，这次笔试的话，就会刷掉很多人了，因为恒生这次就一次技术面，而且招聘会上也是说了会在端午节之前（22、23、24号三天）面完所有人，然后就是发放Offer了，可想这次笔试是多么重要了！ 笔试过程 6月19日收到了来自恒生 ...

投递初原本我自己是不想参与笔试的，如标题所示，这是第二批笔试了。因为当初搜了搜关于深信服前端岗位，貌似有网友说前端框架比较老套，然后当初我看招聘信息上有这一点：熟悉ejs优先。关于这点，我没怎么了解过。第一次笔试，我室友就在我旁边进行的笔试，他是投的后端，一共就三道算法编程题。 原本以为我第一次没有参与笔试，应该就没有后续内容了，没想到前几天又发了邮件邀请我参与第二批笔试，我想了想，反正都是几道算法题，我就当做练练手好了，结果，打开题库，一共四个大题，分选择填空题25道，还有3道编程题，让我一下震惊地是三道编程题没有一个是算法题，全是手撕源码方面的，奈何最近又没怎么准备这方面的… 结果我想我已经心知肚明了，我交了白卷，但我把一些我感觉不太会的题目记录了下来，正好通过这次笔试，对自己查漏补缺一下。下面就是题目介绍环节了。 笔试过程介绍整套题25道多选题，3道编程题（已存在Promise实现Promise.all、手撕IOS按钮switch、自定义querySelector，要求保存状态） 小题代码题下述代码会输出什么？ let arr = ['a','b'];for(let key in ...

写作初心提问：为什么要学习数据结构和算法？如果你能明确这个问题的答案，just do it ！直接跳过后面内容，开始刷题就好了。 解决问题的思想计算机只是一个很冰冷的机器，你给他下发什么样的指令，它就能作出什么样的反应。而开发工程师要做的是如何把实际的问题转化成计算机的指令，如何转化，来看看《数据结构》的经典说法： 设计出数据结构， 在施加以算法就行了。 所以，很重要的一点，数据结构和算法对建立解决问题的思想非常重要。 如果说 Java 是自动档轿车，C 就是手动档吉普。数据结构呢？是变速箱的工作原理。你完全可以不知道变速箱怎样工作，就把自动档的车子从 A 开到 B，而且未必就比懂得的人慢。写程序这件事，和开车一样，经验可以起到很大作用，但如果你不知道底层是怎么工作的，就永远只能开车，既不会修车，也不能造车。如果你对这两件事都不感兴趣也就罢了，数据结构懂得用就好。但若你此生在编程领域还有点更高的追求，数据结构是绕不开的课题。 面试这是非常现实的一点，也是很多前端学习数据结构和算法的原因。 一般对待算法的态度会分为以下几类： Google 、Microsoft 等知名外企在面试 ...