Code Monkey home page Code Monkey logo

fe-interview's Introduction

大前端面试宝典 - 图解前端

Total visitor Visitors in today

统计数据的时间是从 2019-09-03 19:40 起至今

为了更好的阅读效果,推荐使用在线阅读的方式。

logo 这是一份自己总结的关于准备前端面试的一个复习汇总项目,项目不定时更新。

这不仅仅是一份用于求职面试的攻略,也是一份前端 er 用来检视自己,实现突破的宝典。 希望通过这个指南,大家可以打通自己的任督二脉,在前端的路上更进一步。

本仓库大量采用图的形式来传达知识,所谓一图胜千言,希望通过这种图文并茂的表达方式 让你更容易记住一些抽象,难以理解的概念,《图解前端》是我给它的副标题。

所有的内容按照主题进行分类,大家可以根据自己需要随意传送, enjoy🍻🍻🍻

我的目标是做宇宙最强的前端面试指南

WIP: 🚧 项目还在施工中哦,请戴好头盔!⚠️

简介

面试是一件很主观很难的事情。 面试不通过不代表你就不合格,同样地即使面试通过也不意味着你就合格了。 作为候选人,通常会给你 45 分钟的时间来让你展示自己的技能。 作为一名面试官,同样难以在这么短的时间里评估这个人是否适合这项工作。 对于面试来说,没有任何一种标准能够适合所有人,面试官通常会覆盖某一个领域,但除此之外,他们会自行决定应该问哪些问题。

准备面试,我们应该准备一些真正能够体现面试人水平的题目,比如一些编程题,设计题,框架选型等,不要过分 拘泥于特别小的问题,尤其是 API 的问题,比如==的隐式转化,我个人很反感这种问题。 相反面试官应该更关注面试者是否了解前端开发的基本原理,而不是依赖更高级别的抽象。 比如你是否可以在不依赖库的情况下完成开发任务(当然实际情况很少这样),这样你才能彻底理解库在背后都做了什么。

关于我

我是一个对技术充满兴趣的程序员, 擅长前端工程化,前端性能优化,前端标准化等。

做过.net, 搞过 Java,现在是一名前端工程师。拥有两年前端面试官的经验, 对于面试的一些技术问题和套路有一定的认识和积累。

除了我的本职工作外,我会在开源社区进行一些输出和分享,比较受欢迎的有leetcode 题解我的第一本小书

如果大家需要内推的可以找我,我这里有包括阿里,腾讯,头条,网易等很多公司的朋友。 有需要可以直接群里联系我,或者发送到我的个人邮箱 [[email protected]]。

主题

这部分的内容建议使用线上地址阅读

声明

本仓库的所有内容都是本人自己整理的,因此可能有不够完善,优秀甚至错误的地方,大家可以随意提问题。

对于前端的技能图谱,我比较推荐这个网站。 这个网站相对于其他的前端技能图谱,更新地更快一点,其他的技能图谱很多都落伍了。

每日一题

每日一题是在交流群(包括微信和 qq)里进行的一种活动,大家一起 解一道题,这样讨论问题更加集中, 会得到更多的反馈。而且 这些题目可以被记录下来,日后会进行筛选添加到仓库的题解模块。

关注我

我重新整理了下自己的公众号,并且我还给它换了一个名字脑洞前端,它是一个帮助你打开大前端新世界大门的钥匙 🔑,在这里你可以听到新奇的观点,看到一些技术尝新,还会收到系统性总结和思考。

在这里我会尽量通过图的形式来阐述一些概念和逻辑,帮助大家快速理解,图解是我的目标。

之后我的文章会同步到微信公众号 脑洞前端 ,你可以关注获取最新的文章,并和我进行交流。

另外你可以回复大前端进大前端微信交流群, 回复 leetcode 拉你进 leetcode 微信群,如果想加入 qq 群,请回复 qq。

捐赠

点击查看完整的捐赠列表

微信

支付宝

贡献

  • 项目刚刚创建,个人精力有限。再加上有些东西我本人也不是很精通,因此邀请各路仙友加入到这个项目中来,欢迎大家认领相应的模块,当然也可以添加新的模块。
  • 如果有想法和创意,请提issue或者进群提
  • 如果想贡献代码,请提PR
  • 如果需要修改项目中图片,这里存放了项目中绘制图的源代码, 大家可以用draw.io打开进行编辑。

License

Apache-2.0

fe-interview's People

Contributors

azl397985856 avatar brucephoebus avatar feikerwu avatar heternally avatar threedayaaaaa avatar wuyuchang avatar yulecc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fe-interview's Issues

【每日一题】– 2019-10-11 - 对于解构以下说法错误的是

  1. 不完全解构,也会成功,不会报错。
  2. 只要支持Iterator接口,都可以被解构赋值。
  3. null可以替代默认值,而成功的解构赋值。
  4. 结构中不定参数可以出现在除第一个以外的其它的其他位置。
  5. 解构是先找到同名的属性,然后再赋给对应的变量。
  6. 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

【每日一题】- 2019-08-13 - 如何判断一个Number是+0还是-0

JavaScript的数值Number用64位的浮点数表示,首位是符号位,然后是52位的整数位和11位的小数位。如果符号位为1,其他各位均为0,那么这个数值会被表示成“-0”。

所以JavaScript的“0”值有两个,+0和-0。

那么如何区分呢?

【每日一题】- 2019-08-07 - 如何实现一个虚拟浏览器调用栈

现实中浏览器的调用堆栈信息是不要一样的,因此对于我们调试问题很不方便。

比如我们平常习惯了chrome的堆栈,突然换到了safari或者IE就会很不适应。

有没有办法自己实现一套调用堆栈,统一所有浏览器呢? 这样我们以后调试的时候就很方便了。

扩展:

是否可以将这个集成到我们的监控系统中,如果线上有问题,一键调出来堆栈信息,上下文,用户轨迹,环境信息,从而帮助我们快速定位和解决问题

【每日一题】– 2019-09-11 - 实现querySelector

相信大家都用过Element.querySelector(selector)或者document.querySelector(selector) 来查找DOM元素,那么如何实现一个这样的一个函数,这个函数接受两个参数,分别为selector和element(默认为body),找到element所有子元素中满足selector的第一个元素。

// 实现querySelector
function querySelector(selector, element) {}

【每日一题】- 2019-08-16 - 怎么在浏览器中操作本地的文件

由于安全的限制,浏览器是不开放写文件的API的,即使提供也会有很多限制。

假如现在有这样一个需求,让你去实现一个类似vue-cli 3.0 的可视化脚手架工具。

现在有一个问题,浏览器是无法直接操作本地文件,在本地生成文件目录的,那么我如何实现这个功能呢?

【每日一题】- 2019-08-15 - 控制console

我们在合作开发的过程中,经常碰到别人在代码中加入console.log的调试代码,
这个时候你在开发你的部分的时候就有可能由于引入他的组件,导致控制台出现很多你
并不关心的信息,干扰你的调试。

一种方式是禁止提交console的代码,那如果不可以禁止,我们怎么才能不看到别人的console输出,
而只看到自己的console呢?

【每日一题】- 2019-11-05 - 实现canvas

Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

假设浏览器现在全体都不支持Canvas,现在让你去开发出一个Canava实现,你的思路是什么?

【每日一题】– 2019-10-10 - 下列对css外边距描述正确的是(不考虑BFC对边距的影响

  1. 外边距的css代码是padding
  2. 两个上下相邻的同级元素Div1,Div2。Div1的下边距是10px,Div2的上边距是10px。Div1和Div2的间距是20px
  3. 两个上下相邻的同级元素Div1,Div2。Div1的下边距是20px,Div2的上边距是10px。Div1和Div2的间距是20px
  4. 外边距的值为(10px 20px 30px)。所以其上边距为10px,下边距为20px,左边距为30px,右边距为30px
  5. 一个空元素的高度,边框,内边距都是0,上下外边距为20px,那么这个空元素的框模型的高度为40px
  6. 一个空元素的高度,边框,内边距都是0,上下外边距为20px,那么这个空元素的框模型的高度为20px

【每日一题】- 2019-08-22 - 奇偶排序

给定一个数组排序,使得奇数位的值不大于相邻偶数位的值。

比如:

OESort([1,2,3,4,5,6]); // [ 4, 1, 5, 2, 6, 3 ]
OESort([1,2,3,4,5,6,7,8,9, 0]) // [ 5, 0, 6, 1, 7, 2, 8, 3, 9, 4 ]

注意: 答案是不唯一的

【每日一题】- 2019-08-19 - 以下代码的输出结果是什么?

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

【每日一题】- 2019-08-30 - 如何判断接口是否异步?

我们如何判断一个方法是同步的还是异步的,是否只要有回调函数就是异步?

比如react setState是同步还是异步,setTimeout是同步还是异步,console.log呢?
你自己怎么写一个异步的方法?

ps: 上面的很多都是伪问题, 你能看出来我问的有问题么?

【每日一题】– 2019-10-09 - 以下说法正确的是?

  1. 通过new URL('www.taobao.com') ,可以解析url内容。
  2. console.log()是异步调用
  3. Async functions本质上是Generators的语法糖
  4. 在发布NPM模块时,版本号可以任意
  5. process.nextTrick()和setImmediate()执行时机一致
  6. Node.js是一门后端语言

【每日一题】– 2019-09-10 - 实现Redux中的 combineReducers(reducers)

combineReducers可以允许你写多个reducer,然后通过它将多个reducer整合到一起,每一个reducer只会对其注册的key进行修改,不会影响其他reducer的state。

例子:

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// This would produce the following state object
{
  potato: {
    // ... potatoes, and other state managed by the potatoReducer ...
  },
  tomato: {
    // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...
  }
}

更多关于combineReducers(reducers) API, 请参考 https://redux.js.org/api/combinereducers

【每日一题】– 2019-10-17 - canvas图片为什么要设计成有跨域的安全问题

images 引入了 crossorigin 属性, 通过设置适当的头信息 CORS , 可以从其他站点加载 img 图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.

尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).

请问这是为什么?

【每日一题】- 2019-08-28 - 实现Array.prototype.find

功能: 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法: arr.find(callback[, thisArg])

callback是在数组每一项上执行的函数,接收 3 个参数:

  • element 当前遍历到的元素。
  • index可选 当前遍历到的索引。
  • array可选 数组本身。

thisArg可选 执行回调时用作this 的对象。

eg:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

更多关于find的介绍请参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find

【每日一题】– 2019-10-12 - IP地址存储

将IP地址转化为32字节存储,并支持反向解析为原IP地址。

比如:

"192.168.0.1" - > 13232323 (一个数字,这个数字的范围不能超过32个字节的表示范围)

13232323 -> "192.168.0.1"

实现函数:

function IP2Int(str) {
}

function Int2IP(int) {
}

【每日一题】- 2019-08-12 - 如何正确判断一个字符串是否是Number

实现函数isNumeric,使得其能够正确判断以下各种情况:

function isNumeric(str) {
  // your code goes here
}

console.assert(isNumeric('1000'));
console.assert(isNumeric('-100.'));
console.assert(isNumeric('.1'));
console.assert(isNumeric('-3.2'));
console.assert(isNumeric('001'));
console.assert(isNumeric('+4.5'));
console.assert(isNumeric('1e3'));
console.assert(isNumeric('1e-3'));
console.assert(isNumeric('-100e-3'));

console.assert(!isNumeric('++3'));
console.assert(!isNumeric('-100..'));
console.assert(!isNumeric('3abc'));
console.assert(!isNumeric('abc'));
console.assert(!isNumeric('-3e3.2'));
console.assert(!isNumeric('Infinity'));
console.assert(!isNumeric('-Infinity'));
console.assert(!isNumeric(''));

【每日一题】- 2019-10-30 实现monitor/unmonitor

chrome内置的用来观察函数调用的工具方法。在函数调用的时候,可以同步输出函数名以及参数。当不再需要观察该函数时,调用unmonitor取消即可。

具体用法可以在chrome 的 devtool 自己试试

扩展:

实现chrome下提供的monitorEvents/unmonitorEvents

【每日一题】- 2019-08-05 - 数据格式转化问题

已知数据格式:

const userToSkill = {
robert: ["programming", "design", "reactjs"],
kimia: ["java", "backend", "services"],
patrick: ["reactjs"],
chris: ["reactjs", "programming"]
};

转化成

const skillToUser = {
programming: ["robert", "chris"],
reactjs: ["patrick", "robert", "chris"],
java: ["kimia"],
backend: ["kimia"],
services: ["kimia"],
design: ["robert"]
};

扩展:

完成函数:

function setOfUsersWithSimillarSkills(userToSkill) {

}

期望输出: ["robert", "chris"]

English version?

I wanted to know is there any chance that we have an English version of this repo? I can't read Chinese but the topics and the codes in this repo look promising.

【每日一题】– 2019-09-24 - 以下关于Javascript执行引擎描述正确的是

  1. ECMAScript 2015中规定了执行引擎需要实现EventLoop机制。
  2. V8作为最先进的Javascript执行引擎,可以在执行阶段对所有代码进行优化。
  3. Node.js通过V8实现异步I/O。
  4. Node.js的Buffer类型对象在创建时内存不会分配到V8堆上。
  5. Chakra是Firefox内嵌的Javascript执行引擎。
  6. 代码正确的情况下,垃圾回收不会导致有内存无法回收。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.