{{span1}} {{span2}} 次上传
过去一年提交{{total}}{{oneyearbeforeday}} - {{thisday}}
最近一月提交{{thisweekdatacore}}{{amonthago}} - {{thisday}}
最近一周提交{{weekdatacore}}{{aweekago}} - {{thisday}}
「CSS深度指北」前端知识梳理之CSS篇(中秋国庆特别篇)
认识浏览器组成部分可能一说组成部分,小伙伴们就直接懵了,开门见山地说,别怕,还有更懵的在后面呢!
组成分为两大部分: shell 和 内核(其中内核是核心部分,它代表着浏览器所使用的技术手段,而shell就是我们用户所看到的界面)
例举你知道的比较大的浏览器产商?
shell
内核
Google Chrome
webkit(谷歌和苹果safari一起开发)/ blink(谷歌将技术独立出来)
safari
webkit
firefox
gecko
IE
trident
opera(目前属于360和昆仑万维)
presto
===== 手动分界线 =====
360
QQ
遨游
猎豹
全球
搜狗
…
分界线的意义:分界面下面部分只是在 shell 上做了手段,没有专属的内核。我们回答的话答分界线上部分即可。
内核包含渲染(rendering)引擎 和 JS 引擎
渲染引擎如字面意思,就是渲染我们页面的,大致了解即可,本文在这里讲解一下 JS 引擎。 JS 引擎早期是不存在的,通过同步渲染引擎来负责JS的解析。而渲染引擎性能是有限的,所以JS解析代码能 ...
「字节跳动-飞书」秋招面试复盘总结
字节跳动-飞书面经介绍9月20日晚7点进行了笔试,有3道单选题,2道多选题,然后3道编程题,3道编程题全A了,自然收到了面试邀请,约了9月29日下午5点一面。
一面面经1、自我介绍(提及了自己恒生实习经历和写博客习惯)2、说一下你的个人经历(详细讲了实习这一块做了什么)3、实习中表格渲染具体怎么做的,说一说4、Vuex实现原理
这里答的不是很好,面试官跳过了。
5、Vue组件通信有哪些?说一说
只答了父子组件,兄弟组件,自定义事件,还有一些忘记了。
6、实习项目登录你是怎么做的?token怎么存,如果要让登录状态在新的tab页面保持,你怎么做?
cookie
7、如果避免用户通过JS脚本获取cookie
8、普通函数和箭头函数的区别
答的不是很好,面试官跳过了
9、箭头函数可以作为构造函数吗
回答了不可以,但是可能答的不是特别好
10、说一下你对原型和原型链的理解?
11、说说你对TCP的理解,说说三次握手
12、考察Event Loop(事件循环)机制,写出输出结果:
console.log('begin')setTimeout(() => { ...
【源码篇:总结与思考】虚拟节点与DOM Diff算法源码实现
前言本文源码收录于 DOM-Diff 仓库,文章内容按照一位老师视频学习而来(详情见文本末尾哈),每一个字都是自己手动敲出来的,算是给自己的一个梳理和总结,下面,我们一起来学习一下 dom diff 吧。
DOM Diffdom diff 其实就是对比两个虚拟节点,然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异,然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。
而对于虚拟节点呢,我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来,通过比较两个新老虚拟节点,得到彼此的差异,形成一个补丁,最后再与真实的 dom 进行匹配,将这些补丁打到真实 dom 上去,最终,我们还是操作了原来的真实 dom,但是我们是用了差异化结果的 最小的代价 来操作的。
平级对比上文我们讲解了虚拟节点可以简单理解为普通对象,那么我们来用图示来看一看,得到其中的一个特点:左边就是旧的虚拟节点,而右边是新的虚拟节点。我们来看看有什么变化:
第一层, ul 底下的 class 由 list 变为了 wrap
第二层,第三个孩子 li 变 ...
「网易互娱-CC直播事业群」秋招面试复盘总结【已走完流程】
网易互娱-CC直播事业群面经介绍9月11日晚7点进行了笔试,当时感觉难度有点大,共4道题,仅A了一道题,最后一题0%,另外两道过了一点样例。好在还是收到了面试邀请,9月23日下午5点开始了网易互娱一面。
一面9月23日(周三)下午5点 时间大约26分钟左右
面经1、自我介绍(提及了自己恒生实习经历和写博客习惯)2、几乎全是聊实习经历,可能参考价值不大,但是分享一下相关项目经验的问题3、你在实习角色是什么?有遇到什么问题吗?怎么解决的?4、你说了跨域,那你知道复杂请求怎么处理的吗?
参考:处理简单请求和复杂请求之完美跨域CORS
参考MDN:跨源资源共享(CORS)
5、刚刚你说了预校验,那么怎么可以取消它呢?6、你说了深拷贝,你是怎么做的?可以自己手动实现一个吗?对数组怎么做?JSON.parse(...)这种方式有什么不好的地方,说一说?
/* JSON.parse(JSON.stringify()) 可以拷贝数据吗? */let obj = { arr: [1,2,3], name: 'Chocolate', age: 21}let res = JSON. ...
「JavaScript灵魂之问」前端知识梳理之 JS 篇(中秋特别篇)
JS 错误信息类型语法错误1、SyntaxError 语法错误
// 变量名不规范var 1 = 1;
SyntaxError: Unexpected number 意外的数字
var 1ab = 1;
SyntaxError: Invalid or unexpected token 其中token指代标记的意思。
// 关键字不可赋值new = 5;
SyntaxError: Unexpected token '='
// 基本语法错误var a = 5:
SyntaxError: Unexpected token ':'
引用错误2、ReferenceError 引用错误、
// 变量或函数未被声明test();
ReferenceError: test is not defined
console.log(a);
ReferenceError: a is not defined
// 给无法被赋值的对象赋值的时候var a = 1 = 2;
SyntaxError: Invalid left-hand side in assignme ...
「JavaScript灵魂之问」前端知识梳理之 JS 篇(下篇)
三元运算基础开门见山,三元运算,我想对于很多编程语言都有提到,下面就简单一个例子来讲解一下好了。
var str = 89 > 9? ('89' > '9'? '通过了': '内层未通过') : '外层未通过';console.log(str);
查看答案
答案是 内层未通过,注意 '89' > '9'的比较,由于都是字符串,会从第一位以 ASCII码来进行比较。由于89第一位为8,于是小于 9,返回 false,走后面那个,最后打印了 内层未通过。
浅拷贝var person1 = { name: 'Chocolate', age: 21, child: { car: ['Benz', 'Mazda'], first: { name: 'cc', age: 10 }, second: { name: 'dd', age: 11 } }}var person2 = clo ...
「JavaScript灵魂之问」前端知识梳理之 JS 篇(中篇)
对象基础对象前置知识
/* 对象基础知识 */var teacher = { name: '张三', age: 32, sex: 'male', height: 176, weight: 130, teach: function(){ console.log('I am teaching JS'); }, smoke: function(){ console.log('I am smoking'); }, eat: function(){ console.log('I am having a dinner'); }}/* 查找 */console.log(teacher.name);teacher.teach();teacher.smoke();teacher.eat();/* 增加 */teacher.address = '北京'teacher.drink = function(){ console.log('I am drinking beer');& ...
「JavaScript灵魂之问」前端知识梳理之 JS 篇(上篇)
基础typeof 知多少前置知识:
typeof 判断数据类型会输出如下这些:
number string boolean object undefined function
需要注意的:
console.log(typeof(null)) // objectconsole.log(typeof(undefined)) // undefined
开门见山,下面输出会是什么?
console.log(typeof(1 -'1'))
查看答案
number,你有没有中招呢?
console.log(typeof('1' -'1'))
查看答案
还是number,诶?怎么肥事?为啥不是 string 呢?
上面两个题,答的怎么样呢?后续讲解显示/隐式类型转换时会给大家解答,接着继续 GO!
下面代码会是怎样的结果?
console.log(a)
查看答案
可能你会说输出 undefined,但你又入坑了…答案是会报错。
好的,接下来继续,我再来变一下,下面又会输出什么?还是会报错吗?
console.log(typeof(a))
查看答案
答案是 u ...
「快手-效率工程」秋招面试复盘总结
快手-效率工程面经介绍8月25日(周二)投递,在9月8日上午收到 HR 电话,告知简历通过了,约9月10日上午11点面试,整个面试时间1个小时左右。
一面面经1、自我介绍2、你刚刚提到了项目中防抖 debounce ,你知道实现原理是什么吗?说一说
这个问题是项目中用到过,然后自我介绍提了一下,就说了一下原理,面试官居然不要我手撕…
3、你家乡在哪?面试岗位在北京,有没有城市要求吗?
回答:反正在湖南,去哪都是很远…
4、实现一个函数,以字符串形式(要求字母小写)返回参数类型
// null => 'null' undefined=>'undefined'function getArgType(arg){}
实现:
/* 编程题:以字符串形式返回参数类型 */function getArgType(arg){ let str = Object.prototype.toString.call(arg).slice(8,-1) let res = str[0].toLowerCase() + str.substr(1) retur ...
「滴滴-橙心优选」秋招面试复盘总结
滴滴-橙心优选 面经介绍先说一下最终结果吧,第三面凉了。9月5号下午1点开始,一直到下午4点20样子,持续三轮面试,最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础,没有深度挖掘知识点。另外,已经过了一天了,还是三面一起来的,可能会有问题遗漏掉,一般来说遗漏掉的都是比较简单,能轻松说出来的那种。
一面面经1、自我介绍2、JS基本数据类型(怎么判断基本数据类型)3、说说你对原型和原型链的理解4、水平垂直居中的几种方式,说一说5、说说你对深浅拷贝的理解(要求手撕深拷贝)6、输入一个URL到渲染页面的整个过程7、浏览器缓存有了解过嘛?说说看8、说一个你熟悉的排序算法,然后手写一下(简单写了一个冒泡)
感受一面问的比较基础,也是比较顺利收到了二面通知
二面面经1、自我介绍2、CSS选择器优先级的理解3、CSS定位的几种方式4、CSS怎么清除浮动5、display几种属性说一说6、水平垂直居中的几种方式7、父容器已知宽高,子容器宽高未知,怎样让子容器水平垂直居中8、css modules你有了解过吗9、如果组件css命名冲突,你怎么解决10、设计模式你有了解过吗?说说单例模式11 ...