前端老飘

前端老飘 查看完整档案

北京编辑北京理工大学  |  计算机技术 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

前端老飘 发布了文章 · 3月4日

靠着这份280页《前端校招面试真题解析大全》,我拿到了阿里的offer

楼主前端方向,是在去年参加的春招,从牛客网上收获了很多经验贴和面经,在春招准备和面试过程中,收获了不少同学的帮助和鼓励。

最终运气比较好,拿到阿里、美团、OPPO、360和有赞的意向书,拿到阿里意向书以后便没有参加其他公司的面试了,现在把之前总结的春招经验分享出来,希望能够帮助到其他朋友~

前端知识点汇总

前端知识点是我在准备春招过程中,看书和经验贴中总结到的一些知识点,不仅面试中经常问到,同时对于自己未来的工作和学习也很重要,也欢迎大家一起补充~

一、JavaScript

  1. 原始值和引用值类型及区别
  2. 判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor
  3. 类数组与数组的区别与转换
  4. 数组的常见API
  5. bind、call、apply的区别
  6. new的原理
  7. 如何正确判断this?
  8. 闭包及其作用
  9. 原型和原型链
  10. prototype与__proto__的关系与区别
  11. 继承的实现方式及比较
  12. 深拷贝与浅拷贝
  13. 防抖和节流
  14. 作用域和作用域链、执行期上下文
  15. DOM常见的操作方式
  16. Array.sort()方法与实现机制
  17. Ajax的请求过程
  18. JS的垃圾回收机制
  19. JS中的String、Array和Math方法
  20. addEventListener和onClick()的区别
  21. new和Object.create的区别
  22. DOM的location对象
  23. 浏览器从输入URL到页面渲染的整个流程(涉及到计算机网络数据传输过程、浏览器解析渲染过程)
  24. 跨域、同源策略及跨域实现方式和原理
  25. 浏览器的回流(Reflow)和重绘(Repaints)
  26. JavaScript中的arguments
  27. EventLoop事件循环
  28. 宏任务与微任务
  29. BOM属性对象方法
  30. 函数柯里化及其通用封装
  31. JS的map()和reduce()方法
  32. “==”和“===”的区别
  33. setTimeout用作倒计时为何会产生误差?

二、ES6

1. let、const和var的概念与区别
2. 变量提升与暂时性死区
3. 变量的结构赋值
4. 箭头函数及其this问题
5. Symbol概念及其作用
6. Set和Map数据结构
7. Proxy
8. Reflect对象
9. Promise(手撕Promise A+规范、Promise.all、Promise相关API和方法)
10. Iterator和for...of(Iterator遍历器的实现)
11. 循环语法比较及使用场景(for、forEach、for...in、for...of)
12. Generator及其异步方面的应用
13. async函数
14. 几种异步方式的比较(回调、setTimeout、Promise、Generator、async)
15. class基本语法及继承
16. 模块加载方案比较(CommonJS和ES6的Module)
17. ES6模块加载与CommonJS加载的原理

三、HTML/CSS

1. CSS权重及其引入方式
2. 标签全部作用
3. 用CSS画三角形
4. 未知宽高元素水平垂直居中(方案及比较)
5. 元素种类的划分
6. 盒子模型及其理解
7. 定位方式及其区别(文档流)
8. margin塌陷及合并问题
9. 浮动模型及清除浮动的方法
10. CSS定位属性
11. display及相关属性
12. IFC与BFC
13. 圣杯布局和双飞翼布局的实现
14. Flex布局
15. px、em、rem的区别
16. Less预处理语言
17. 媒体查询
18. vh与vw
19. H5的语义化作用及语义化标签
20. Web Worker和Web Socket
21. CSS3及相关动画
22. 如何实现响应式布局
23. SEO的概念及实现
24. HTML5的新特性
25. Less和Sass使用

四、HTTP与计算机网络

1. TCP/IP协议分层管理
2. 三次握手四次挥手机制及原因
3. HTTP方法
4. GET和POST的区别
5. HTTP建立持久连接的意义
6. HTTP报文的结构
7. HTTP状态码
8. Web服务器及其组成
9. HTTP报文首部
10. HTTP通用首部字段
11. HTTP请求首部字段、响应首部字段、实体首部字段
12. Cookie相关首部字段
13. HTTPS与HTTP区别及实现方式
14. Cookie与Session
15. 基于HTTP的功能追加协议(SPY、WebSocket、HTTP)
16. 常见的Web攻击分类
17. TCP与UDP区别
18. 存储机制localStorage、sessionStorage与Cookie存储技术
19. XSS攻击及防御
20. CSRF攻击及防御

五、前端工程化

1. 前端工程化的流程(架构选型、业务开发、测试、打包构建、部署上线、项目监控)
2. Webpack基本概念与配置
3. loader与plugin原理与实现
4. Webpack的模块热替换及实现
5. Webpack的优化问题
6. SPA及其优缺点
7. SSR实现及优缺点
8. 设计模式(工厂模式、单例模式、原型模式、*模式、适配器模式、观察者模式等...)

六、React

1. React自身特点及选型时考虑
2. React与VUE的异同
3. Virtual DOM
4. React生命周期
5. Diff算法
6. 受控组件与非受控组件
7. 高阶组件
8. Flux架构模式(涉及MVC/MVVM、Flux)
9. Redux设计概念、设计原则、方法、redux实现异步流的库
10. 纯组件(Pure Component)与shouldComponentUpdate关系
11. Redux中的<Provider/>组件与connect函数
12. React Fiber架构
13. React Hooks的作用及原理

七、NodeJS

1. NodeJS基本概念与特点
2. CommonJS规范、核心模块
3. Node的异步I/O
4. Node的内存控制
5. Node构建网络服务(TCP、HTTP、Web Socket服务等)
6. Node的进程

八、需要会手撕的代码部分

1. Promise(A+规范)、then、all方法
2. Iterator遍历器实现
3. Thunk函数实现(结合Generator实现异步)
4. async实现原理(spawn函数)
5. class的继承
6. 防抖和节流
7. Ajax原生实现
8. 深拷贝的几种方法与比较
9. 继承的几种实现与比较
10. 未知宽高的元素水平垂直居中
11. 三栏布局的实现
12. 两栏布局的实现
13. React高阶组件
14. 数组去重
15. 几种排序算法的实现及其复杂度比较
16. 前序后序遍历二叉树(非递归)
17. 二叉树深度遍历(分析时间复杂度)
18. 跨域的实现(JSONP、CORS)

九、数据可视化

1. Canvas和SVG的区别
2. 在考虑设计可视化图表时,结合Canvas和SVG特性会怎么取舍
3. 常见的可视化组件库
4. 可视化组件库如Echarts的设计思路
5. 一些偏向底层的可视化组件库和前端框架结合方面需要考虑哪些问题
6. 可视化组件如何做到数据驱动?

十、计算机基础

1. 计算机系统
2. 线程与进程
3. 常见的git指令
4. Linux相关指令
5. 其他类型的编程语言(如Java)
6. 数据库

前端面试题汇总

前端面试题是我面试过程中遇到的面试题,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:



由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

春招面试的后期,运气和实力都很重要,自己也是运气比较好,为了回馈粉丝朋友们(毕竟自己也玩了这么久哈哈哈),整理个人感悟和总结以上。最后祝愿大家能够收获理想offer!!

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 3月3日

看完这份阿里巴巴内部流出的《前端面试手册》,二本小渣渣顺利进入阿里实习啦

我在去年春招拿到了阿里的实习offer,经历了三个月的实习之后顺利秋招转正,现在是阿里巴巴新零售数字供应链的一员啦。

现在把阿里的面经补上,希望能给今年投阿里的师弟师妹们一点小小的帮助~

祝看到这篇帖子的同学春招都能拿到满意的offeer

本篇会从下面三个层面去介绍,依次是

  • 面试前准备
  • 面试内容(面经)
  • 阿里实习
  • 面试题资料分享

一 .面试前准备

其实走到现在来了,大部分有意向投前端岗的同学也都有各自的准备了。我这里就简单说下我自己的学习路径。前端的基础知识方面,一方面靠平时的积累,另一方面靠春招前的看面经查漏补缺。平时积累的话,我个人会看一些经典的前端书籍并且进行梳理和总结,我看过的书有

  • 红宝书
  • 《高性能Javascript》
  • 《你不知道的Javascript(上中)》下我一直没看,好像是讲ES6的,惭愧
  • 蝴蝶书
  • 《图解HTTP》
  • ES6入门教程 https://es6.ruanyifeng.com/
  • 《大话数据结构》

平时的积累我是从春招前一年就开始准备了,有计划地看书和进行总结,看掘金,看微信公众号,看InfoQ。

看的东西很杂不要紧,重要的是形成自己的知识体系,这样在看任何技术文章之后,都能清晰地知道这项技术应该在知识图谱里属于哪一块,我是否已经掌握这一块知识,如果没有的话我是否有必要现在就去掌握它。

除此之外,我刷了大概3个月的算法和数据结构的题目并且在Github上写了几个项目来专门总结算法类题目(虽然在面试阿里的时候没有用上)

项目部分其实是我当时的薄弱部分,本科毕业选择的导师一个项目也没有,全部都是研究性的课题(虽然有了项目也不一定和前端相关),自己也没有参加各种比赛什么的,只是在自学的时候,在Github上找了一些技术栈稍微复杂些的来练手。不过我自己在练手工程化的时候写了好几个开源小工具,事实证明这些开源的作品在面试的时候是非常加分的。

面试还有一个很重要的部分,那就是考察候选人的软性素质,比如学习能力和学习能动力。这些东西一般是在交叉面或者hr面时进行考察的,比如阿里的hr可能会问你“你觉得你做过最失败的一件事是什么”,她有可能就是想看你遇到了困难是怎么想的以及怎么面对的。诸如此类的问题也难以准备,因为它由一个人的性格决定,也很难在hr面前造假,所以我能准备的只有尽可能在技术层面表现出我好学,自驱动的特质。

二.面试内容

一面

我当时一面的时候精神状态不是很好,虽然是下午但是特别困,经常答题的时候注意力不集中(现在看来真是一次危险的经历)。但是面试官超级nice,我很多次没有听清楚,他都很耐心地和我重新说(比如他当时问我了不了解async和await,我听了三遍才明白他说的这两个单词是这个,可能是因为发音问题哈哈)

  • 你这个专业和计算机专业关联大吗,我就说我们这个专业在本科会学习一些计算机的课程的,当然同学的就业可能跟计算机关系不大,我自己对前端非常感兴趣所以就一直学习
  • 看了下我的博客,问了里面的一个动画库
  • 问了下实习经历
  • 自我介绍一个比较难的项目
  • 之前做过的项目里有没有用到什么比较难的算法
  • Flex介绍一下
  • CSS选择器
  • 选择器的效率问题
  • jQuery的选择器怎么实现的
  • 说一下常见的伪类和伪元素
  • 移动端适配
  • Vue中的响应式怎么实现
  • Vue中对数组也是这么做的吗
  • Vue模板编译说一下流程
  • 介绍一下vdom
  • Vue和React的vdom算法对比
  • Vue中组件通信的方法
  • 持续集成的问题(因为我的项目里有)
  • VueRouter两种模式的原理
  • 阐述下宏任务和微任务
  • 让我介绍下我对前端安全问题的理解(XSS和CSRF的出现和应对策略)
  • MySQL的基本问题
  • 队列有什么特点和应用场景
  • 问了几种排序算法
  • 提问环节(我问了一下技术栈只会用Vue有关系没,面试官说不要紧,这些都是相通的)
二面
  • 介绍下自己的学习习惯
  • 问了下我的一个WebGL的项目
  • 让我介绍下用Vue写过什么项目
  • 逮住另外一个项目一直深挖...
  • Webpack的loader和plugins原理
  • 三个手撕代码题,分别是考察原型链,一个是考察this,一个是判断两个矩形相交的算法题
  • 让我介绍下前端安全
  • 有没有了解过学校里其他前端相关的社团
  • 自己评价下优点和缺点
交叉面
  • 自我介绍
  • 介绍一下自己认为最难的项目以及我认为的难点
  • 你接触过Vue以外的框架吗,了解程度怎么样
  • 详细介绍下Vue里的响应式机制
  • 讲下Vue里的diff原理
  • 提问环节
hr面
  • 自我介绍(做了哪些事和项目,学习路径和规划)
  • 总结下自己目前的短板
  • 为什么选择前端
  • 自己经历过最失败的一件事
  • 自己觉得最成功的的一件事
  • 一个词总结一下自己
  • 平时有什么业余爱好

三.阿里实习

当时春招也拿了几个offer,最后考虑到阿里的含金量和转正率还是选择了阿里。

这里补充一下,我个人觉得实习还是挺有必要的,一方面在秋招中一份优质的实习经历会非常加分,同时实习可以让你提前体验互联网生活,你可以根据情况来判断自己是否要决定走互联网这条路,我们组去年就有人来了一周就辞职回去读博了(害怕.jpg)

阿里的实习待遇还是挺好的,一天250元+2000的房补,再加上周末你可以选择加班,周末加班的话食堂是全免费的,而且也可以拿到补助(正式员工加班是没有补助的hhh)

来了部门之后的故事用这一篇文章也写不完,简单总结下就是,大家都很nice,但是互联网公司的压力还是摆在那里的,且身边的小伙伴们都很优秀而且努力~

四.最后

为了准备这次面试刷了很多面试题,并且做了一个整理,分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等.....下面分享给大家

HTML

  • 浏览器页面有哪三层构成,分别是什么,作用是什么?
  • HTML5的优点与缺点?
  • Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
  • HTML5有哪些新特性、移除了哪些元素?
  • 你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
  • 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
  • 说说你对HTML5认识?(是什么,为什么)
  • 对WEB标准以及W3C的理解与认识?
  • HTML全局属性(global attribute)有哪些?
  • 说说超链接target属性的取值和作用?
  • iframe有那些缺点?
  • Label的作用是什么,是怎么用的?
  • 如何实现浏览器内多个标签页之间的通信?
  • 谈谈你对canvas的理解?
  • ......

CSS

  • 解释一下CSS的盒子模型?
  • 请你说说CSS选择器的类型有哪些,并举几个例子说明其用法?
  • 请你说说CSS有什么特殊性?(优先级、计算特殊值)
  • 常见浏览器兼容性问题与解决方案?
  • 列出display的值并说明他们的作用?
  • 如何居中div, 如何居中一个浮动元素?
  • 请列举几种清除浮动的方法(至少两种)?
  • block,inline和inlinke-block细节对比?
  • 什么叫优雅降级和渐进增强?
  • 说说浮动元素会引起的问题和你的解决办法
  • 你有哪些性能优化的方法?
  • 为什么要初始化CSS样式?
  • CSS样式表根据所在网页的位置,可分为哪几种样式表?
  • 请你说说em与rem的区别?
  • ......

JavaScript

  • js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?
  • js拖拽功能的实现
  • 异步加载js的方法
  • js的防抖与节流
  • 说一下闭包
  • 说说你对作用域链的理解
  • JavaScript原型,原型链 ? 有什么特点?
  • 请解释什么是事件委托/事件代理
  • Javascript如何实现继承?
  • 函数执行改变this
  • babel编译原理
  • 函数柯里化
  • 说一下类的创建和继承
  • 说说前端中的事件流
  • 如何让事件先冒泡后捕获
  • 说一下图片的懒加载和预加载
  • js的new操作符做了哪些事情
  • 改变函数内部this指针的指向函数(bind,apply,call的区别)
  • Ajax解决浏览器缓存问题
  • ......

Vue

  • Vue中 key 值的作用
  • Vue 组件中 data 为什么必须是函数?
  • vuex的State特性是?
  • 介绍一下Vue的响应式系统
  • computed与watch的区别
  • 介绍一下Vue的生命周期
  • 为什么组件的data必须是一个函数
  • 组件之间是怎么通信的
  • Vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
  • Vue如何实现按需加载配合webpack设置
  • 简单描述每个周期具体适合哪些场景
  • scss是什么?在Vue.cli中的安装使用步骤是?有哪几大特性?
  • 聊聊你对Vue.js的template编译的理解?
  • Vue 路由跳转的几种方式
  • Vue如何实现按需加载配合webpack设置?
  • Vue的路由实现:hash模式和history模式
  • Vue与Angular以及React的区别?
  • Vue路由的钩子函数
  • 什么是Vue的计算属性?
  • ......

React

  • 介绍一下react
  • React单项数据流
  • react生命周期函数和react组件的生命周期
  • react和Vue的原理,区别,亮点,作用
  • reactJs的组件交流
  • 有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
  • 项目里用到了react,为什么要选择react,react有哪些好处
  • 怎么获取真正的dom
  • 选择react的原因
  • react的生命周期函数
  • setState之后的流程
  • react高阶组件知道吗?
  • React的jsx,函数式编程
  • react的组件是通过什么去判断是否刷新的
  • 如何配置React-Router
  • 路由的动态加载模块
  • Redux中间件是什么东西,接受几个参数
  • redux请求中间件如何处理并发

浏览器

  • 跨标签页通讯
  • 浏览器架构
  • 浏览器下事件循环(Event Loop)
  • 从输入 url 到展示的过程
  • 重绘与回流
  • 存储
  • Web Worker
  • V8垃圾回收机制
  • 内存泄露
  • reflow(回流)和repaint(重绘)优化
  • 如何减少重绘和回流?
  • 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
  • localStorage 与 sessionStorage 与cookie的区别总结
  • http多路复用
  • cookie可设置哪些属性?
  • 正向代理和反向代理
  • ......

服务端与网络

  • HTTPS和HTTP的区别
  • HTTP版本
  • 从输入URL到页面呈现发生了什么?
  • HTTP缓存
  • 缓存位置
  • 强缓存
  • 协商缓存
  • 缓存的资源在那里
  • 用户行为对浏览器缓存的影响
  • 缓存的优点
  • 不同刷新的请求执行过程
  • 为什么会有跨域问题
  • 如何解决跨域
  • 访问控制场景(简单请求与非简单请求)
  • withCredentials 属性
  • 服务器如何设置CORS
  • URL类中的常用方法

算法与数据结构

  • 二叉树层序遍历
  • B树的特性,B树和B+树的区别
  • 尾递归
  • 如何写一个大数阶乘?递归的方法会出现什么问题?
  • 把多维数组变成一维数组的方法
  • 说一下冒泡快排的原理
  • Heap排序方法的原理?复杂度?
  • 几种常见的排序算法,手写
  • 数组的去重,尽可能写出多个方法
  • 如果有一个大的数组,都是整型,怎么找出最大的前10个数

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 3月2日

2021阿里、字节、快手前端面经 & 个人成长经验分享

背景

本人背景渣渣,较晚入行,在一家公司稳定了三年,从一个前端白纸到如今乱涂乱画,已成雏形。2020 年年末,我离职了,因为深刻意识到自己有多 "菜",想专心花点时间提升自己。经过一点时间的调整,我重装上阵。由于节前时间有限,只投了几家,当然都是找人内推的。

阿里四轮技术+一轮 hr

一面 (60min)

  • 自我介绍主要围绕几个点:个人信息、最近的公司职责和涉及的业务、主要技术栈、我擅长的技术、项目介绍(STAR:项目背景、任务、你的工作内容、项目亮点、结果你实现了什么学到了什么)、最近在做什么、结语。
  • 简历里写了两个技术栈,所以讲讲 vue 和 react 的区别和联系吧主要围绕几个点:两者的模板渲染、两者的虚拟 dom、diff 差异(vue2、vue3、react 16)、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理;vue 关于 Proxy 与 Object.defineProperty 的区别;两者的批量更新,还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容:新发布的 vue3 有什么特性、最后总结,谈谈两者的如今的生态……
  • 项目的性能优化主要围绕几个点:项目技术栈的性能优化,比如使用 react 可以讲避免重复渲染的一些手段,比如 electron 可以将如何更接近原生;针对浏览器做的优化(你需要了解浏览器相关原理,比如缓存/存储、代理、SSR 等,针对渲染引擎的工作内容想到的优化,比如解析 css 解析会影响 dom 渲染、合成优化减少回流重绘、web worker、Event Loop 等);打包工具提供的优化,特指 webpack;针对具体的页面做的优化,比如首页该做什么,首页最新指标;最后讲讲应用场景、我的项目里用到了哪些方法,针对中等项目、大型项目的性能选择。PS:性能优化的内容如果认真讲,肯定两/三个小时下不来,因为性能优化没有终点,我面试时也只想到了上面的这些……
  • 了解我们的产品吗?我提前 google 了团队的业务项目,之前也看过一些类似产品的文章,我结合自己的项目经验,说了一点理解,就几句话。
  • 你想问什么?我问了本次的表现,了解了一些团队项目的工作内容、项目招人的背景、对于后续面试该做什么准备。一面没碰到手写题,都是很基础的问题,整体相对轻松。

二面 (60min)

晚上 9 点半的面试,面试官应该刚忙完,上来直接问业务,全程业务……权限页面的细节:

  • 各个模块、按钮怎么设计权限;
  • 分角色、分地域怎么设计?
  • 要加个表头,还要控制展示的顺序,在各个浏览器表现一致,怎么设计?说出所有方案,想到什么自由发挥了……
  • 聊到本地存储,问:localStorage 在各浏览器、移动端浏览器的 size 一致吗?

其他:

  • 这一段是我简历的项目,略过……
  • 继续聊阿里的产品,简单使用后,请提出几个可以优化的地方?
  • 啥也没透露,让你预测下这款产品的接下来的方向,如果是你,你会着手哪个方向,并且凭啥让你来干,说下你擅长的……
  • 正式讨论产品,大家都在做什么,团队协作的情况,公布接下来的迭代方向,针对的人群,目标……
  • 照例闲聊,拜拜。

插曲:中间出现两次突然挂机,当时我的感觉就像过山车,从高空滑向低谷,整个心都是 ——某可爱漂亮的
央视记者—— 的。

三面 (60min)

这一面是笔试,哈哈,我复习了很多手写题,结果是完全与三面的考题完美岔开,没有交集,emmm……,好在并不难……题一:

/**
 * 1.计算多个区间的交集
 *   区间用长度为2的数字数组表示,如[2, 5]表示区间2到5(包括2和5);
 *   区间不限定方向,如[5, 2]等同于[2, 5];
 *   实现`getIntersection 函数`
 *   可接收多个区间,并返回所有区间的交集(用区间表示),如空集用null表示
 * 示例:
 *   getIntersection([5, 2], [4, 9], [3, 6]); // [4, 5]
 *   getIntersection([1, 7], [8, 9]); // null
 */

题二:

/**
 * 2.DOM 的体积过大会影响页面性能,假如你想在用户关闭页面时统计(计算并反馈给服务器)
 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数,请用 JS 配合
 原生 DOM API 实现该需求(不用考虑陈旧浏览器以及在现代浏览器中的兼容性,可以使用任意
 浏览器的最新特性;不用考虑 shadow DOM)。比如在如下页面中运行后:
 */
<html>
  <head></head>
  <body>
    <div>
      <span>f</span>
      <span>o</span>
      <span>o</span>
    </div>
  </body>
</html>
// 会输出:

{
  totalElementsCount: 7,
  maxDOMTreeDepth: 4,
  maxChildrenCount: 3
}

题三:

// 3.请使用原生代码实现一个Events模块,可以实现自定义事件的订阅、触发、移除功能
/*
const fn1 = (... args)=>console.log('I want sleep1', ... args)
const fn2 = (... args)=>console.log('I want sleep2', ... args)
const event = new Events();
event.on('sleep', fn1, 1, 2, 3);
event.on('sleep', fn2, 1, 2, 3);
event.fire('sleep', 4, 5, 6);
// I want sleep1 1 2 3 4 5 6
// I want sleep2 1 2 3 4 5 6
event.off('sleep', fn1);
event.once('sleep', ()=>console.log('I want sleep));
event.fire('sleep');
*/

业务四面 (35 min)

周末,人在梦游,刚下航母,就激灵灵接到电话,人还是糊的……

  • 跨端的原理?我讲了几个例子:taro、uni-app,顺便提了 flutter、react native、小程序等的架构,具体怎么设计的。
  • 动态表单能够运用在什么场景?我举了 7、8 个例子。
  • 移动端适配相关的问题,应用场景。
  • 我公司的业务讨论,是否了解过竞品等等,这里略过。

hr 五面 (60 min)

  • 对于你项目的竞品有了解吗?说一下
  • 你的项目与竞品相比,好在哪里,有什么优势?
  • 下班后都在做什么,问的都是过往经历,问的太详细了,让人不舒服。
  • 如果与同事发生了意见的不一致,你会如何解决呢
  • 现在针对我们的业务,急需增加一个新的模块位置,你会怎么设计?数据怎么展示……
  • 没错,hr 还问技术相关的问题。

整体感受

总体面下来没有让人紧张的感觉,中规中矩,从刚开始较高的心理预期到后面慢慢回落……由于我的水平有限,最终没有争取到多高的薪水。

快手二面挂

一面(60min)

  • 自我介绍
  • react 与 vue 的技术栈对比,说下区别
  • B 端遇到的最复杂的数据结构是什么
  • 快速实现 [1, 2, ...100],所有你能想到的解
  • 数据展示的优化、数据截取和处理
  • 实际场景中,哪些地方应用到了堆、链表、多叉树结构
  • es6 及 es6+ 的能力集,你最常用的,这其中最有用的,都解决了什么问题。
  • GC 相关问题:es6+ ,eventloop 中涉及 GC 的部分。
  • 数组 flat 展开的各种解法,数组 map 应用
  • 讲下 V8 sort 的大概思路
  • Promise 并发限制
  • 手写 Promise.all
  • 省市区拼接查字段,要求 O(n) 内解出
  • 中台的理解
  • 讨论了下业务
  • 个人发展方向

一面的问题循序渐进,前面为后面铺垫。

二面(60min)

  • 项目的复盘优化
  • 说下业务上最复杂的点
  • node 限流算法
  • 最有效的性能优化方法
  • 你提到性能指标,能说说都是怎么计算的吗?比如 LCP,FID
  • 算法题:数组全排列[1]
  • 中台业务讨论
  • 离职原因

大早上面试,状态不佳,全排列算是基础了,脑子里有解题思路,但死活没写对,面完后狠狠又手写了几遍。

猎豹移动三轮技术面+一轮 hr 面

技术一面 (60min)

  • input type 都有哪些类型,还记得其他 attrs 呢
  • css 的伪类和伪元素有哪些?有什么区别?
  • 在一个未知宽度的父元素内如何创建一个等边正方形
  • 异步加载 js 会阻塞什么
  • 数组所有方法都有哪些?findIndex 的参数说明
  • vue 和 react 的异同
  • 如何优化 vue 框架,注意是优化框架
  • vue 和 react 的 jsx 使用
  • id key 真的能使列表比对更高效吗?举个反例?
  • webpack 优化的手段
  • tree-shaking 怎么配置,如何 避免 tree-shaking?
  • electron 和小程序遇到什么坑?
  • 说下微信自动化测试
  • es2015 到 es2020 的新特性,你最常用什么,给你收益最大的。
  • weakMap 和 Map 的区别,weakMap 原理,为什么能被 GC?
  • 如何干扰 GC ?
  • webpack import 动态加载原理
  • 知道 webpack 中的 devTool 吗?
  • 如何进行错误定位和数据上报,线上异常的处理
  • 为什么有时候配置了 webpack caching,chunk 还是更新了?
  • 讲讲浏览器和 node 的 eventloop
  • 微任务后面还有哪些?requestAnimationFrame 是怎么调用的?requestAnimationFrame 帧内总是有任务吗?分情况说下。
  • 帧数怎么计算?
  • 了解网络安全吗?
  • 如何避免数据被 iframe 截获
  • 说下状态码
  • 说下 304,什么情况会 304?协商缓存的头部字段?
  • 你学习的渠道
  • 工程化实践的看法

第一个问题没进入状态,我心里想怎么问这么简单的问题,我宕机了一会……后面就顺利了,面试官全程冷淡,也不闲聊。无趣,后来问了下,是猎豹的前端架构师,嗯,大佬就该有大佬的气场,面试体验棒棒的~~

业务二面 (60min)

大致内容:业务交流,工程化实践交流、猎豹前端在做什么,资源有哪些,他们的业务是偏 C 端的,未来的方向、发展等等……这一面很轻松,想到什么说什么,当然逻辑性肯定要有的。

业务三面 (70min)

这一面的面试官是猎豹移动的技术负责人。

  • 项目是如何收集问题的,用户量如何?
  • 性能问题如何排查,你们项目的指标,具体数据、截图发给我看看……
  • 模块化是怎么实施的?
  • 目录结构讲下
  • 一些功能是自研还是使用第三方工具,叫什么名字,怎么使用 ?
  • 疯狂问测试相关的内容,单元测试和组件测试是怎么做的、代码覆盖率多少,如何权衡测试原则,系统测试* 相关的内容,一些细节上的问题怎么处理,等等,要说出个 1、2、3 来 ?
  • 项目亮点/难点,怎么解决 ?
  • 复盘,整个项目总结,让你重新设计这套系统你会怎么做 ?
  • 工程化实践和深入的一个点
  • 团队氛围,有什么好的点可以说下,有什么不好的点也说下……
  • 中台具体集成了什么功能 ?你都做了什么 ?
  • 你是如何进行技术突破的,又是如何学习的 ?
  • 对未来的规划
  • 有什么问题想问?

我随便问了几个问题过渡,然后抛出最重要的一个,厚着脸皮让大佬指出我的问题(PS:这是我面试的目的之一,当时几个面试进度属猎豹最快了。别人眼中的我,在前端方面具体是怎样的感官 ?我一直很好奇。不是每个人都有一个对自己清晰的认识的,既然自己想不出来,那就通过面试吧)。

这次面试暴露的点:项目的总结、全局的把控、自我复盘都是有所欠缺的。另外不要给自己挖坑,有时候知道一些概念但不知道具体的实操和原理,还是别说了。当时,关于测试方面的问题,考官一直假装不懂,老是问:真的吗?这个我没做过,你给我讲讲吧?我原本没错的内容也被误导了,emmmm……

hr 四面(30min)

  • 常规问题,没有阿里那么严格。
  • 讲讲前任公司
  • 离职原因
  • 加班的看法
  • 猎豹的福利
  • 有没有其他 offer
  • balabala……

字节跳动三面挂

技术一面(60min)

  • 刚开始就问我的项目,问的很详细。
  • webpack 提高构建速度的方式
  • loader 输入什么产出什么 ?
  • webpack 原理
  • webpack 动态加载的原理
  • webpack 热更新
  • 如何写一个 webpack plugin
  • AST 的应用
  • 如何解析一个 html 文本,还是考 AST
  • babel 原理,怎么写 babel 插件
  • 如何设计一个沙盒 sandbox ?
  • 小程序的 API 做了什么处理,能够做到全局变量的隐藏,如果是你,怎么设计 ?
  • 基础题考闭包的,我讲对了思路,结果没做对。
  • 实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路。
  • 提供一个数字 n,生成一组 0~n-1 的整数,打乱顺序组成数组,打乱几次,如何能够看起来平衡,说出你能想到的所有方法。
  • leetcode 239[2]
  • 随便问环节,我问了考闭包的那道题,我没有做对。

这一面我准备了很多东西,结果又完美 miss。

二面技术 leader(60min)

  • 业务,业务,还是业务,项目复盘有没有更好的解决方案。
  • 如何处理一个重大事故 bug
  • 监控体系
  • 虚拟 dom 有什么好的地方?框架为什么要设计虚拟 dom?
  • webpack 的缺点,让你设计一个新的构建打包工具,你会怎么设计?
  • 在线文档编辑,如何处理两人的冲突,如何展示,考虑各种场景
  • excel 文档冲突高级处理,文章冲突呢?是上个问题的深化。
  • 基础题,直接写出答案:
let x = [1, 2, 3];
let y = x;
let z = [4, 5, 6];
y[0] = 10;
y = z;
z[1] = 20;
x[2] = z = 30;
console.log(x, y, z);
  • 基础题:leetcode 300[3]
  • 随便问环节

三面业务 leader(60min)

  • 算法题:从数组 [1, 5, 8, 10, 12] 中找到两个数和为 9,返回 [1, 8] 这样的结果。
  • 算法题:从数组 [1, 5, 8, 10, 12] 中找到三个数和为 19,返回 [1, 8, 10] 这样的结果。
  • 算法题 leetcode 300[4]:给定一个无序的整数数组,找到其中最长上升子序列的长度。
  • 针对我的项目提问,大概 40 分钟吧,脑子乱。
  • 没有随便问环节,我差不多有预感了。

是的,我的字节面止步于此了,这一面算法没有难倒我,基本上看到题目我就能想出解法。三面挂的原因是我简历上的项目太简单了,你想要真实,我给你真实,可惜你看不上这些真实(这次面试我的简历没有准备好是一大原因,各位,我就是你们的前车之鉴啊!)………

个人经验分享

这个应该是各个面经的保留节目了,我也在此留下笔记。主要分两个方面来讲,一个是前端技术的学习,另一个是面试当中需要注意的点。

准备阶段

  • 看源码,整理 Vue 与 React 框架的所有横向对比,包括渲染原理、虚拟 dom、diff、patch、fiber、批量更新,手写响应式,框架用到的模式、设计思想,性能优化,相关生态技术等等。
  • webpack 原理、热更新原理、动态加载原理、常见 plugins、loader、常见优化,怎么打包、怎么分 chunk,怎么写一个 plugins,生命周期,微内核源码等内容,以及 rollup、gulp 的使用、应用场景。(我记得有一面一个考官对我说,你对整个研发流程都很清楚,但都并不深入,比如一个 webpack 打包分包的依据怎么判定……emmmm,我倒是会,你也不问我啊!)
  • 跨端框架的研究,工程化的梳理,使用的技术栈的坑,移动端的一些实践,面试时额外准备的项目复盘,竞品调查,对方产品的资料,测试系列,还有很多如微前端、中台、serverless、可视化、Wasm 等就不举例了。
  • 除此之外,我也看了很多面经、以及技术文章。

我把看过的面试题做了一个汇总整理,居然有280页PDF,无偿分享给大家,算是一个感恩回馈吧,有需要的朋友【点击我】无偿获取。

点击此处蓝色字体280页《前端校招面试真题解析大全》查看详细内容。

掌握了以上内容,我们应该算是有一点知识广度了也能从容地应对前面的技术面了,当然,这不是短短几个月就能达成了,要时间的积累,那些一年就资深的牛人也是在大学甚至更早的时候就开始积累的,这一关逃不掉。

到此,“技术面” 这只老虎应该能打个半死,直接干倒是不可能的,以上的知识对于校招可能足够,但社招不一定用的上,哈哈。

然后就是社招的重点:业务面,怎么说呢,就是多思考多总结吧,深入思考,对每个问题一定要有深入的思考,不然就很难进入大公司了,深度上要有一个拔高才能在面试中获得好的成绩。

挑出你项目中的亮点,要被别人认可的亮点,这个比较难,各位只能自求多福了,也是我本人的短板,当时也是鸡蛋里挑骨头,这是我这次找工作遇到的最大拦路虎,业务太简单,你眼中的亮点面试官觉得不是……

面试阶段

很多面经都说回答问题时,思考一下再回答,为了组织语言,但有时候,你明明懂,在紧张的情况下反而会将关键信息跳过,答的让人不知所云。要做到:“想清楚,说明白,知道说什么,怎么说”,还是有一点难度的,关系到平常一点一滴的积累,这方面我上面已经提供了一点方向。剩下的就是面试阶段好好发挥了,没什么太好的办法,我这里建议:

  • 回答问题前思考一下,虽然不保证有用,但还是要好好履行的。
  • 多面几次,指的不同公司,只要你不嫌累。
  • 在面试某一家公司时,根据前面的面试,尝试推测后续考官会问到的业务的大致范围,或者问内推同学,提前做准备。一般会问:1 你简历上的项目,2 对方部门知名的产品,3 招聘 jd 上的 title。
  • 简单的复盘,保证别倒在同样的问题上。
  • 增加知识的广度,可以引导向别的问题,考官也是乐意听的。
  • 挑个面试的好时间,比如我本人,早上 10 点我的脑子无比灵光,说话都带着沉稳富有磁性……晚上 7 点后,就会莫名紧张,声音分贝提高几个点略微沙哑,这个真的因人而异。有时候沉稳不一定是好事,紧张反* 倒促使你偶有妙语和想法,当然也可能搞砸。
  • 找几个方法迅速调整好你的精气神,在前面基础学习的时候也可以用上。
  • 如果你够厉害,可以适当暗示和引导面试官问些你擅长的,千万不要被牵着鼻子走。

最后,拜佛烧香,求个好运。人和人的差异,在于认知和思考力的差异。假如你一时之间思维没有一个质的变化,不如求个好运。没有一个好的运气,上面的建议可能通通都不好使,毕竟社招面试内容本身就是不稳定的,有的重技术、有的重算法、有的重业务、有的重学历、有的重眼缘……

如何坚持学习?

这一块算是补的,我依然只给建议:

  • 如果你玩游戏的话,请放弃游戏,或者戒掉一段时间,直到找到满意工作。
  • 找到你的痛点。
  • 分段学习,制定符合周期的计划。不要逼着自己,否则压力会让你崩溃的。
  • 找点鸡汤,或者去找点你没有但渴望得到的东西。
  • 业务方面,多看点书,多总结积累一些思考方式。

最后灵魂一问:

  • 你的梦想是进大厂吗?你明白的,这需要一点小小的代价。
  • 你是万中无一的奇才?如果不是,那么失败几次是正常的,大家都是普通人,也许只是不 match。

最后

文章到这就结束了,我的水平有限,我也不知道这篇面经能够拯救几个娃,相信很多人跟我一样都会有一个进大厂的梦吧。春招将至,希望大家都能在春招当中拿到自己满意的 offer。最后,能看到这里的小伙伴顺手点个赞吧。

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 3月1日

前端开发两年,你有没有觉得很吃力?

前言

前端工作两年多。大部分前端原理、框架都能完全运用。工作中几乎遇不到解决不了的问题(除了那些恶心无法实现的需求)现在经常被安排去面试新人(被安排去面试,主要是工作能力比较突出的原因,公司还有很多3年以上的员工)。下面说说我的学习方法或许对你有用!

一、打好基础不用说

HTML、CSS、JavaScript 三大件,完全掌握。不懂得就直接查 MDN。HTML重点掌握语义化。区分块级和内联标签。其他查文档就好了。还有就是定义 head 里面一些meta 了解下。

CSS。重点看盒子模型,定位,层级,过渡,动画和 transform。知道原理和规则。大部分工作都是照着设计稿化。掌握上面几个99%还原也不难。接下来重点学习几种常见的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。

JavaScript。重点来了,红宝书看一遍掌握基础,进阶去看《你不知道的 JavaScript》。就这两套足够了,别搞那么多。每个知识点搞懂。ES6基本没啥问题。下面几个问题优搞懂,优先级如下:

  • this 用法,相关原理
  • 原型/原型链
  • 闭包
  • 面向对象相关
  • 同步异步/回调/promise/async、await
  • 模块化 CommonJS, AMD
  • 先搞这懂这些比较难的概念,对你JS理解更加深入。接下来在开始看框架方面

二、框架方面

前期要会用,后期要懂原理。

新人先搞 Vue。Vue 算是比较简单的框架了,上手容易。照着官方文档来问题不大。原理方面要提高自己认识。学习怎么看源码。github常去逛逛。

学习框架之前,我其实特别建议,新人先去了解 Babel 和 webpack 不仅仅是使用。一些原理方面的东西工作中也会用到。babel 里面会有教你如何编译代码。webpack教你如和打包文件。自己手写编译器和打包工具也不是特别难。反正对之后看vue、react源码帮助挺大。

搞完 Vue 全家桶,去了解下 React,React hooks 学习下新的理念。再回过头来看Vue。你会发现他们是如此的相似去又不同。

多去实践总结,对整体框架理解会越来越深刻。

今天先马到这里。想写的太多,马上就要上班下次有空再来码...

三、如何看源码

新人刚开始看源码,会陷入两个困境中。一是无从下手。二是看了之后感觉没啥收获。

这个也很正常。一般我们熟知的框架都有个几千甚至上万个PR。太大细节会干扰你。掌握整个节奏和流程。学习原理也比较吃力。就连找个入口都像大海捞针一样。建议从下面几个方面入手:

  • 挑简单的上手。别一开始就搞 vue、react、webpack。太难,会直接劝退新人。不要为了面试而去读。反而效果不好,面试稍微问深入一点就答不出来了。平时有兴趣多琢磨琢磨。按照难易程度,函数库 < 组件库 < 框架 < 工程化 分别典型代表 lodash < vant < vue < webpack
  • 手撸简易模型。像vue, webpack, babel 都有简易项目给你撸。有的创始人(尤哥)还直播手撸。国外的更多,youtube 一搜一大堆。就算不看源码,照着写出了简易 demo 对原理和理解提升都是很大的。
  • 调试开源项目。先把项目拉下来。在vscode里面跑下,核心函数多打几个断点。看看里面变量是怎么diff的。对理解更深刻了。

看了源码是别人的,学到了是自己的。学习时候边记笔记,边思考原理,总结经验。下面来谈谈前端工程化怎么弄。

四、前端工程化

现在最流行的打包工具 webpack 用起来。当然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相关还是得掌握。

首先重点搞下babel、webpack。学习下编译,打包的原理。自己配置下 webpack。尝试自己去写下下 webpack 的 loader 和 plugin。学习这些之前要懂一点 node.js, node.js 不需要全部学习。一般就日常用到读写文件fs接口,path 路径接口。这些 api 都不难写几个 demo 就懂了。基本上webpack 里面配置文件也没用到多少 node 的东西。最后自己学会配置webpack的配置文件。

如果想深想去优化打包体积和速度,就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。

当然前端工程化不仅仅是这些,CI/CD可持续集成, Umi 了解下。shell各种脚本自动化命令、代码生成技术了解下。

五、性能优化的方案

一般来说。性能优化没什么系统化的文档供人学习。完全靠一些经验和自己的实践。

我们常提到性能好坏是由什么来衡量呢?

访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长

非首次情况下,命中缓存的加载缓存数据 --> 渲染出完整页面的时长。

一般我从下面几个方面着手去做,一般问题都不大。

减小资源(静态资源,后端加载的数据)大小

  • 压缩代码HTML/CSS/JS
  • 压缩图片、音视频大小
  • Tree-Sharking 消除无用代码
  • 以上webpack都可以搞定

避免同一时间的过多次数请求

  • CSS 实现雪碧图:使用background-position共享一张图
  • 图片懒加载:监听滚动后offsetTop, 使用src 替换 src(真实路径)
  • 列表懒加载(分批加载):监听滚动后offsetTop, 发送请求加载下一页的数据
  • 路由懒加载
  • 代码分包分块加载(webpack)
  • 预加载技术
  • 小程序分包、预下载等。

利用缓存(空间换时间)

  • CDN 内容分发:获取更近网络节点缓存下来的静态资源
  • 浏览器缓存(自带)
  • 部分资源保存在LocalStorage或者APP缓存中(手动操作)

其他

  • SSR 服务端渲染:解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题。

这些都可以去实践的,难度不大。难度大的地方可能是 dom 节点成千上万的时候渲染的性能问题。这个场景遇到的很少,方案很多。不同人有不同解决方案,有功夫可以自己去尝试尝试。

上面提到很多点都可以深入到很深。由于篇幅原因,点到即止。

纯粹是把一些我以前走过的弯路掰直了再分享给大家。毕竟不是《前端入门到精通》哈哈哈

六、学习移动端web开发

前端现在为什么这么火?各个公司都还挺缺优秀的前端。原因在于技术红利。

移动端web流行起来之后,特别是H5和小程序,带动了多少前端就业,前端迅速取代了安卓和iOS 的大量岗位。

回到正题:所以作为前端人,移动web一般是都要接触的。不同于PC 端。

移动端有哪些东西呢?不需要全部懂,差不多知道就行了。要用的时候再去学。

  • 绝对单位换相对单位:px => rem / vw / rpx
  • 弹性布局:使用flex、grid布局
  • hairline (1px的粗线处理):使用伪元素 + transform: scale(倍数) 缩放线框
  • WebView 环境了解下
  • 安卓iOS 兼容踩坑:点击延迟、穿透、滚动不流畅、安全区域等等。
  • 小程序开发相关踩坑
  • JSBridge: H5 与App 通信
  • H5动画制作
  • 跨平台框架:react native、weex、flutter 等等
  • 简单的说移动web 就是:html/css/js 跑在手机app 里面的WebView(web运行环境)。

小程序/公众号就是在这个基础上,将自己APP里面的WebView 租售给其他人使用。

微信APP ----- 提供SDK ----> 微信webview ----- 提供运行环境-----> 公众号h5 / 小程序

为什么微信可以容纳几乎无限的H5/小程序页面呢?

因为公众号/小程序的代码都存储在云端,通过不同的路由就可以给几乎无数的开发者使用。

使得微信成为一个运行环境+入口的存在。

七、做前端我有没有觉得吃力?

刚做时前端不吃力。因为我是软件工程专业,学前端之前,学过 C/C++、Java、PHP、.net 成绩还不错基本都是90多分。感觉自己干后端也不吃力。实验室里面的项目都是前后都写。最爱 PHP,当时最崇拜鸟哥。本以为以后就走上PHP后端工程师的道路了,成为鸟哥那样的大神。

由于项目需要的原因,后来渐渐开始学起学 HTML、CSS、JavaScript 这些语法相关的东西。刚接触时没有感觉太大难度。

当时就想着怎么把页面搞好看,搞各种动画炫技。写一个小球从下面弹出来的效果,换各种姿势弹出。当时觉得前端真的有意思,就入了前端的坑。入坑前,以为前端就是搞各种漂亮的页面,各种特性惊艳别人。

随着接触的越来越深。接触到了 AJAX, jQuery ,Bootstrap,前端开始注重体验。各种框架横空出世 backbone => Angular => React => Vue 眼花缭乱。

折腾了 JQuery 开始折腾 backbone 觉得前端还能这样玩。有些迷茫了,感觉脑袋快要炸了,那段时间特别焦虑,疯狂看书写代码,怎么这么多东西要学啊。

JavaScript 也不精通,到原型就不理解了,虽然有C++,JAVA面向对象的知识,但JavaScript 你怎么和别人玩的不是一个套路啊。当时就都用ES6了, 行,学。都用Sass了,行,学。不学也可以,看不懂别人的代码呀。

毕业前为准备校招前端工程师,真的很吃力。就怕校招面试时,自己啥都不懂。

功夫不负有心人,校招时候顺利拿到了自己满意的Offer。记得当时和面试官对答入流,好像找到知音一样。面试官也是过来人,基本能问的都问了。

拿到Offer之后就去了实习。实习第一个任务:将一个ES6的后台管理系统重构成 Vue2.0 全家桶的项目。有个导师带,但是她和我是不同项目,出了架构以外代码都是自己写。

这个阶段还是收获了很多:

  • git 命令特别熟练。commit、stash、merge/rebase、cherry-pick、push/pull/fetch、reset等等基本都敲都特别多了
  • 严格了代码规范。Eslint、prettier 都用起来了
  • 会自己写业务组件,会封装高级组件、写常规页面了。基本上大部分不是特别复杂的交互都ok。难一点多找下资料可以做出来。
  • 学会管理API了。自己尝试封装了 axios。统一处理错误和弹窗。
  • 会抽取公共css、JavaScript 函数,编写CSS 变量和JavaScript 常量了
  • webpack 能看懂配置文件了。

实习过后顺利转正。转正之后,换了另外一个导师带,加入到项目组作为一个比较大的项目的核心开发。基本不再做管理系统了。主要做一个saas 平台。涉及比较难的富文本编辑,UI 拖拽生产文章,数据可视化生产报表等等。还写了几个谷歌浏览器插件。

  • 开始提升写页面效率,写的比较快了。
  • 研究 webpack 的插件打包编译效率
  • 研究 babel 编译原理
  • 研究了 Vue 编译的一些原理
  • 研究了 一些图表的使用,多半使用的echart。常规图表基本都用过。
  • CI & CD 自己去搭建。学了一些 shell 脚本开发。研究了 docker 相关的东西。
  • 尝试去写基础组件,搭建基础组件库。
  • 学习 React 相关的语法。
  • 研究富文本编辑,图片压缩裁剪原理等等
  • 写一个简单的微信公众号,接触到了 H5 开发。

工作第一年,基本上主战场在PC 端。前半年挺吃力,后半年熟练后游刃有余。会怼产品,会喷设计,会和后端兄弟配合默契。和团队感情也很深了。

无奈项目由于某些原因终止,团队解散,调到新团队。在老东家工作一年多后,由于个人原因离开去了一家新的的公司,主战场从PC 到了手机。开始接触移动H5、hybrid 开发。

八、学习吃力的原因肯定是学习方法不太正确

总结下一般怎么才能真正学到东西

  • 详略得当:前端知识太多,抓重点学,不要像背字典一样。
  • 不要急着写代码,先理清流程(以一个函数为单位,可以先写注释)再写代码。
  • 看视频看讲解是会误以为自己会了,其实并没有。
  • 学会总结:一句话可以讲清楚的事情,不要多说一句。减少心智负担。
  • 不介意复制代码,但是要知道这个代码里面大致实现原理。感兴趣自己重写一个。
  • 较大的项目,不要急着看代码。可以先把项目跑起来。通过改代码里面的参数来理解里面的核心流程。
  • demo 式编程。对于新框架,参考demo来上手更快更容易理解。
  • 渐进式编程。对于比较复杂的功能/需求。不要想着一气呵成。先实现一个核心,每次往上面加细节,有点像绘画。
  • 断点单步调试很有用,定位bug会更快。当然有些不易调试的应用选择打log。一次打 log 要多打点,免得打完log,有得再加。
  • 黑盒太多的项目,实在找不到bug原因。发给同事帮忙看。可能很快就能看出来。当局者迷,旁观者清。(很多时候是拼写的问题)

九、最后

我总结一下前端面试的知识点,希望能对即将面试和未来面试的小老弟们,有所帮助!skr~~skr(面试题完整文档划到文末直接免费领取。)

HTML

  • HTML5新特性,语义化
  • 浏览器的标准模式和怪异模式
  • xhtml和html的区别
  • 使用data-的好处
  • meta标签
  • canvas
  • HTML废弃的标签
  • IE6 bug,和一些定位写法
  • css js放置位置和原因
  • 什么是渐进式渲染
  • html模板语言
  • meta viewport原理

CSS

  • 盒模型,box-sizing
  • CSS3新特性,伪类,伪元素,锚伪类
  • CSS实现隐藏页面的方式
  • 如何实现水平居中和垂直居中。
  • 说说position,display
  • 请解释*{box-sizing:border-box;}的作用,并说明使用它的好处
  • 浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值
  • link和@import引入css的区别
  • 解释一下css3的flexbox,以及适用场景
  • inline和inline-block的区别
  • 哪些是块级元素那些是行级元素,各有什么特点
  • grid布局
  • table布局的作用
  • 实现两栏布局有哪些方法?
  • css dpi
  • 你知道attribute和property的区别么
  • css布局问题?css实现三列布局怎么做?如果中间是自适应又怎么做?
  • 流式布局如何实现,响应式布局如何实现
  • 移动端布局方案
  • 实现三栏布局(圣杯布局,双飞翼布局,flex布局)
  • 清除浮动的原理
  • overflow:hidden有什么缺点?
  • padding百分比是相对于父级宽度还是自身的宽度
  • css3动画,transition和animation的区别,animation的属性,加速度,重力的模拟实现
  • CSS 3 如何实现旋转图片(transform: rotate)
  • sass less
  • 对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、JavaScript 正则表达式判断平台。)
  • 什么是bfc,如何创建bfc?解决什么问题?
  • CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
  • CSS 选择器的优先级是怎样的?
  • 雪碧图
  • svg
  • 媒体查询的原理是什么?
  • CSS 的加载是异步的吗?表现在什么地方?
  • 常遇到的浏览器兼容性问题有哪些?常用的hack的技巧
  • 外边距合并
  • 解释一下“::before”和“:after”中的双冒号和单冒号的区别

JS

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • JS常见的dom操作api
  • 解释一下事件冒泡和事件捕获
  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • call,apply,bind
  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • 创建对象的多种方式
  • 实现继承的多种方式和优缺点
  • new 一个对象具体做了什么
  • 手写Ajax,XMLHttpRequest
  • 变量提升
  • 举例说明一个匿名函数的典型用例
  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • attribute和property的区别
  • document load和document DOMContentLoaded两个事件的区别
  • === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • typeof能够得到哪些值
  • 什么是“use strict”,好处和坏处
  • 函数的作用域是什么?js 的作用域有几种?
  • JS如何实现重载和多态
  • 常用的数组api,字符串api
  • 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • 给定一个元素获取它相对于视图窗口的坐标
  • 如何实现图片滚动懒加载
  • js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • 深拷贝
  • 编写一个通用的事件监听函数
  • web端cookie的设置和获取
  • setTimeout和promise的执行顺序
  • JavaScript 的事件流模型都有什么?
  • navigator对象,location和history
  • js的垃圾回收机制
  • 内存泄漏的原因和场景
  • DOM事件的绑定的几种方式
  • DOM事件中target和currentTarget的区别
  • typeof 和 instanceof 区别,instanceof原理
  • js动画和css3动画比较
  • JavaScript 倒计时(setTimeout)
  • js处理异常
  • js的设计模式知道那些
  • 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • websocket的工作原理和机制。
  • 手指点击可以触控的屏幕时,是什么事件?
  • 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在* 函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • JS代码调试

面试题完整文档划到文末直接免费领取。

框架

  • 使用过哪些框架?
  • zepto 和 jquery 是什么关系,有什么联系么?
  • jquery源码如何实现选择器的,为什么$取得的对象要设计成数组的形式,这样设计的目的是什么
  • jquery如何绑定事件,有几种类型和区别
  • 什么是MVVM,MVC,MVP
  • Vue和Angular的双向数据绑定原理
  • Vue,Angular组件间通信以及路由原理
  • react和vue的生命周期
  • react和vue的虚拟dom以及diff算法
  • vue的observer,watcher,compile
  • react和angular分别用在什么样的业务吗?性能方面和MVC层面上的区别
  • jQuery对象和JS的Element有什么区别
  • jQuery对象是怎么实现的
  • jQuery除了它封装了一些方法外,还有什么值得我们去学习和使用的?
  • jQuery的$(‘xxx’)做了什么事情
  • 介绍一下bootstrap的栅格系统是如何实现的

浏览器相关

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

面试题完整文档划到文末直接免费领取。

ES6

  • 谈一谈 promise
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  • es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this

计算机网络

  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

Nodejs

  • 对nodejs有没有了解
  • Express 和 koa 有什么关系,有什么区别?
  • nodejs适合做什么样的业务?
  • nodejs与php,java有什么区别
  • Nodejs中的Stream和Buffer有什么区别?
  • node的异步问题是如何解决的?
  • node是如何实现高并发的?
  • 说一下 Nodejs 的 event loop 的原理

数据结构

  • 基本数据结构:(数组、队列、链表、堆、二叉树、哈希表等等)
  • 8种排序算法,原理,以及适用场景和复杂度
  • 说出越多越好的费波拉切数列的实现方法?

性能优化

  • cdn的用法是什么?什么时候用到?
  • 浏览器的页面优化?
  • 如何优化 DOM 操作的性能
  • 单页面应用有什么SEO方案?
  • 单页面应用首屏显示比较慢,原因是什么?有什么解决方案?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

三面、四面常问的开放性问题

  • 你都看过什么书?最近在看什么书?
  • 用过什么框架?有没有看过什么框架的代码?
  • 有没有学过设计模式?
  • 说一说观察者模式吧!能不能写出来?
  • 你最大的优点是什么?那你最大的缺点呢?
  • 你大学期间做过最疯狂的事情是什么?
  • 你除了写博客还有什么输出?
  • 现在你的领导给你了一份工作,要求你一个星期完成,但你看了需求以后估计需要3周才能完成,你该怎么办?
  • 平时关注的前端技术
  • 如何规划自己的职业生涯
  • 项目过程中,有遇到什么问题吗?怎么解决的?
  • 最近在研究哪方面的东西?
  • 请介绍一项你最热爱、最擅长的专业领域,并且介绍的学习规划。
  • 请介绍你参与的印象最深刻的一个项目,为什么?并且介绍你在项目中的角色和发挥的作用。

HR面

  • 你为什么要学习前端?
  • 你平时的是怎么学习前端的?有什么输出?
  • 你觉得自己最好的项目是什么?
  • 身边比较佩服的人有什么值得你学习的?你为什么没有跟他们一样?
  • 同事的什么问题会让你接受不了
  • 压力最大的事情是什么?
  • 和同学做过的最好的项目?
  • 身边的朋友通常对你的评价是什么
  • 喜欢什么样的工作氛围
  • 如何看待加班
  • 有没有对象
  • 意向城市
  • 其他的offer
  • 为什么要录取你?
  • 大学里花费时间最多的三件事情
  • 周末都会干什么?
  • 未来职业规划

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月28日

使用 Typescript 的一些注意事项

背景

ts 用了一年了,回顾起来,也没有那么顺利。趁这两天春节假期有时间,整理了几个自己觉得需要注意的情况,复盘一下。

我上学时学过 java 和 C# ,毕业后又做了两年 C# 全栈开发,对于静态类型语言是有一定经验的。ts 之所以能够慢慢取代 js ,也是因为它是静态类型语言。

但 ts 和 java 是不一样的,本质是因为它作为一个静态类型语言,要编译成弱类型语言 js 来执行。所以,ts 只管得了编译时,却管不了运行时。下文的很多内容,都是这个特点的具体表现。

【个人提醒】我感觉 ts 为了能让自己更适应 js 的转型,做了很多非常繁琐(或者叫灵活)的设计,我没有详细总结,但这种感觉很强烈。所以,如果你觉得 ts 有些地方过于繁琐时,也不要担心,这可能不是你的问题,而是它的问题。

任何美好的东西,都是应该简单的、明确的。

易混乱的类型

如果问“ts 的变量有多少种类型”,你能否回答全面?ts 比 js 类型多一些。

never vs void

只需要记住一个特点:返回 never 的函数,都必须存在无法到达的终点,如死循环、抛出异常。

function fn1(): never {
    while(true) { /*...*/ }
}

function fn2(): never {
    throw new Error( /*...*/ )
}

any vs unknown

  • any 任何类型,会忽略语法检查
  • unknown 不可预知的类型,不会忽略语法检查(这就是最大区别)
const bar: any = 10;
any.substr(1); // OK - any 会忽略所有类型检查

const foo: unknown = 'string';
foo.substr(1); // Error: 语法检查不通过报错
// (foo as string).substr(1) // OK
// if (typeof foo === 'string') { foo.substr(1) } // OK

一些“欺骗”编译器语法检查的行为

就如同你告诉编译器:“按我写的来,不要管太多,出了事儿我负责!”

编译器不给你添麻烦了,不进行语法检查了,但你一定要考虑好后果。所以,以下内容请慎用,不要无脑使用。

@ts-ignore

增加 @ts-ignore 的注释,会忽略下一行的语法检查。

const num1: number = 100
num1.substr() // Error 语法检查错误

const num2: number = 200
// @ts-ignore
num2.substr() // Ok 语法检查通过

any

如果 ts 是西游记,any 就是孙悟空,自由、无约束。了解西游记大部分是从孙悟空开始,了解 ts 可能也是从 any 开始用。

但西游记最后,孙悟空变成了佛。你的 any 也应该变成 interface 或者 type 。

类型断言 as

文章一开始说过,ts 只管编译时,不管运行时。as 就是典型的例子,你用 as 告诉编译器类型,编译器就听你的。但运行时,后果自负。

function fn(a: string | null): void {
    const length = (a as string).length
    console.log(length)
}
fn('abc') // Ok
// fn(null) // Error js 运行报错

非空断言操作符 !

! 用于排除 nullundefined ,即告诉编译器:xx 变量肯定不是 nullundefined ,你放心吧~

同理,运行时有可能出错。

// 例子 1
function fn(a: string | null | undefined) {
    let s: string = ''
    s = a // Error 语法检查失败
    s = a! // OK —— 【注意】如果 a 真的是 null 或者 undefined ,那么 s 也会是 null 或者 undefined ,可能会带来 bug !!!
}
// fn(null)
// 例子 2
type NumGenerator = () => number;

function myFunc(numGenerator: NumGenerator | undefined) {
  const num1 = numGenerator(); // Error 语法检查失败
  const num2 = numGenerator!(); // OK
}

// myFunc(undefined) // 【注意】,如果真的传入 undefined ,也会去执行,当然会执行报错!!!
// 例子 3
let a: number
console.log(a) // Error - Variable 'n' is used before being assigned.
let b!: number
console.log(b) // OK - `!` 表示,你会给 b 一个赋值,不用编译器关心

可选链 ?.

?. 遇到 nullundefined 就可以立即停止某些表达式的运行,并返回 undefined
【注意】这里只针对 nullundefined ,对于 0false'' 等 falsely 变量是不起作用的。这一点和 && 不一样。

这个运算符,看似是获取一个属性,其实它是有条件判断的。即,它就是一个 ? : 三元表达式的语法糖。既然它有判断逻辑,那你考虑不到位,就有可能出错。

// 例子 1 - 获取对象属性
interface IFoo { a: number }

function fn(obj: IFoo | null | undefined): number | undefined {
    const a = obj?.a // ?. 可选链运算符

    // 第一,如果 a 是 IFoo 类型,则打印 100
    // 第二,如果 a 是 null 或者 undefined ,则打印 undefined
    console.log('a', a)

    return a // 100 或者 undefined
}
fn({ a: 100 })
// fn(null)
// fn(undefined)
// 例子 2 - 获取数组元素
function tryGetArrayElement<T>(arr?: T[], index: number = 0) {
  return arr?.[index];
}
// 编译产出:
// "use strict";
// function tryGetArrayElement(arr, index = 0) {
//     return arr === null || arr === void 0 ? void 0 : arr[index];
// }
// 例子 3 - 用于函数调用
type NumGenerator = () => number;
function fn(numGenerator: NumGenerator | undefined | null) {
  const num = numGenerator?.();
  console.log('num', num) // 如果不是函数,则不调用,也不会报错,返回 undefined
}
// fn(null)
// fn(undefined)

【吐槽】对于这种语法糖,我还是比较反感的,我觉得自己写几行逻辑判断会更好。它虽然简洁,但是它会带来阅读理解上的负担,代码简洁不一定就可读性好 —— 当然了,如果大家都这么用,用久了,大家都熟悉了,可能也就没有这个障碍了。

type 和 interface

我目前还是处于一种懵逼状态。我感觉 type 和 insterface 有太多的灰色地带,这就导致我们日常使用时,大部分情况下用谁都可以。我搞不懂 ts 为何要这样设计。

按照我前些年对 java 和 C# 的理解:(我不知道近几年 java C# 有没有相关的语法变化)

  • 如果自定义一个静态的类型,仅有一些属性,没有方法,就用 type
  • 如果定义一种行为(行为肯定是需要方法的,仅属性是不够的),需要 class 实现,就用 interface

但是查到的资料,以及查阅 ts 的类库 lib.dom.d.ts 和 lib.es2015.d.ts 源码,也都是用 interface 。我曾经一度很困惑,见的多了,就慢慢习惯成自然了,但问题并没有解决。

问题没有解决,但事情还是要继续做的,代码也是要继续写的,所以我就一直跟随大众,尽量用 interface 。

private#

两者都表示私有属性。背景不同:

  • private 是 ts 中一开始就有的语法,而且目前只有 ts 有,ES 规范没有。
  • # 是 ES 目前的提案语法,然后被 ts 3.8 支持了。即,ts 和 ES 都支持 #

如果仅对于 ts 来说,用哪个都一样。
但本文一开始提到过:ts 只关注编译时,不关注运行时。所以,还得看看两者的编译结果。

private

private 编译之后,就失去了私有的特点。即,如果你执行 (new Person()).name ,虽然语法检查不通过,但运行时是可以成功的。
即,private 仅仅是 ts 的语法,编译成 js 之后,就失效了。

// ts 源码
class Person {
    private name: string
    constructor() {
        this.name = 'zhangsan'
    }
}

/* 编译结果如下
"use strict";
class Person {
    constructor() {
        this.name = 'zhangsan';
    }
}
*/

#

# 编译之后,依然具有私有特点,而且用 (new Person()).name ,在运行时也是无法实现的。
即,# 是 ts 语法,但同时也是 ES 的提案语法,编译之后也不能失效。

但是,编译结果中,“私有”是通过 WeekMap 来实现的,所以要确保你的运行时环境支持 ES6WeekMap 没有完美的 Polyfill 方案,强行 Polyfill 可能会发生内存泄漏。

// ts 源码
class Person {
    #name: string
    constructor() {
        this.#name = 'zhangsan'
    }
}

/* 编译结果如下
"use strict";
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to set private field on non-instance");
    }
    privateMap.set(receiver, value);
    return value;
};
var _name;
class Person {
    constructor() {
        _name.set(this, void 0);
        __classPrivateFieldSet(this, _name, 'zhangsan');
    }
}
_name = new WeakMap();
*/

函数重载

java 中的函数重载

java 中的函数重载是非常好用,而且非常好理解的,傻瓜式的,一看就懂。
如下代码,定义了四个名为 test 的函数,参数不同。那就直接写四个函数即可,调用时也直接调用,java 会自动匹配。

public class Overloading {
    public int test(){
        System.out.println("test1");
        return 1;
    }
    public void test(int a){
        System.out.println("test2");
    }   
    public String test(int a,String s){
        System.out.println("test3");
        return "returntest3";
    }   
    public String test(String s,int a){
        System.out.println("test4");
        return "returntest4";
    }   
    public static void main(String[] args){
        Overloading o = new Overloading();
        System.out.println(o.test());
        o.test(1);
        System.out.println(o.test(1,"test3"));
        System.out.println(o.test("test4",1));
    }
}

ts 中的函数重载

ts 的函数重载,先把各个情况的函数头写出来,然后再写一个统一的、兼容上述所有情况的函数头。最后,函数体自行处理参数。

class Person {
    // 第一,各个情况的函数头写出来
    test(): void
    test(a: number, b: number): number
    test(a: string, b: string): string
    // 第二,统一的、兼容上述所有情况的函数头(有一个不兼容,就报错)
    test(a?: string | number, b?: string | number): void | string | number {
        // 第三,函数体自行处理参数

        if (typeof a === 'string' && typeof b === 'string') {
            return 'string params'
        }
        if (typeof a === 'number' && typeof b === 'number') {
            return 'number params'
        }
        console.log('no params')
    }
}

这和 java 的语法比起来,简直就是复杂 + 丑陋,完全违背设计原则
但是,为何要这样呢?最终还是因为 ts 只关注编译时,管不了运行时 —— 这是原罪。
试想,如果 ts 也设计像 java 一样的重载写法,那编译出来的 js 代码就会乱套的。因为 js 是弱类型的。

注意函数定义的顺序

参数越精准的,放在前面。

/* 错误:any 类型不精准,应该放在最后 */
declare function fn(x: any): any;
declare function fn(x: HTMLElement): number;
declare function fn(x: HTMLDivElement): string;

var myElem: HTMLDivElement;
var x = fn(myElem); // x: any, wat?

不要为仅在末尾参数不同时写不同的重载,应该尽可能使用可选参数。

/* 错误 */
interface Example1 {
    diff(one: string): number;
    diff(one: string, two: string): number;
    diff(one: string, two: string, three: boolean): number;
}

/* OK */
interface Example2 {
    diff(one: string, two?: string, three?: boolean): number;
}

DOM 相关的类型

Vue 和 React 框架的普及,让大部分业务开发者不用直接操作 DOM ,变成了框架工程师。但 Web 是基于 DOM 的,可以不用,但千万不要忘记。

js 写 DOM 操作非常简单,不用关心类型,直接访问属性和方法即可。但用 ts 之后,就得关心 DOM 操作的相关类型。

不光我们使用 ts ,微软在设计 ts 时,也需要定义 DOM 操作相关的类型,放在 ts 的类库中,这样 ts 才能被 web 场景所使用。这些都定义在 lib.dom.d.ts 中。补:还有 ES 语法的内置类库,也在同目录下。

PS:一门成熟可用的编程语言,最基本的要包括:语法 + 类库 + 编译器 + 运行时(或者编译器和运行时统一为解释器)。然后再说框架,工具,包管理器等这些外围配置。

Node Element 等类型

这些都是现成的,W3C 早就定义好了的,我们直接回顾一下就可以。我觉得一张图就可以很好的表达,详细的可以参考各自的 MDN 文档。

事件参数类型

在使用 ts 之前,我并没有特别关注事件参数类型(或者之前看过,后来不用,慢慢忘了),反正直接获取属性,拿来用就可以。

document.body.addEventListener('click', e1 => {
    // e1 的构造函数是什么?
})
document.body.addEventListener('keyup', e2 => {
    // e2 的构造函数是什么?
})

于是我查了一下 MDN 的文档,其实也很好理解,就是不同的事件,参数类型是不一样的,当然属性、方法也就不一样。下面列出我们常见的,所有的类型参考 MDN 这个文档

事件参数类型
click dbclick mouseup mousedown mousemove mouseenter mouseleaveMouseEvent
keyup keyrpess keydownKeyboardEvent
compositionstart compositionupdate compositionend(输入法)CompositionEvent
focus blur focusin focusoutFocusEvent
drag dropDragEvent
paste cut copyClipboardEvent

他们的继承关系如下图。其中 UIEvent 表示的是用户在 UI 触发的一些事件。因为事件不仅仅是用户触发的,还有 API 脚本触发的,所以要单独拿出一个 UIEvent ,作为区分。

总结

我感觉重点的就是那句话:ts 是一门静态类型语言,但它要编译成为 js 这个弱类型语言来执行,所以它管得了编译时,却管不了运行时。这是很多问题的根本。

目前看来,前端社区会慢慢往 ts 转型,所以能熟练使用 ts 已经是一名前端人员必备的技能。希望本文能给大家带来一点点帮助。

往期回顾:

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月27日

15 个优秀的响应式 CSS 框架

响应式 Web 设计旨在为各种设备(从台式机显示器到手机)提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。

对响应式 Web 框架进行比较并不那么容易。有的框架适合设计更快、更精简网站的某些功能,而有些可能提供了大量功能、插件和附加组件,但是可能体积会比较庞大并且上手较难。

1. Bootstrap

Bootstrap 最受欢迎

Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先项目。Bootstrap 使前端开发更快、更轻松。他们提供了大量的文档、示例和演示,可以帮你快速进行响应式 Web 开发。在 Bootstrap 5 中做了一些重大更改,例如随意使用 jQuery 并添加了 RTL 支持,再加上现成的组件和工具类,使 Bootstrap 成为 Web 开发人员的最佳选择之一。

你还可以找到许多免费的高级 bootstrap 模板 和 UI 工具包,这使你的开发过程更加轻松。

官网:https://getbootstrap.com/

2. Tailwind CSS

Tailwind CSS

Tailwind 提供了一种基于实用工具的现代方法来构建响应站点。它有大量的实用工具类,无需编写 CSS 即可构建现代网站。它与其它框架的不同之处在于需要通过开发设置来缩小最终 CSS 的大小,因为如果使用默认值,最终将会得到一个很大的 CSS 文件。Tailwind 能够快速将样式添加到 HTML 元素中,并提供了大量的开箱即用的设计样式。这里有大量的 Tailwind CSS 资源 https://superdevresources.com...

官网:https://tailwindcss.com/

3. Tachyons

TACHYONS

Tachyons 也是一个基于实用工具的 CSS 库,它提供了许多即装即用的复杂功能,无需自己编写大量 CSS。这样做的好处是 Tachyons 的开箱即用样式很轻巧,不需要其他设置。如果需要的话,仍然可以通过一些方法来减小尺寸。如果你需要易用的实用工具库,那么这应该是一个不错的选择。

官网:https://tachyons.io/

4. Foundation

The most advanced responsive

Foundation 是由产品设计公司 ZURB 制作的自适应前端框架。这个框架是他们自 1998 年来构建 Web 产品和服务的结果。Foundation 是最先进的响应式前端框架,并且提供了许多自定义功能。

官网:http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

Material Design for Bootstrap

MDB 建立在 Bootstrap 之上,并提供了开箱即用的材料设计外观。它具有出色的 CSS 库,并且与大多数流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心库是完全免费使用的。

官网:https://mdbootstrap.com/

6. UIkit

UIkit

UIkit 是一个轻量级的模块化前端框架,用于开发快速且强大的 Web 界面。UIkit 提供了 HTML、CSS 和 JS 组件的全面集合,这些组件易于使用,易于定制和扩展。UIkit 采用移动优先的方法,可提供从手机、平板电脑到台式机的一致体验。

官网:http://getuikit.com/

7. Pure CSS

Pure

Pure.css 是一组小型的响应式 CSS 模块,可以用在任何一个 Web 项目中。Pure 的体积小的简直过分。比如完整的时钟模块最小化压缩版本仅为 4.0 KB。Pure 基于 Normalize.css 构建,并提供原声 HTML 元素以及最常见的 UI 组件的布局和样式。Pure 具有开箱即用的响应能力,所以元素在所有屏幕尺寸上都看起来不错。

官网:http://purecss.io/

8. Material Design Lite Framework (MDL)

material design light framework

Google 的 Material Design Lite 框架是最流行的 CSS 框架之一,可为你的网站添加 Material Design 外观。它不依赖任何 JavaScript 框架,可以跨设备使用,并且可以针对较旧的浏览器进行降级。它的构建充分考虑了可访问性,并提供了丰富的文档和入门模板。

官网:https://getmdl.io/

9. Materialize

materialize

Materialize 是基于 Material Design 的现代响应式前端框架。Google的材料设计是一种流行的设计趋势,涉及卡片、阴影和动画。

官网:http://materializecss.com/

10. Skeleton

Skeleton

如果你要开发较小的项目,或者只是觉得自己不需要大型框架的所有实用工具,则可以试试 Skeleton。Skeleton 仅设置了少量标准 HTML 元素的样式,并包含一个网格。

Skeleton 中的网格是一个 12 列的流体网格,最大宽度为 960px,随着浏览器或设备的缩小而缩小。可以用一行 CSS 更改最大宽度,并且所有列的大小都会相应进行调整。其语法很简单,使响应式编码更加容易。

官网:http://getskeleton.com/

11. Bulma

bulma css framework

Bulma 是基于 flexbox 的现代 CSS 框架。它提供了响应式设计和移动设备优先的 UI 组件,并具有模块化结构,可让你只导入要包含在 Web 设计中的内容。Bulma 还提供了一个基于 flexbox 的现代网格系统。

官网:http://bulma.io/

12. Semantic UI

semantic ui

Semantic UI 是一个高级 CSS 框架,提供了 50 多个 UI 元素,300 多个 CSS 变量用于自定义,并通过 EM 值构建以用于响应式设计。它也已准备好 Flexbox。

Semantic 是可用于生产环境的 CSS 框架,并能与 React、Angular、Meteor 和 Ember 等框架整合,你可以通过与这些框架中进行集成将 UI 层与应用逻辑组织在一起。

官网:https://semantic-ui.com/

13. Milligram

milligram css

Milligram 是一个极简的 CSS 框架,不依赖 JavaScript。它通过最少的样式设置用来快速、干净的创建响应式网站。它还提供了一个基于 flexbox 的网格系统。

官网:https://milligram.github.io/

14. Spectre.css

Spectrecss CSS Framework

Spectre.css 是一个轻量级的库,它提供了开箱即用的,基于 flexbox 的响应式和移动友好型布局。以在它的基础上根据自己的需要添加样式和响应实用工具。

官网:https://picturepan2.github.io...

15. Base CSS Framework

Base CSS Framework

Base 也是一个轻量级 CSS 框架,可用于构建响应式网站。它为网站项目提供了免费的基础入门软件以及许多付费的现成模板。

官网:https://getbase.org/

如果对这些框架进行比较,你会发现 Bootstrap、Tailwind 和 Foundation 的流行度远远领先于其他框架。

设计机构通常选择 Bootstrap,因为它提供了开箱即用的组件,并且易于定制。这就是 Bootstrap 主题和库数量众多的原因.

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月26日

腾讯、华为2021前端技术岗发布+最新内部面试题

金三银四在即,各互联网大厂抛出海量前端hc

腾讯、华为作为一线大厂,无论是薪资水平还是职业成就感,都是无数技术人向往的企业。很多小伙伴想利用这次机会去试一试,下面我来介绍一下腾讯、华为技术岗的职级体系及前端的岗位要求

此外,在文末还有分享:由腾讯和华为的内部同事总结的完整面试题。希望大家了解并掌握这些知识点,争取通过每一轮面试! 

腾讯职级体系为 14 级( 4-17 级)

腾讯薪资架构:

12+1+1= 14 薪,腾讯标准薪资是 14 薪,但是通常能拿到 16-20 薪。年终奖看部门盈利情况,一般是 3 个月。

腾讯对前端技术岗的要求:

  • 3年以上web开发经验。
  • 熟悉TCP/IP,HTTP/HTTPS等网络协议,熟悉网络通信基本原理。
  • 精通原生JavaScript和DOM API。
  • 熟练掌握HTML5/CSS3等相关技术。
  • 熟练掌握React、Vue等一种以上的前端框架,熟悉Webpack,Babel等打包构建工具,具备NodeJS开发经验。
  • 熟练掌握设计模式,具备良好的代码规范意识。

华为职级体系为13-22级

华为薪资架构

华为任职资格和技术等级是挂钩的,规定为技术等级+13=任职资格,如技术等级3A,任职资格为3A+13=16A。大部分华为员工在18级以内,通常华为工作十年的普通员工大概在16-17级左右,薪酬约为60万-70万。

华为对前端技术岗的要求:

1.熟悉前端开发工作流,打包构建工具,如gulp/webpack等

2.至少熟悉三大框架之一-及其原理,Angular/Vue/React

3.熟悉常用的数据结构和算法,基础扎实,htmI/ css/javascript前端基础熟练掌握

加分项:开源项目贡献者,熟悉Angular/ Typescript技术栈,有U|组件库开发经验,性能优化经验,熟练掌握一门后端语言。

最新腾讯、华为内部面试题

HTML

  • HTML5新特性,语义化
  • 浏览器的标准模式和怪异模式
  • xhtml和html的区别
  • 使用data-的好处
  • meta标签
  • canvas
  • HTML废弃的标签
  • IE6 bug,和一些定位写法
  • css js放置位置和原因
  • 什么是渐进式渲染
  • html模板语言
  • meta viewport原理

CSS

  • 盒模型,box-sizing
  • CSS3新特性,伪类,伪元素,锚伪类
  • CSS实现隐藏页面的方式
  • 如何实现水平居中和垂直居中。
  • 说说position,display
  • 请解释*{box-sizing:border-box;}的作用,并说明使用它的好处
  • 浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值
  • link和@import引入css的区别
  • 解释一下css3的flexbox,以及适用场景
  • inline和inline-block的区别
  • 哪些是块级元素那些是行级元素,各有什么特点
  • grid布局
  • table布局的作用
  • 实现两栏布局有哪些方法?
  • css dpi
  • 你知道attribute和property的区别么
  • css布局问题?css实现三列布局怎么做?如果中间是自适应又怎么做?
  • 流式布局如何实现,响应式布局如何实现
  • 移动端布局方案
  • 实现三栏布局(圣杯布局,双飞翼布局,flex布局)
  • 清除浮动的原理
  • overflow:hidden有什么缺点?
  • padding百分比是相对于父级宽度还是自身的宽度
  • css3动画,transition和animation的区别,animation的属性,加速度,重力的模拟实现
  • CSS 3 如何实现旋转图片(transform: rotate)
  • sass less
  • 对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、JavaScript 正则表达式判断平台。)
  • 什么是bfc,如何创建bfc?解决什么问题?
  • CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
  • CSS 选择器的优先级是怎样的?
  • 雪碧图
  • svg
  • 媒体查询的原理是什么?
  • CSS 的加载是异步的吗?表现在什么地方?
  • 常遇到的浏览器兼容性问题有哪些?常用的hack的技巧
  • 外边距合并
  • 解释一下“::before”和“:after”中的双冒号和单冒号的区别

JS

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • JS常见的dom操作api
  • 解释一下事件冒泡和事件捕获
  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • call,apply,bind
  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • 创建对象的多种方式
  • 实现继承的多种方式和优缺点
  • new 一个对象具体做了什么
  • 手写Ajax,XMLHttpRequest
  • 变量提升
  • 举例说明一个匿名函数的典型用例
  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • attribute和property的区别
  • document load和document DOMContentLoaded两个事件的区别
  • === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • typeof能够得到哪些值
  • 什么是“use strict”,好处和坏处
  • 函数的作用域是什么?js 的作用域有几种?
  • JS如何实现重载和多态
  • 常用的数组api,字符串api
  • 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • 给定一个元素获取它相对于视图窗口的坐标
  • 如何实现图片滚动懒加载
  • js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • 深拷贝
  • 编写一个通用的事件监听函数
  • web端cookie的设置和获取
  • setTimeout和promise的执行顺序
  • JavaScript 的事件流模型都有什么?
  • navigator对象,location和history
  • js的垃圾回收机制
  • 内存泄漏的原因和场景
  • DOM事件的绑定的几种方式
  • DOM事件中target和currentTarget的区别
  • typeof 和 instanceof 区别,instanceof原理
  • js动画和css3动画比较
  • JavaScript 倒计时(setTimeout)
  • js处理异常
  • js的设计模式知道那些
  • 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • websocket的工作原理和机制。
  • 手指点击可以触控的屏幕时,是什么事件?
  • 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在* 函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • JS代码调试

框架

  • 使用过哪些框架?
  • zepto 和 jquery 是什么关系,有什么联系么?
  • jquery源码如何实现选择器的,为什么$取得的对象要设计成数组的形式,这样设计的目的是什么
  • jquery如何绑定事件,有几种类型和区别
  • 什么是MVVM,MVC,MVP
  • Vue和Angular的双向数据绑定原理
  • Vue,Angular组件间通信以及路由原理
  • react和vue的生命周期
  • react和vue的虚拟dom以及diff算法
  • vue的observer,watcher,compile
  • react和angular分别用在什么样的业务吗?性能方面和MVC层面上的区别
  • jQuery对象和JS的Element有什么区别
  • jQuery对象是怎么实现的
  • jQuery除了它封装了一些方法外,还有什么值得我们去学习和使用的?
  • jQuery的$(‘xxx’)做了什么事情
  • 介绍一下bootstrap的栅格系统是如何实现的

浏览器相关

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

面试题完整文档划到文末直接免费领取。

ES6

  • 谈一谈 promise
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  • es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this

计算机网络

  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

Nodejs

  • 对nodejs有没有了解
  • Express 和 koa 有什么关系,有什么区别?
  • nodejs适合做什么样的业务?
  • nodejs与php,java有什么区别
  • Nodejs中的Stream和Buffer有什么区别?
  • node的异步问题是如何解决的?
  • node是如何实现高并发的?
  • 说一下 Nodejs 的 event loop 的原理

数据结构

  • 基本数据结构:(数组、队列、链表、堆、二叉树、哈希表等等)
  • 8种排序算法,原理,以及适用场景和复杂度
  • 说出越多越好的费波拉切数列的实现方法?

性能优化

  • cdn的用法是什么?什么时候用到?
  • 浏览器的页面优化?
  • 如何优化 DOM 操作的性能
  • 单页面应用有什么SEO方案?
  • 单页面应用首屏显示比较慢,原因是什么?有什么解决方案?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

三面、四面常问的开放性问题

  • 你都看过什么书?最近在看什么书?
  • 用过什么框架?有没有看过什么框架的代码?
  • 有没有学过设计模式?
  • 说一说观察者模式吧!能不能写出来?
  • 你最大的优点是什么?那你最大的缺点呢?
  • 你大学期间做过最疯狂的事情是什么?
  • 你除了写博客还有什么输出?
  • 现在你的领导给你了一份工作,要求你一个星期完成,但你看了需求以后估计需要3周才能完成,你该怎么办?
  • 平时关注的前端技术
  • 如何规划自己的职业生涯
  • 项目过程中,有遇到什么问题吗?怎么解决的?
  • 最近在研究哪方面的东西?
  • 请介绍一项你最热爱、最擅长的专业领域,并且介绍的学习规划。
  • 请介绍你参与的印象最深刻的一个项目,为什么?并且介绍你在项目中的角色和发挥的作用。

HR面

  • 你为什么要学习前端?
  • 你平时的是怎么学习前端的?有什么输出?
  • 你觉得自己最好的项目是什么?
  • 身边比较佩服的人有什么值得你学习的?你为什么没有跟他们一样?
  • 同事的什么问题会让你接受不了
  • 压力最大的事情是什么?
  • 和同学做过的最好的项目?
  • 身边的朋友通常对你的评价是什么
  • 喜欢什么样的工作氛围
  • 如何看待加班
  • 有没有对象
  • 意向城市
  • 其他的offer
  • 为什么要录取你?
  • 大学里花费时间最多的三件事情
  • 周末都会干什么?
  • 未来职业规划

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月25日

前端面试官: React我就问这些问题!能不能刷到我就看你的造化了

1.基础篇

1. React 中 keys 的作用是什么?

  • Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {
  return (
    <ul>
      {this.state.todoItems.map(({item, key}) => {
        return <li key={key}>{item}</li>
      })}
    </ul>
  )
}
  • react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
  • 有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。
  • key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。
  • key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructor和componentWillUnmount都会执行)

2.调用 setState 之后发生了什么?

  • 在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程。
  • 经过调和过程,React会以相对高效的方式根据新的状态构建React元素树并且着手重新渲染整个 UI 界面。
  • 在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染
  • 在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

3.触发多次setstate,那么render会执行几次?

  • 多次setState会合并为一次render,因为setState并不会立即改变state的值,而是将其放到一个任务队列里,最终将多个setState合并,一次性更新页面。
  • 所以我们可以在代码里多次调用setState,每次只需要关注当前修改的字段即可。

[补充] react中如何对state中的数据进行修改?setState为什么是一个异步的?

  • 修改数据通过this.setState(参数1,参数2)
  • this.setState是一个异步函数

    • 参数1 : 是需要修改的数据是一个对象
    • 参数2 : 是一个回调函数,可以用来验证数据是否修改成功,同时可以获取到数据更新后的DOM结构等同于componentDidMount
  • this.setState中的第一个参数除了可以写成一个对象以外,还可以写成一个函数 ,函数中第一个值为prevState 第二个值为prePprops this.setState((prevState,prop)=>({}))

为什么建议传递给 setState的参数是一个callback而不是一个对象?

  • 因为this.props 和this.state的更新可能是异步的,不能依赖它们的值去计算下一个state

为什么setState是一个异步的?(请看3)

  • 当批量执行state的时候可以让DOM渲染的更快,也就是说多个setstate在执行的过程中还需要被合并

4.this.setState之后react做了哪些操作?

  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

5.简述一下virtual DOM (虚拟dom)如何工作?(4 & 5 取一回答)

  • 当数据发生变化,比如setState时,会引起组件重新渲染,整个UI都会以virtual dom的形式重新渲染
  • 然后收集差异也就是diff新的virtual dom和老的virtual dom的差异
  • 最后把差异队列里的差异,比如增加节点、删除节点、移动节点更新到真实的DOM上

5.为什么虚拟 dom 会提高性能?

  • 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。
  • 用 JavaScript 对象结构表示 DOM 树的结构
  • 然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。
  • 然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。

6.react diff 原理

  • 把树形结构按照层级分解,只比较同级元素。
  • 给列表结构的每个单元添加唯一的 key 属性,方便比较。
  • React 只会匹配相同class的component(这里面的class指的是组件的名字)
  • 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React检查所有标记 dirty 的 component 重新绘制.
  • 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

7.React 中 refs 的作用是什么?(详细版本)

  • Refs 是 React 提供给我们的安全访问DOM元素或者某个组件实例的句柄。
  • 是父组件用来获取子组件的dom元素的
  • 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回
class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}
  • 上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。
  • 另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值
 function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

[详细易懂版本(推荐)]

1. ref设置为普通字符串

<button ref="myBtn"></button>
  • 元素定义ref属性,后续可以通过 this.refs.myBtn 来获取这个真实DOM对象
  • 组件定义ref属性,后续可以通过 this.refs.myBtn 来获取这个组件的实例对象

2. ref设置为箭头函数

<button ref="{ (sl) => { this.myBtn = sl } }"></button>
  • 元素定义ref属性,后续可以通过 this.myBtn 来获取这个真实DOM对象
  • 组件定义ref属性,后续可以通过 this.myBtn 来获取这个组件的实例对象

8.React 中有哪些构建组件的方式?

有什么区别?

  • 函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件的思想。
  • 函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑
  • 函数组件中没有this
  • 函数组件更容易理解。当你看到一个函数组件时,你就知道它的功能只是接收属性,渲染页面,它不执行与UI无关的逻辑处理,它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。

9.事件处理函数的this指向问题

[补充] 事件处理函数如何传递参数?

  • 可以使用 bind 传递参数
  • 将事件处理函数交给箭头函数,然后在箭头函数里面调用我自己开始想要调用的那个方法,这时我已经是个普通函数了。

[注意!!!]

  • 如果一个事件处理函数传递了额外的参数,那么事件对象会摸摸的放置在最后一个里面

2.十万个为什么篇

1.为什么列表循环渲染的key最好不要用index?

  • 举例说明
变化前数组的值是[1,2,3,4],key就是对应的下标:0,1,2,3 变化后数组的值是[4,3,2,1],key对应的下标也是:0,1,2,3
  • 那么diff算法在变化前的数组找到key =0的值是1,在变化后数组里找到的key=0的值是4
  • 因为子元素不一样就重新删除并更新
  • 但是如果加了唯一的key,如下:
变化前数组的值是[1,2,3,4],key就是对应的下标:id0,id1,id2,id3

变化后数组的值是[4,3,2,1],key对应的下标也是:id3,id2,id1,id0

  • 那么diff算法在变化前的数组找到key =id0的值是1,在变化后数组里找到的key=id0的值也是1
  • 因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能

2.什么是状态提升?

3.什么是高阶组件?

4.什么是受控组件和非受控组件?

5.什么是纯函数?

6.什么是上下文Context?

7.react中的Portal是什么?

8.react16的错误边界(Error Boundaries)是什么?

除了React之外,我整理的这份《前端校招面试真题解析大全》还包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

文章中所列主要为大纲部分,详细内容可以在文末自行获取哈!

HTML

  • HTML5新特性,语义化
  • 浏览器的标准模式和怪异模式
  • xhtml和html的区别
  • 使用data-的好处
  • meta标签
  • canvas
  • HTML废弃的标签
  • IE6 bug,和一些定位写法
  • css js放置位置和原因
  • 什么是渐进式渲染
  • html模板语言
  • meta viewport原理

CSS

  • 盒模型,box-sizing
  • CSS3新特性,伪类,伪元素,锚伪类
  • CSS实现隐藏页面的方式
  • 如何实现水平居中和垂直居中。
  • 说说position,display
  • 请解释*{box-sizing:border-box;}的作用,并说明使用它的好处
  • 浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值
  • link和@import引入css的区别
  • 解释一下css3的flexbox,以及适用场景
  • inline和inline-block的区别
  • 哪些是块级元素那些是行级元素,各有什么特点
  • grid布局
  • table布局的作用
  • 实现两栏布局有哪些方法?
  • css dpi
  • 你知道attribute和property的区别么
  • css布局问题?css实现三列布局怎么做?如果中间是自适应又怎么做?
  • 流式布局如何实现,响应式布局如何实现
  • 移动端布局方案
  • 实现三栏布局(圣杯布局,双飞翼布局,flex布局)
  • 清除浮动的原理
  • overflow:hidden有什么缺点?
  • padding百分比是相对于父级宽度还是自身的宽度
  • css3动画,transition和animation的区别,animation的属性,加速度,重力的模拟实现
  • CSS 3 如何实现旋转图片(transform: rotate)
  • sass less
  • 对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、JavaScript 正则表达式判断平台。)
  • 什么是bfc,如何创建bfc?解决什么问题?
  • CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
  • CSS 选择器的优先级是怎样的?
  • 雪碧图
  • svg
  • 媒体查询的原理是什么?
  • CSS 的加载是异步的吗?表现在什么地方?
  • 常遇到的浏览器兼容性问题有哪些?常用的hack的技巧
  • 外边距合并
  • 解释一下“::before”和“:after”中的双冒号和单冒号的区别

JS

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • JS常见的dom操作api
  • 解释一下事件冒泡和事件捕获
  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • call,apply,bind
  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • 创建对象的多种方式
  • 实现继承的多种方式和优缺点
  • new 一个对象具体做了什么
  • 手写Ajax,XMLHttpRequest
  • 变量提升
  • 举例说明一个匿名函数的典型用例
  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • attribute和property的区别
  • document load和document DOMContentLoaded两个事件的区别
  • === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • typeof能够得到哪些值
  • 什么是“use strict”,好处和坏处
  • 函数的作用域是什么?js 的作用域有几种?
  • JS如何实现重载和多态
  • 常用的数组api,字符串api
  • 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • 给定一个元素获取它相对于视图窗口的坐标
  • 如何实现图片滚动懒加载
  • js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • 深拷贝
  • 编写一个通用的事件监听函数
  • web端cookie的设置和获取
  • setTimeout和promise的执行顺序
  • JavaScript 的事件流模型都有什么?
  • navigator对象,location和history
  • js的垃圾回收机制
  • 内存泄漏的原因和场景
  • DOM事件的绑定的几种方式
  • DOM事件中target和currentTarget的区别
  • typeof 和 instanceof 区别,instanceof原理
  • js动画和css3动画比较
  • JavaScript 倒计时(setTimeout)
  • js处理异常
  • js的设计模式知道那些
  • 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • websocket的工作原理和机制。
  • 手指点击可以触控的屏幕时,是什么事件?
  • 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在* 函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • JS代码调试

框架

  • 使用过哪些框架?
  • zepto 和 jquery 是什么关系,有什么联系么?
  • jquery源码如何实现选择器的,为什么$取得的对象要设计成数组的形式,这样设计的目的是什么
  • jquery如何绑定事件,有几种类型和区别
  • 什么是MVVM,MVC,MVP
  • Vue和Angular的双向数据绑定原理
  • Vue,Angular组件间通信以及路由原理
  • react和vue的生命周期
  • react和vue的虚拟dom以及diff算法
  • vue的observer,watcher,compile
  • react和angular分别用在什么样的业务吗?性能方面和MVC层面上的区别
  • jQuery对象和JS的Element有什么区别
  • jQuery对象是怎么实现的
  • jQuery除了它封装了一些方法外,还有什么值得我们去学习和使用的?
  • jQuery的$(‘xxx’)做了什么事情
  • 介绍一下bootstrap的栅格系统是如何实现的

浏览器相关

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

面试题完整文档划到文末直接免费领取。

ES6

  • 谈一谈 promise
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  • es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this

计算机网络

  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

Nodejs

  • 对nodejs有没有了解
  • Express 和 koa 有什么关系,有什么区别?
  • nodejs适合做什么样的业务?
  • nodejs与php,java有什么区别
  • Nodejs中的Stream和Buffer有什么区别?
  • node的异步问题是如何解决的?
  • node是如何实现高并发的?
  • 说一下 Nodejs 的 event loop 的原理

数据结构

  • 基本数据结构:(数组、队列、链表、堆、二叉树、哈希表等等)
  • 8种排序算法,原理,以及适用场景和复杂度
  • 说出越多越好的费波拉切数列的实现方法?

性能优化

  • cdn的用法是什么?什么时候用到?
  • 浏览器的页面优化?
  • 如何优化 DOM 操作的性能
  • 单页面应用有什么SEO方案?
  • 单页面应用首屏显示比较慢,原因是什么?有什么解决方案?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

三面、四面常问的开放性问题

  • 你都看过什么书?最近在看什么书?
  • 用过什么框架?有没有看过什么框架的代码?
  • 有没有学过设计模式?
  • 说一说观察者模式吧!能不能写出来?
  • 你最大的优点是什么?那你最大的缺点呢?
  • 你大学期间做过最疯狂的事情是什么?
  • 你除了写博客还有什么输出?
  • 现在你的领导给你了一份工作,要求你一个星期完成,但你看了需求以后估计需要3周才能完成,你该怎么办?
  • 平时关注的前端技术
  • 如何规划自己的职业生涯
  • 项目过程中,有遇到什么问题吗?怎么解决的?
  • 最近在研究哪方面的东西?
  • 请介绍一项你最热爱、最擅长的专业领域,并且介绍的学习规划。
  • 请介绍你参与的印象最深刻的一个项目,为什么?并且介绍你在项目中的角色和发挥的作用。

HR面

  • 你为什么要学习前端?
  • 你平时的是怎么学习前端的?有什么输出?
  • 你觉得自己最好的项目是什么?
  • 身边比较佩服的人有什么值得你学习的?你为什么没有跟他们一样?
  • 同事的什么问题会让你接受不了
  • 压力最大的事情是什么?
  • 和同学做过的最好的项目?
  • 身边的朋友通常对你的评价是什么
  • 喜欢什么样的工作氛围
  • 如何看待加班
  • 有没有对象
  • 意向城市
  • 其他的offer
  • 为什么要录取你?
  • 大学里花费时间最多的三件事情
  • 周末都会干什么?
  • 未来职业规划

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月24日

本来只想试试水,没想到4面后还真面上了字节前端实习岗!

在面试前也上牛客看了大量面经来参考,面试的内容其实和面经上提到的那些八九不离十,很多高频出现的基本上是必知必会。本着人人为我,我为人人的精神,在这里也分享一下自己被问到了哪些问题,供大家参考。

一面(1.5,50min):

1、自我介绍(项目、简历)

2、label for 的用处

3、data-src = 是拿来做什么的【不会】

4、data-*【不会】

5、CSS display: block inline inline-block 区别

6、三栏纵列布局,宽度一样,怎么实现

6、flex 【不会】

7、代码题,反转链表【要面试官给提示,提示后做出】

8、JS 输出顺序题

9、为什么要有虚拟DOM节点,直接操作DOM节点的问题在哪里

10、设计一个v-dom和渲染函数

二面 (50min):

1、假如我是个前端小白/只用过原生js和jquery的程序员,怎么向我安利vue

2、Vue 的插件怎么注册 插件接口该怎么设计【不会】

3、输入一个url到显示页面发生了什么

4、CDN缓存、加速【不会】

5、浏览器怎么渲染 html css js 这些文件,哪个先渲染?【不清楚】

6、js同步代码要loop很久,会不会阻塞后面代码的执行

7、算法题倒数第k个节点

8、d3.js怎么和vue一起用

三面 (1.8,50min):

自我介绍、经历。。。

1、设计一个异步函数的调用【不会】

2、岛上有 白、灰、黑三种颜色的变色龙,其中两种不同颜色的变色龙相遇会同时变成第三种颜色,问三种颜色的变色龙数量分别为10,14,15时可能变成同一种颜色的变色龙吗?

【经面试官提示给出通用解】

1.11 HR面。

聊了下经历、大学专业、规划、入职时间什么的。

1.15

收到offer啦~

最后

在面试前花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

无偿分享给大家,算是一个感恩回馈吧,详细内容可以在文末自行获取哈!

HTML

  • HTML5新特性,语义化
  • 浏览器的标准模式和怪异模式
  • xhtml和html的区别
  • 使用data-的好处
  • meta标签
  • canvas
  • HTML废弃的标签
  • IE6 bug,和一些定位写法
  • css js放置位置和原因
  • 什么是渐进式渲染
  • html模板语言
  • meta viewport原理

CSS

  • 盒模型,box-sizing
  • CSS3新特性,伪类,伪元素,锚伪类
  • CSS实现隐藏页面的方式
  • 如何实现水平居中和垂直居中。
  • 说说position,display
  • 请解释*{box-sizing:border-box;}的作用,并说明使用它的好处
  • 浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值
  • link和@import引入css的区别
  • 解释一下css3的flexbox,以及适用场景
  • inline和inline-block的区别
  • 哪些是块级元素那些是行级元素,各有什么特点
  • grid布局
  • table布局的作用
  • 实现两栏布局有哪些方法?
  • css dpi
  • 你知道attribute和property的区别么
  • css布局问题?css实现三列布局怎么做?如果中间是自适应又怎么做?
  • 流式布局如何实现,响应式布局如何实现
  • 移动端布局方案
  • 实现三栏布局(圣杯布局,双飞翼布局,flex布局)
  • 清除浮动的原理
  • overflow:hidden有什么缺点?
  • padding百分比是相对于父级宽度还是自身的宽度
  • css3动画,transition和animation的区别,animation的属性,加速度,重力的模拟实现
  • CSS 3 如何实现旋转图片(transform: rotate)
  • sass less
  • 对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、JavaScript 正则表达式判断平台。)
  • 什么是bfc,如何创建bfc?解决什么问题?
  • CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
  • CSS 选择器的优先级是怎样的?
  • 雪碧图
  • svg
  • 媒体查询的原理是什么?
  • CSS 的加载是异步的吗?表现在什么地方?
  • 常遇到的浏览器兼容性问题有哪些?常用的hack的技巧
  • 外边距合并
  • 解释一下“::before”和“:after”中的双冒号和单冒号的区别

JS

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • JS常见的dom操作api
  • 解释一下事件冒泡和事件捕获
  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • call,apply,bind
  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • 创建对象的多种方式
  • 实现继承的多种方式和优缺点
  • new 一个对象具体做了什么
  • 手写Ajax,XMLHttpRequest
  • 变量提升
  • 举例说明一个匿名函数的典型用例
  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • attribute和property的区别
  • document load和document DOMContentLoaded两个事件的区别
  • === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • typeof能够得到哪些值
  • 什么是“use strict”,好处和坏处
  • 函数的作用域是什么?js 的作用域有几种?
  • JS如何实现重载和多态
  • 常用的数组api,字符串api
  • 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • 给定一个元素获取它相对于视图窗口的坐标
  • 如何实现图片滚动懒加载
  • js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • 深拷贝
  • 编写一个通用的事件监听函数
  • web端cookie的设置和获取
  • setTimeout和promise的执行顺序
  • JavaScript 的事件流模型都有什么?
  • navigator对象,location和history
  • js的垃圾回收机制
  • 内存泄漏的原因和场景
  • DOM事件的绑定的几种方式
  • DOM事件中target和currentTarget的区别
  • typeof 和 instanceof 区别,instanceof原理
  • js动画和css3动画比较
  • JavaScript 倒计时(setTimeout)
  • js处理异常
  • js的设计模式知道那些
  • 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • websocket的工作原理和机制。
  • 手指点击可以触控的屏幕时,是什么事件?
  • 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在* 函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • JS代码调试

框架

  • 使用过哪些框架?
  • zepto 和 jquery 是什么关系,有什么联系么?
  • jquery源码如何实现选择器的,为什么$取得的对象要设计成数组的形式,这样设计的目的是什么
  • jquery如何绑定事件,有几种类型和区别
  • 什么是MVVM,MVC,MVP
  • Vue和Angular的双向数据绑定原理
  • Vue,Angular组件间通信以及路由原理
  • react和vue的生命周期
  • react和vue的虚拟dom以及diff算法
  • vue的observer,watcher,compile
  • react和angular分别用在什么样的业务吗?性能方面和MVC层面上的区别
  • jQuery对象和JS的Element有什么区别
  • jQuery对象是怎么实现的
  • jQuery除了它封装了一些方法外,还有什么值得我们去学习和使用的?
  • jQuery的$(‘xxx’)做了什么事情
  • 介绍一下bootstrap的栅格系统是如何实现的

浏览器相关

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

面试题完整文档划到文末直接免费领取。

ES6

  • 谈一谈 promise
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  • es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this

计算机网络

  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

Nodejs

  • 对nodejs有没有了解
  • Express 和 koa 有什么关系,有什么区别?
  • nodejs适合做什么样的业务?
  • nodejs与php,java有什么区别
  • Nodejs中的Stream和Buffer有什么区别?
  • node的异步问题是如何解决的?
  • node是如何实现高并发的?
  • 说一下 Nodejs 的 event loop 的原理

数据结构

  • 基本数据结构:(数组、队列、链表、堆、二叉树、哈希表等等)
  • 8种排序算法,原理,以及适用场景和复杂度
  • 说出越多越好的费波拉切数列的实现方法?

性能优化

  • cdn的用法是什么?什么时候用到?
  • 浏览器的页面优化?
  • 如何优化 DOM 操作的性能
  • 单页面应用有什么SEO方案?
  • 单页面应用首屏显示比较慢,原因是什么?有什么解决方案?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

前端老飘 发布了文章 · 2月23日

280页《前端校招面试真题解析大全》

前言

前端校招面试题主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。(本文资料 适合0-2年)

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

文章中所列主要为大纲部分,详细内容可以在文末自行获取哈!

HTML

  • HTML5新特性,语义化
  • 浏览器的标准模式和怪异模式
  • xhtml和html的区别
  • 使用data-的好处
  • meta标签
  • canvas
  • HTML废弃的标签
  • IE6 bug,和一些定位写法
  • css js放置位置和原因
  • 什么是渐进式渲染
  • html模板语言
  • meta viewport原理

CSS

  • 盒模型,box-sizing
  • CSS3新特性,伪类,伪元素,锚伪类
  • CSS实现隐藏页面的方式
  • 如何实现水平居中和垂直居中。
  • 说说position,display
  • 请解释*{box-sizing:border-box;}的作用,并说明使用它的好处
  • 浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值
  • link和@import引入css的区别
  • 解释一下css3的flexbox,以及适用场景
  • inline和inline-block的区别
  • 哪些是块级元素那些是行级元素,各有什么特点
  • grid布局
  • table布局的作用
  • 实现两栏布局有哪些方法?
  • css dpi
  • 你知道attribute和property的区别么
  • css布局问题?css实现三列布局怎么做?如果中间是自适应又怎么做?
  • 流式布局如何实现,响应式布局如何实现
  • 移动端布局方案
  • 实现三栏布局(圣杯布局,双飞翼布局,flex布局)
  • 清除浮动的原理
  • overflow:hidden有什么缺点?
  • padding百分比是相对于父级宽度还是自身的宽度
  • css3动画,transition和animation的区别,animation的属性,加速度,重力的模拟实现
  • CSS 3 如何实现旋转图片(transform: rotate)
  • sass less
  • 对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、JavaScript 正则表达式判断平台。)
  • 什么是bfc,如何创建bfc?解决什么问题?
  • CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)
  • CSS 选择器的优先级是怎样的?
  • 雪碧图
  • svg
  • 媒体查询的原理是什么?
  • CSS 的加载是异步的吗?表现在什么地方?
  • 常遇到的浏览器兼容性问题有哪些?常用的hack的技巧
  • 外边距合并
  • 解释一下“::before”和“:after”中的双冒号和单冒号的区别

JS

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • JS常见的dom操作api
  • 解释一下事件冒泡和事件捕获
  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • call,apply,bind
  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • 创建对象的多种方式
  • 实现继承的多种方式和优缺点
  • new 一个对象具体做了什么
  • 手写Ajax,XMLHttpRequest
  • 变量提升
  • 举例说明一个匿名函数的典型用例
  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • attribute和property的区别
  • document load和document DOMContentLoaded两个事件的区别
  • === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • typeof能够得到哪些值
  • 什么是“use strict”,好处和坏处
  • 函数的作用域是什么?js 的作用域有几种?
  • JS如何实现重载和多态
  • 常用的数组api,字符串api
  • 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • 给定一个元素获取它相对于视图窗口的坐标
  • 如何实现图片滚动懒加载
  • js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • 深拷贝
  • 编写一个通用的事件监听函数
  • web端cookie的设置和获取
  • setTimeout和promise的执行顺序
  • JavaScript 的事件流模型都有什么?
  • navigator对象,location和history
  • js的垃圾回收机制
  • 内存泄漏的原因和场景
  • DOM事件的绑定的几种方式
  • DOM事件中target和currentTarget的区别
  • typeof 和 instanceof 区别,instanceof原理
  • js动画和css3动画比较
  • JavaScript 倒计时(setTimeout)
  • js处理异常
  • js的设计模式知道那些
  • 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • websocket的工作原理和机制。
  • 手指点击可以触控的屏幕时,是什么事件?
  • 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在* 函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • JS代码调试

框架

  • 使用过哪些框架?
  • zepto 和 jquery 是什么关系,有什么联系么?
  • jquery源码如何实现选择器的,为什么$取得的对象要设计成数组的形式,这样设计的目的是什么
  • jquery如何绑定事件,有几种类型和区别
  • 什么是MVVM,MVC,MVP
  • Vue和Angular的双向数据绑定原理
  • Vue,Angular组件间通信以及路由原理
  • react和vue的生命周期
  • react和vue的虚拟dom以及diff算法
  • vue的observer,watcher,compile
  • react和angular分别用在什么样的业务吗?性能方面和MVC层面上的区别
  • jQuery对象和JS的Element有什么区别
  • jQuery对象是怎么实现的
  • jQuery除了它封装了一些方法外,还有什么值得我们去学习和使用的?
  • jQuery的$(‘xxx’)做了什么事情
  • 介绍一下bootstrap的栅格系统是如何实现的

浏览器相关

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

面试题完整文档划到文末直接免费领取。

ES6

  • 谈一谈 promise
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  • es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this

计算机网络

  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

Nodejs

  • 对nodejs有没有了解
  • Express 和 koa 有什么关系,有什么区别?
  • nodejs适合做什么样的业务?
  • nodejs与php,java有什么区别
  • Nodejs中的Stream和Buffer有什么区别?
  • node的异步问题是如何解决的?
  • node是如何实现高并发的?
  • 说一下 Nodejs 的 event loop 的原理

数据结构

  • 基本数据结构:(数组、队列、链表、堆、二叉树、哈希表等等)
  • 8种排序算法,原理,以及适用场景和复杂度
  • 说出越多越好的费波拉切数列的实现方法?

性能优化

  • cdn的用法是什么?什么时候用到?
  • 浏览器的页面优化?
  • 如何优化 DOM 操作的性能
  • 单页面应用有什么SEO方案?
  • 单页面应用首屏显示比较慢,原因是什么?有什么解决方案?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

三面、四面常问的开放性问题

  • 你都看过什么书?最近在看什么书?
  • 用过什么框架?有没有看过什么框架的代码?
  • 有没有学过设计模式?
  • 说一说观察者模式吧!能不能写出来?
  • 你最大的优点是什么?那你最大的缺点呢?
  • 你大学期间做过最疯狂的事情是什么?
  • 你除了写博客还有什么输出?
  • 现在你的领导给你了一份工作,要求你一个星期完成,但你看了需求以后估计需要3周才能完成,你该怎么办?
  • 平时关注的前端技术
  • 如何规划自己的职业生涯
  • 项目过程中,有遇到什么问题吗?怎么解决的?
  • 最近在研究哪方面的东西?
  • 请介绍一项你最热爱、最擅长的专业领域,并且介绍的学习规划。
  • 请介绍你参与的印象最深刻的一个项目,为什么?并且介绍你在项目中的角色和发挥的作用。

HR面

  • 你为什么要学习前端?
  • 你平时的是怎么学习前端的?有什么输出?
  • 你觉得自己最好的项目是什么?
  • 身边比较佩服的人有什么值得你学习的?你为什么没有跟他们一样?
  • 同事的什么问题会让你接受不了
  • 压力最大的事情是什么?
  • 和同学做过的最好的项目?
  • 身边的朋友通常对你的评价是什么
  • 喜欢什么样的工作氛围
  • 如何看待加班
  • 有没有对象
  • 意向城市
  • 其他的offer
  • 为什么要录取你?
  • 大学里花费时间最多的三件事情
  • 周末都会干什么?
  • 未来职业规划

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 132 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月6日
个人主页被 2.1k 人浏览