- 博客(49)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 前端校招美团面试 第一篇
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0UJb49H-1593429409229)(https://static01.imgkr.com/temp/d39c0ea47bfe42a59d670a6eb6d910fe.png)]1. js异步加载的方式方案一、$(document).ready()需要引入jquery兼容所有浏览器$(document).ready(function() { alert("加载完成！");});方案二、<sc
2020-06-29 19:17:56
365
原创 前端校招滴滴面试 第一篇
1.用Promise实现延迟3秒后输出 delay(3000).then(f,e)A: function delay(timer) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(); }, timer) }) }2.图片懒加载原理 （lazy image）A.
2020-06-27 12:12:23
568
原创 （立下flag）每日10道前端面试题-23 关于【回溯】算法题
1.括号生成数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且 有效的 括号组合。示例：输入：n = 3输出：["((()))...
2020-06-23 08:53:08
225
原创 前端校招字节跳动面试 第四篇
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2amD6uz-1592816699821)(https://static01.imgkr.com/temp/bb66ea60e387465fa021e1f78e2b5e60.png)]面试官上来就问了一些比较简单的问题（除了自我介绍和项目经历）1、块级元素和行内元素分别有哪些？很简单，但是不容易答好，就跟问API一样，不过既然问了，还是要记一下：用分类法记住好块级元素[外链图片转存失败,源站可能有防盗链机制,建议将图
2020-06-22 17:05:24
501
原创 前端校招字节跳动面试 第一篇
1.讲一下排序，给一个不懂快排序的人讲快排，复杂度，为什么它叫快排序？参考白话经典算法系列之六 快速排序 快速搞定2.个按照某个位置旋转的数组（连续且有序）求中位数，例如[7,8,9,1...
2020-06-22 11:42:42
169
原创 web安全之XSS攻击原理及防范
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nHwrCkXL-1592795850369)(https://static01.imgkr.com/temp/e31bf9555c2e44eeb535ca5ad63dda63.png)]一：什么是XSS攻击？XSS 即（Cross Site Scripting）中文名称为：跨站脚本攻击。XSS的重点不在于跨站点，而在于脚本的执行。那么XSS的原理是：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面
2020-06-22 11:17:59
2748
原创 白话经典算法系列之六 快速排序 快速搞定
快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高，因此经常被采用，再加上快速排序思想----分治法也确实实用，因此很多软件公司的笔试面试，包括像腾讯，微软等知名IT公...
2020-06-21 22:58:31
100
原创 字节跳动：圣杯布局，有几种办法
圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局 效果图：left和right是定宽，middl...
2020-06-21 22:58:31
199
1
原创 WEB安全之-CSRF（跨站请求伪造）
WEB安全之-CSRF（跨站请求伪造）WEB安全中经常谈到的两个东西：XSS和CSRF。这两个概念在前端面试中也经常被问到，只要涉及到WEB安全的东西就必须提到他们哥俩，从我以往的面试经历中我多次死在这两个东西上，知道这两个东西但让我仔细描述下就瞎几把乱扯，结果可想而知。这几天也查阅了相关书籍，终于把这两个东西搞明白了，为此决定写篇文章来记录他们俩以备今后复习，这篇先介绍CSRF。CSRF是什么鬼CSRF（Cross Site Request Forgery） 跨站请求伪造。也被称为One Cl.
2020-06-21 19:53:33
559
原创 字节面试题：圣杯布局，有几种办法
圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局 效果图：left和right是定宽，middle是自适应的body代码：<body> <header></header> <div class="box"> <div class="left"></div> <div class="right"></di
2020-06-21 13:12:00
232
原创 flex设置成1和auto有什么区别
首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：.item {flex: 2333 3222 234px;}.item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px;}当 flex 取值为 n
2020-06-21 08:23:45
1337
原创 前端校招字节跳动面试 第三篇
1. promise以及then方法相关。参考一步一步实现自己的Promise2. 使用构造函数创建对象相关。(1). 使用new创建时JS都做了哪些事情。(2). 如何自己实现new这个过程，包括创建空对象，如何将函数执行环境设置到该对象上，如何给它添加应该继承的方法，这里不能用 new Object或者对象字面量创建一个对象再将原型链连接上，因为new是需要自己实现的。function newFunc(father, ...rest) { var result = {}; resul.
2020-06-20 22:54:38
308
原创 es6中生成器Generator的使用场景
由于Generator可以暂停函数执行，返回任意表达式的值，这使得 Generator有多种应用场景，这篇文章简单整理一些Generator的使用场景。1、异步操作的同步化表达Generator函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。fun
2020-06-20 21:46:05
3316
原创 http1.0 http1.1 http2.0特性及区别
[外链图片转存中…(img-Uh3yZdl2-1592646135460)]http1.0特性无状态：服务器不跟踪不记录请求过的状态无连接：浏览器每次请求都需要建立tcp连接无状态对于无状态的特性可以借助cookie/session机制来做身份认证和状态记录无连接无连接导致的性能缺陷有两种：无法复用连接每次发送请求，都需要进行一次tcp连接（即3次握手4次挥手），使得网络的利用率非常低队头阻塞http1.0规定在前一个请求响应到达之后下一个请求才能发送，如果前一个阻塞，后面
2020-06-20 17:43:17
311
原创 字节面试题：详解浏览器工作原理
前言本文主要介绍如下内容：浏览器的高层结构浏览器的渲染原理浏览器如何加载Javascript脚本Javascript引擎如何工作引入在浏览器中输入URL并回车后都发生了什么？让我们从大家...
2020-06-20 11:39:59
1076
原创 前端校招字节跳动面试 第二篇
字节跳动二面1.stick—footer的解决策略stick footer就是让footer元素固定在底部，1当内容不足满屏时，footer紧贴最底部。2，满屏需要下拉时，footer就在内容的底部通常用于提示的页面，下面有个x的按钮，这个按钮就是footer，它是用于关闭这个弹窗的，内容少时处在底部，多时下拉才显示。保证你都看完了。使用方法就是在所有的内容页设置height:100%;写文字的部分最小的高度min-height:100%；footer处在内容页之外<div class=.
2020-06-20 11:33:35
474
原创 详解浏览器工作原理
前言本文主要介绍如下内容：浏览器的高层结构浏览器的渲染原理浏览器如何加载Javascript脚本Javascript引擎如何工作引入在浏览器中输入URL并回车后都发生了什么？让我们从大家最熟悉的这个面试问题引入，先不往下看文章，你能脱口而出的说出答案嘛？如果可以恭喜你，你可以跳过这一小节。如果不可以那就还是看一下吧~URL解析：从URL中抽取出域名字段DNS域名解析：查找浏览器缓存：浏览器会缓存2-30分钟访问过网站的DNS信息，如未找到 检查系统缓存：检查hosts文件，它保
2020-06-20 10:38:40
412
原创 字节面试题：flex用法，应用场景
flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用属性说明：父容器：justify-content ：属性用于定义如何沿着..
2020-06-19 21:46:02
605
原创 （立下flag）每日10道前端面试题-22 关于 字节一面
这是某位不愿意透露姓名的大佬遇到的题。1.讲一下排序，给一个不懂快排序的人讲快排，复杂度，为什么它叫快排序？【见参考】个按照某个位置旋转的数组（连续且有序）求中位数，例如[7,8,9,1,2,3,4,5,6]，复杂度，如何降到比n更低？思路：先找到最小的数，也就是还没翻转时arr[0]这个数。然后就可以算出中位数的位置了。public class findNumInRotateArr { public static double minNumberInRotateArray(int[.
2020-06-19 16:49:13
495
原创 （立下flag）每日10道前端面试题-22 关于【二叉树】算法题
1.对称二叉树给定一个二叉树，检查它是否是镜像对称的。例如，二叉树[1,2,2,3,4,4,3]是对称的。1/\22/\/\344...
2020-06-19 09:52:32
308
原创 （立下flag）每日10道前端面试题-21 关于【动态规划】算法题
1. 最长回文子串给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。示例 1：输入: "babad"输出: "bab&...
2020-06-17 12:47:44
403
原创 学习vue源码（19）四探生命周期之初始化props
前面文章已经 把 created钩子函数触发前，beforeCreate触发后 的initInjections和initProvide讲完了，现在开始讲 initState的props部分。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …… vm._self = vm initLifecycle(vm) initEvents(vm) init.
2020-06-14 17:31:35
2481
原创 学习vue源码（18）三探生命周期之初始化provide与inject
上篇文章学习vue源码（17）再探生命周期之初始化实例属性及事件讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm)即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …… vm._self = vm ini.
2020-06-14 10:36:36
1002
原创 学习vue源码（17）再探生命周期之初始化实例属性及事件
在前一篇文章学习vue源码（16）初探生命周期各阶段都在干嘛Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。而初始化阶段又可分为在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。这一次，我们就来探究第一阶段：初始化阶段的属性、事件,如代码所示，研究initLifecycle，initEvents，initRender。都干了什么。这件这三个初始化 都在be.
2020-06-13 20:08:38
535
原创 学习vue源码（16）初探生命周期之各阶段都在干嘛
一、概述每个Vue.js实例在创建时都要经过一系列初始化，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时，也会运行一些叫作生命周期钩子的函数，给在不同阶段添加自定义代码的机会。二、生命周期Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。初始化阶段new Vue（）到created之间的阶段叫作初始化阶段。这个阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、com.
2020-06-13 16:24:00
353
原创 学习vue源码（15）手写$forceUpdate,vm.$destroy方法
vm.$forceUpdate（1）作用迫使Vue.js实例重新渲染。注意它仅仅影响实例本身以及插入插槽内容的子组件，而不是所有子组件。（2）实现只需要执行watcher的update方法，就可以让实例重新渲染。Vue.js的每一个实例都有一个watcher。当状态发生改变时，会通知到组件级别，然后组件内部使用虚拟DOM进行更详细的重新渲染操作。事实上，组件就是Vue.js实例，所以组件几倍的watcher和Vue.js实例上的watcher说的是同一个watcher。手动执行实例watch.
2020-06-13 10:51:28
713
原创 立下flag）每日10道前端面试题-20 关于【数组】算法题
1. 两数之和给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中...
2020-06-12 21:38:33
291
原创 学习vue源码（14）就慢慢由表入里学习diff
大白话简述这一节，先对diff进行简单的描述，不会出现任何的源码，只是为了帮助大家建立一种思路，了解下 Diff 的大概内容。1、Diff 的作用2、Diff 的做法3、Diff...
2020-06-12 21:38:33
173
1
原创 学习vue源码（14）深入学习diff
大白话简述这一节，先对diff进行简单的描述，不会出现任何的源码，只是为了帮助大家建立一种思路，了解下 Diff 的大概内容。1、Diff 的作用2、Diff 的做法3、Diff 的比较逻辑4、简单的例子1. Diff 作用Diff 的出现，就会为了减少更新量，找到最小差异部分DOM，只更新差异部分DOM就好了这样消耗就会小一些数据变化一下，没必要把其他没有涉及的没有变化的DOM 也替换了2. Diff 做法Vue 只会对新旧节点中 父节点是相同节点 的 那一层子节点 进行比.
2020-06-12 19:27:18
242
原创 还没好。。。
1. vm.$set一、用法vm.$set(target,key,value)（1）参数{Object | Array} target{string | number} key{any} value（2）返回值{ Function } unwatch（3）用法在object上设置一个属性，如果object是响应式的，Vue.js会保证属性被创建后也是响应式的，并且触发视图更新。这个方法主要用来避开Vue.js不能侦测属性被添加的限制。（4）注意target不能是Vue.js实.
2020-06-10 14:30:35
141
原创 学习vue源码（13）手写$nextTick
1.概述nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。它与全局Vue.nextTick的原理时一样的。可能有同学对将回调延迟到下次DOM更新...
2020-06-10 08:38:57
211
原创 学习vue源码（13）手写 $nextTick
1.概述nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。它与全局Vue.nextTick的原理时一样的。可能有同学对将回调延迟到下次DOM更新周期之后执行不太理解，其实它的意思就是在Vue.js中，当状态发生改变时，watcher会得到通知，然后触发虚拟DOM的渲染过程。而watcher触发渲染这个操作并不是同步的，而是异步的。Vue.js中有一个队列（即callbacks），每当需要渲染时，会将watcher推送到这个队列中，在下一次事件循环中再让w.
2020-06-10 08:12:08
540
原创 学习vue源码（12）大白话谈响应式原理
前言本文用最简单的方式来解释VUE2 最重点的响应式原理，看不懂算我输！一、 响应式原理什么是响应式原理？意思就是在改变数据的时候，视图会跟着更新。这意味着你只需要进行数据的管理，给我们搬砖提供了很大的便利。VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。所以在学习VUE的响应式原理之前，先学习两个预备知识：Object.defineProperty 与 观察者模式。三、原理解析在学完了前面的铺垫之后，我们终于可以开.
2020-06-09 20:37:59
214
原创 立下flag）每日10道前端面试题-19 关于【位运算】算法题
1.多数元素给定一个大小为 n 的数组，找到其中的多数元素。多数元素是指在数组中出现次数大于⌊ n/2 ⌋的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。示例1:...
2020-06-09 13:03:34
176
原创 学习vue源码（11）学习 合并策略
我们 之前 谈 学习vue源码（5） 手写Vue.use、Vue.mixin、Vue.compile的时候 谈到了Vue.mixin的源码实现，然后谈到了mergeOptions，那时并没有深入解说 这个函数 的原理。如图所示这次我们就来深入研究下，因此也就离不开Vue中的一个重要思想：合并策略了。我们有时面试时可能会遇到这样的问题：引入的mixin的data中 有 name这个属性，自己注册的组件的data中也有name，那哪个会生效？引入的mixin中有created，自己注册的组件中也有.
2020-06-08 16:39:16
289
原创 学习vue源码（10）学习render渲染函数
compile 部分已经讲完了（compile部分分为 解析器 + 优化器+ 代码生成器），终于走到了 render，今天就来给自己记录下渲染三部曲的第二部render，（渲染三部曲= ...
2020-06-07 20:12:43
603
原创 立下flag）每日10道前端面试题-19 关于【字符串】算法题
1. 无重复字符的最长子串给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。示例1:输入: "abcabcbb"输出: 3解释: 因为无重复字符的...
2020-06-07 20:12:43
490
原创 学习vue源码（7）手写解析器(中)
2. 解析自闭合标识如果我们接着上面的例子继续解析的话，目前剩余的模板是下面这样的：'></div>'开始标签中结尾部分解析的主要目的是解析出当前这个...
2020-06-05 21:38:40
116
原创 学习vue源码（7）手写解析器(上)
通过 学习vue源码（6）熟悉模板编译原理的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析...
2020-06-05 21:38:40
130
原创 学习vue源码（7）手写解析器(下)
8 纯文本内容元素的处理什么是纯文本内容元素呢？script、style和textarea这三种元素叫作纯文本内容元素。解析它们的时候，会把这三种标签内包含的所有内容都当作文本处理。那么...
2020-06-05 21:38:40
105
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人