澳门新萄京45分钟高分虏获offer,唯品会的体味
分类:澳门新萄京最大平台

如何准备前端开发者面试

2015/04/06 · CSS, HTML5, JavaScript · 面试

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:blog.jixee.me。欢迎加入翻译组。

澳门新萄京 1

工作面试很让人头疼。说真的。每个人都痛恨面试。虽然潜力的工作机会并不一定能拿到,但这并不意味着你在这方面会做的很差。因此,这里给出了一些如何准备 前端开发者面试的技巧。

首先明确一下,很多面试因公司、公司规模、面试官以及你获得面试资格的渠道而不同。我曾经经历过这样的面试,在面试官坐下前,他显然并没有看过(或者记得)我的简历内容。另一方面,我也经历过其他一些面试,面试官在面试前已经事先了解了关于我的一切。因此,你对前端开发者面试准备,在实际面试前开始。

面试前,应该假设一下面试官将会深入调查你。确保你的网上作品集和相关的社会关系网络内容都是最新的。无论是个人网站、Behance、还是Dribbble,确保给人的第一印象是好的。这一点甚至可以在你踏入房间之前就能影响到面试官对你的看法。

世事多变,这种准备并非包罗万象的。将这些问题作为参考,同时一定记得——放松。

澳门新萄京 2

图片来自NBC《老友记》截屏

希望你的面试官有点经验,不会用以下这样的问题开场。以防万一,还是准备一些答案。

  • 为什么选择程序员这个职业生涯?
  • 截至目前,你所从事的项目中最喜欢的是哪个?
  • 描述一下你梦想中的研发项目。

另外一些面试官会问一些通用的技术问题,来测试你的技术能力。有可能部分人不知道这些问题是什么意思,而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同,你的答案也会有所不同。这些问题简单易答,因此把这些问题记下来。

  • 描述一下创建一个新网页的过程
  • 怎样减少页面加载时间?
  • 标准和标准体(澳门新萄京45分钟高分虏获offer,唯品会的体味。standards and standards bodies)为什么重要?
  • 你使用怎样一个过程来组织代码?
  • 你喜欢用什么工具来测试代码性能?

既然你从事前端工作,理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题,如果不能回答出来,将对你很不利。

  • CSS 中的 resetting 和 normalizing 之间的区别有哪些?
  • 什么是floats,它是如何工作的?
  • absolute、relative、fixed 和 static 定位的区别是什么?
  • 解释visiblity hidden和display none之间的区别
  • 你是如何修复特定浏览器默认样式的问题?
  • 你是否用过网格系统?目的是?
  • 如果计算CSS权重?
  • 解释如何优化CSS选择器。
  • 为什么需要使用预编译器?
  • 你是如何测试网站的跨浏览器兼容性?

澳门新萄京 3

图片来自Aftercollege.com

现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚,就把下面这些问题牢记在心。

  • 前端开发最好的框架是什么?
  • 响应式web app和原生应用程序的区别是什么?
  • 原生app相对web app的优点是什么?
  • 客户端和服务器端开发的区别是什么?
  • 什么是SASS和LESS?它们是如何工作的?

面试官会更多关注你是如何表达对这些问题的解释。他们会追问支持你的答案的工作案例。前面的问题你可能可以通过记忆而过关,你可能还会遇到这些问题的扩展,但这些答案的深度,将让你与众不同。通过你参与过的实际项目,来展示你的思考过程。

 澳门新萄京 4

图片来自《美国精神病人》的截屏

当面试(或当你在面试过程中)问题会变得更加具体。你在解释、引用实例、阐明经验教训表现地更好,你更可能会从其他面试者中脱颖而出。在这个点上,并不仅仅是你的答案,而是答案的原因。你在原生app和响应式网站间做出决择的原因是什么?两种答案都是可以接受的,但理解你的逻辑,会帮助面试官做出正确的决定并聘请你!

赞 6 收藏 评论

澳门新萄京 5

zBase -- 轻量级 DOM 操作库

没有任何依赖
轻量级的 Dom 操作库,封装一些常用的 css 选择器和事件操作等

前端知识体系 知识结构 - 提纲版


前端知识体系 知识结构 - 提纲版

web前端资源文件的部署和优化


现在网上也有很多关于前端文件加载的性能优化,我相信大部分的前端程序猿,应该都听说过雅虎的14条优化原则

  1. 尽可能的减少 HTTP 的请求数 content 2. 使用 CDN(Content Delivery Network) server 3. 添加 Expires 头(或…

[译] CSS 继承深度解析


CSS 里经典的层叠和继承概念到底怎么该怎么使用最好,本文深度解析,欢迎大家一起交流!

初识 three.js 的故事


提到 Three.js,就必须说一下 OpenGL 和 WebGL。
OpenGL 大概许多人都有所听闻,它是最常用的跨平台图形处理开源库。
WebGL 就是基于 OpenGL 设计的面向 web 的 3D 图形标准,它提供了一系列 JavaScript API,通过这些 API 进行图形渲染,系统硬件会加速 3D 渲染,从而获得较高性能。
而 Three.js 是 JavaScript 编写的 WebGL 第三方库,通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。

一起来实现图片滚动懒加载


图片一直是网络资源占用大户,对于一个前端有几百张图片的网站来说,如果首屏即加载所有图片(无论这些图片有没有被用户看到),那无疑是既浪费网络资源,又伤害用户体验的事。因此,图片懒加载,是提高前端性能的刚需所在。 目前,淘宝网、知乎等大流量网站都已经使用了图片滚动懒加载的方案——仅…

开源的全功能型矢量图标:TypIcons


TypIcons 是一个开源的网页矢量图标集合,它汇集了上百个网页常用小图示任你用,同时支持下载到本地使用,非常适合网页设计师。

移动端 Web 开发踩坑之旅


最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的新人们。

前端面试季 - 12家公司面试题全揭秘


请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 0.前言 注意:若文章中发现有图片未能正常加载,请移步其他地址查阅。 作者的简书 作者的CSDN 上一次给大家分享了一下近期的面试和面试题,发现很多小伙伴还是比较感兴趣的。 所以这次我…

前端工程与性能优化


前端工程与性能优化

浏览器兼容性问题解决方案 · 总结


普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充,本帖也会不断更新。 Normalize.css 不同浏览器的默认样式存在差…

GitHub 上学习前端开发的资料(不定期更新)


GitHub 上学习前端开发的资料(不定期更新)

响应式开发心得


什么是响应式?响应式的页面在不同的屏幕有不同的布局,换句话说,使用相同的html在不同的分辨率有不同的排版。如下图所示: 响应式布局是为了解决适配的问题,传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就好了。因为它是用的同样html,所以它的JS…

你可能不知道的 border-radius


border-radius不只是圆角那么简单,我们可以用它来画一个圆形、半圆,四分之一圆,椭圆,半椭圆,不规则圆…

精通移动端布局 - 概念篇


本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~

Muse-UI 2.0 发布


vue2 materiar design

一个大小约 2k 的图片高斯模糊库 —— blurify.js


一个大小约 2k 的图片高斯模糊库,优先使用 css 模式,如果浏览器不支持则使用 canvas 导出 base64 的模式。当然也可以固定选择某一种模式。

AST语法结构树初学者完整教程


AST语法结构树初学者完整教程 编写你的第一个 Babel 插件 不太喜欢上来就讲大道理,先来个小栗子,做个简单而又实用的功能,做完后,理论你就理解一大半了。 我们需要antd里面的一个组件Button,代码如下: import { Button } from 'antd'我们只…

适用于 vue.js 和原生 js 的渐进式图片加载


渐进式图片加载

基于 Token 的 WEB 后台认证机制


基于 Token 的 WEB 后台认证机制

Animista: 交互地展示一系列拿来即用的 CSS 动画


Animista: 交互地展示一系列拿来即用的 CSS 动画

Web探索之旅 | 第二部分第五课:响应式网站和移动应用


-- 作者 谢恩铭 转载请注明出处 上一课Web探索之旅 | 第二部分第四课:数据库中,我们认识了关系型数据库和非关系型数据库。 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Application的缩写,意为“应用”)。 自从触屏式手机和平板电脑开始流行起来后(…

澳门新萄京45分钟高分虏获offer,唯品会的体味。前端灰度效果的实现(filter:grayscale())兼容所有浏览器


《小分享》~ 关于前端灰度效果的实现以及浏览器类型的判断

【译】2017 年 4 月:前端与设计资源集


4 月就快结束了。在 4 月的尾巴,与大家分享一些最新的前端与设计资源,涉及一些新工具、代码片段以及酷炫的字体,希望你们喜欢。

【译】10 个优质的 CSS 与 JS LOGO 动画示例


制作精良的 LOGO 动画总能让人眼前一亮,而本文分享的一些利用 CSS 与 JS 实现的酷炫 LOGO 动画,也会让你惊叹前端开发者的创造力。一起来 Enjoy 吧!

移动端 web 开发技巧


移动端 web 开发技巧的小总结

静态网站生成器是如何工作的


在过去的几年里,开源静态网站生成器的数量增长迅速,StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器,性能优越,部署简单等特点。特别适合生成静态文档,个人博客,饱受开发者的青睐。相比学会使用,掌握工作原理也尤为重要。

一个静态网站生成器的工作流程通常有以下几个步骤:

读取源文件(e.g. 约定 markdown 格式)
资源预处理
模板引擎渲染
生成目标文件

详细解析 HTTP 与 HTTPS 的区别


面试季中面试官非常喜欢问的一个点,那么 HTTP 与 HTTPS 有什么区别?分享一篇很好的文章

WEB 前端规范


此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。
此规范为参考规范,不全是硬性要求,部分硬性约定见下一条书写规范,统一团队编码规范和风格。让所有代码都是有规可循的,并且能够得到沉淀,减少重复劳动。

知乎登录页 - 粒子运动效果


发现知乎的登录页好好看,于是就写了一下。并提供了 VUE,REACT,INFERNO 多个 DEMO。

记录一些前端的知识点 (一)


记录一些重要却容易忽视的前端知识点。

Type.js 录制并在网页中回放打字效果


Type.js 是一个打字效果的录制工具, 在终端中录制一段文本即可通过内置的 JavaScript 库嵌入网页中!

使用 css 3 制作长投影 Long Shadow


在 flat design(扁平化的设计) 中,Long Shadow (长投影)被看着屡试不爽的设计技能。摄影师选择长投影通常是给图片带来戏剧效果, 在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。上面说的是设计,前端如何通过 css 代码来实现这样的效果?大家第一时间想到就是 css3 已经支持的 text-shadow...

2017 年创建网站的 11 个便利资源


准备好了要重新拾起被你搁置的网站了么?是时候把你的网站好好设计一番发布出来了!不管它是一个简单的博客还是更复杂的一些工程,你需要开始做的仅仅是从这几个棒棒哒的工具开始。

tippyjs - 一个小巧的纯 JS 的 Tooltip 开源库


样式很新潮,不依赖其他库

从零开始制作 Hexo 主题


Hexo 主题制作教程

手机端调用数字键盘 number、tel,输入过程中监听 input 变化事件


最近做手机端的提现功能,用于 app 的 html5 页面!再输入金额时需要调用手机端数字键盘,作为一个前端程序媛应该具备的素质,自然考虑该输入框只能输入数字和小数点,并且最多只能输入 1 个小数点,整数部分最多 12 位,小数部分最多 2 位,最好的用户体验就是输入过程中就看到相应的变化和文字提示!

解读 viewport—网页自适应移动 app 神器


写在前面:viewport 指的是是用户网页的可视区域,查了许久,遗憾的是近一两年几乎没有高质量的解析 viewport 的文章,本文内容是参考大牛,对内容进行了重新排版,以及对重点内容进行标注、精简,加上些许的个人理解形成的。有兴趣的朋友,可以参考一下。

Web Storage--HTML5 本地存储


有关 Web Storage 的运用

【译】2017 Web 开发者学习路线图


本文是源自 Github 上 Kamran Ahmed 建立的一个仓库。在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops 人员需要掌握的学习路线图,以便与他的学生们分享他们的观点,一起来看看。

markdown.css - 将 HTML 主动转成 markdown 编辑时的样式


你有一段正常的 HTML 代码,markdown.css 会把他转化成像是在 markdown 编辑器里的样式

文本动画, 几行代码页面效果瞬间就提升了


animate-text 轻巧易用的文本动画

[译] 前端指南


本文原文是一篇来自 Github 上 @bendc 的 6,539 星的文章, 在此声明,原作者保有所有权利,本文仅供技术探讨学习。

精读前后端渲染之争


十年前,几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染,但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起,开始转向了前端渲染。

Web 前端应该从哪些方面来优化网站?


前端优化应该站在整个 web 系统这个层次去做,去分析瓶颈 去找到优化目标
当然 既然要谈前端性能优化 如果在团队去坚持使用前端工程化工具如 gulp grunt webpack 的话 基本覆盖了前端能做的优化 case

从入门到成为前端高手(上篇)—— Jonathan


主要讲 HTML 和 CSS 的开发接口,以及学习 HTML 和 CSS 的相关资源

[译]HTML attribute 与 DOM property 之间的区别?


原文:http://joji.me/en-us/blog/html-attribute-vs-dom-property 当我们通过 js 处理 DOM 对象时非常容易将 attribute(特性)和 property(属性)混淆。document.getElementById('test'…

无他,唯手熟尔-前端实习面试题篇


以下基本是我在面试中遇到的所有问题,给大家做一个参考。除2月13和14日为现场面试以外,其余均为电话面试。我的本意不是让大家背答案,所以没有把面试公司的名字写出来,只是想给不知道如何准备面试的同学一些启发。我面的几家大厂基本不会问框架的,但是很多公司的预期比较单一,比如需要你会…

免费且又精致的 HTML/CSS 站点模板


Responsive HTML5 and CSS3 Site Templates

谈谈对 Web 安全的理解


谈谈对 Web 安全的理解: 作为一个前端 er,详细介绍了 CSRF 攻击,XSS 攻击,SQL 注入,SYN 攻击等等。

移动前端自适应解决方案和比较


互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:

  1. 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案
  2. 使用 flexbox 解决方案
  3. 使用百分比加媒体查询
  4. 使用 rem
[前端网站分享](https://link.jianshu.com?t=https://juejin.im/entry/5924079d570c350069cb9349)

前端导航

1月前端面试记

通过面试不是件容易的事,作为候选人,通常需要在 45 分钟的时间内展示自己能做些什么。作为一名面试官,同样难以在这么短的时间内评估候选人是否适合。对于面试来说,并不存在一刀切的方法,面试官问的问题通常会有一个范围,但除此之外,他们可以自行决定要问哪些其他问题。

关于作者:cucr

澳门新萄京 6

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

澳门新萄京 7

澳门新萄京 8

背景

我于16.12.18辞职,之前有过一年左右的前端工作经验。从12月26号开始到1月9号先后面试了微信,百度,阿里巴巴uc,唯品会以及深圳腾讯等几家公司,特此总结与各位共勉。

澳门新萄京 9

 

微信

由于我已经毕业工作过,所以去微信面试是走的社招。微信社招极其严格,共八轮面试,总体来说我基本上当了一把炮灰。由于腾讯前端又细分为重构和JS,所以微信的面试基本上以JS为主。
微信第一面是笔试,共一个小时,四道编程题:

  • JS手写二分搜索算法
  • 给你一段代码,让你发现其中的问题(考察闭包)
  • 实现一个Lazyman(请自行搜索)
  • 用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况。

前两道题比较基础,只要有JS基础的同学一般都应该没什么问题。第三道题,有些难度,但是我之前曾在网上见过该题,使用队列或者promise都可以。第四道题,看完之后一脸懵逼,想了半天也没明白它考察什么内容。由于时间关系,我直接用了window.getComputedStyle。后来交完之后仔细想想,好像确实有很多情况没考虑到,例如当这个元素的背景色为透明时,它最终的背景色应该为其父元素的背景色。

微信二面是项目经历面,我跟面试官大致介绍下我过去一年做的项目。然后掏出笔记本开始一起看我之前写的代码,面试官觉得我之前做的项目复杂度不太高。然后就问了我其他几个问题:既然你面的是小程序组,那么你了解小程序吗?我说不了解。然后问我是否使用过React,我说没有。面试官不是很满意,但最终让我过了。

微信第三面是前端基础面,面完之后我的人生观发生了改变,我感觉我不配做前端。第一个问题是,请问前端优化的手段有哪些?我心里暗喜,这么简单的问题还问。然后我答将CSS文件放在上面,JS文件放在下面。正准备说下一条时,面试官问为什么这样做?我答JS下载解析时会阻塞DOM树的构建,如果放在上面可能会出现白屏的情况。然后面试官问,有没有可能让JS下载解析不阻塞DOM树构建?我答使用defer或asyn字段。面试官问有什么区别?我答...然后面试官问CSS下载解析会不会阻塞DOM树渲染?我已经开始一身汗了,这个问题我不太确定。然后面试官让我接着说优化手段,我答CSS-sprit或者将小图使用base64内嵌。面试官问我CSS-sprit原理是什么?使用base64虽然会减少请求数,但是会增大文件的大小,以什么为基准去衡量什么时候使用base64?此时我已经泪流满面。然后面试官问我了解HTTPS吗?我说了解。他问,请问HTTPS和HTTP有什么区别?我答HTTPS增加了SSL层。面试官问请画出SSL四次握手过程?此刻已经崩溃,我答不会。然后他问请问SSL握手时有对称加密和非对称加密吗?我答不知道。他问如何优化这一层?我答不知道。然后继续回答优化手段?我答将静态内容推向CDN。然后他问现在CDN不稳,时而工作时而崩溃,我有一个首页如何确保每次都能正常显示该首页?答案是CSS inline。他看了看时间,说那就下一个问题。然后给了我一个柱状图,让我使用html和CSS绘制出来。当时我是用了flex。然后他让我手写一个快排算法,我写了。然后他让我用CSS和JS动画在刚才那个柱状图中表现出快排的整个过程,然后我哭了。其实这个动画是见过的,只不过平时使用的都是canvas。面试结束,我跪了。

整体来言,微信的面试难度还是挺大的。他对每个细节的考察非常仔细,不仅要求你知其然更要让你知其为什么。另外一方面我也意识到了准备的不足。

在过去的几年里,我面试过很多专注于前端开发的 Web 开发者和软件工程师,在这篇文章中,我想分享一些面试技巧,帮助候选人为面试做好准备。

 

百度

百度的面试是我最喜欢的,考察的比较全面。百度第一面为基础面,包括HTML/CSS/JS各方面,共50分钟左右,大约30个问题左右:

  • HTML5新特性(新增的标签, API等),如localstorage的用法以及与cookie的区别,如何理解web语义化
  • CSS3新特性,如动画等
  • CSS特性,如position的用法,如何实现居中,bootstrap源代码的理解,盒模型(W3C和IE),flex的使用
  • 前端兼容性处理(CSS hack技术)
  • JS基础,如this用法,new关键字的过程,call与apply的区别,闭包,原型以及JS如何实现继承
  • 前端基础,浏览器缓存,跨域,从输入url到渲染的整个过程,事件(W3C和IE),TCP三次握手过程,如何实现懒加载(跟预加载的区别)

百度二面为基础面 算法 项目经历,持续一个小时。问题如下:

  • 之前有看过你做的一个移动页简历,请问如何实现?我主要是使用REM Media Query,根据不同尺寸的设备进行不同的font-size设置。然后问我REM和EM的区别,如果父元素的font-size也是采用em表示,那么子元素的font-size怎么计算等。
  • 有没有遇到过margin重叠的现象,如何解决?BFC
  • 常见的清除浮动的方法有哪些?bootstrap是怎么做的?bootstrap是怎么实现grid系统的?
  • 怎么理解JS模块化?有没有使用过webpack?

算法题只有一道:什么是浅复制和深复制?有什么区别?如何实现Object的深复制?

首先我对这个问题进行分析,Object是一个树形结构,所以我采用递归的方法进行复制。面试官随后提问能否通过循环的方法?我思考了一会,回答说循环的关键在于循环条件的设置,我想借助栈作为循环判断的条件,当栈为空时,循环结束。当时我立马反应过来,因为Object子节点的个数不确定,可能入栈出栈会存在一定问题。面试官随后问,还有什么东西没有考虑到吗?我想了下说没有。他提示了下,如果出现环怎么办?我愣了一下说不知道。然后他给我个提示说使用深度优先的方法借助栈并不能解决这个问题,然后让我使用宽度优先试试,将代码发给他。面试结束后我发给了他我的代码,各位可以参考下:

// 深度优先遍历复制, 借助队列
function deepCopy(obj) {
    var newObj = {},
        srcQueue = [obj], srcVisitedQueue = [],
        copyQueue = [newObj], copyVisitedQueue = [];

    while (srcQueue.length > 0) {
        var currentSrcElement = srcQueue.shift(),
            currentCopyElement = copyQueue.shift();

        srcVisitedQueue.push(currentSrcElement);
        copyVisitedQueue.push(currentCopyElement);

        for (var key in currentSrcElement) {
            if (typeof currentCopyElement[key] !== 'object') {
                currentCopyElement[key] = currentSrcElement[key];
            } else {
                // 有环的情况
                var index = srcVisitedQueue.indexOf(currentSrcElement[key]);
                if (index >= 0) {
                    currentCopyElement[key] = copyVisitedQueue[index];
                } else {
                    srcQueue.push(currentSrcElement[key]);
                    currentCopyElement[key] = {};
                    copyQueue.push(currentCopyElement[key]);
                }
            }
        }
    }

    return newObj;
}

// Test case
// 1. 只含有简单类型的Object{a: 1, b:2} => pass
// 2. 简单类型和复杂类型同时存在的情况下的Object => pass:
// var obj1 = {
//     a: 1,
//     b: 2,
//     c: {
//         d: 3,
//         e: {
//             f: 4,
//             g: 5
//         }
//     },
//     h: {
//         i: 6,
//         j: 7
//     }
// };
// 3. 有环的情况下的Object => pass:
// var obj1 = {
//     a: 1,
//     b: 2,
//     c: obj1
// };

然后面试官问了关于我项目经历,之前曾看到你推进过公司的模块化,请问是基于什么背景,你是如何推进的,遇到过什么问题等等。

百度三面就是属于开放性面试。首先面试官跟我讨论了下我二面当中的那道算法题,问我是否解决,环如何解决,然后问是否看过Jquery的源代码怎么进行Object的深复制的?我答看过,是采用递归。他然后问为什么Jquery对环的考虑只判断当前节点是否为根节点?该问题我没回答上来。然后他说现在百度有许多部门,每个部门都有自己的组件库,实现的功能基本相同,但有的用的是原生的JS,有的是使用JQuery,有的是使用React,现在想进行统一,如何解决?我说采用重构,他问了问我重构的思路有哪些。然后他说百度有些项目在线上已经很久了,代码比较陈旧,如果你去重构可能会对线上的版本有冲击,你怎么解决这个问题?我答小幅度重构,然后进行回滚等。然后他问,现在有一个很急的项目,需要一个组件,刚好网上提供的有该组件,你是如何屏蔽该组件与现有项目的差异?我的思路是写一个wrapper屏蔽掉该组件与现有库的差异。然后面试官问,如果引入该组件必须引入一个新的库,如React你该如何选择?引入的话有什么好处坏处?我提供了自己的一些看法。

作为曾经的候选人和面试官,我试图在这篇文章中涵盖你可能会在面试中被问到的最重要的前端开发知识。

  • 首页
  • 所有文章
  • JavaScript
  • HTML5
  • CSS
  • 工具资源
  • 我要投稿
  • 更多频道 »

阿里巴巴UC

UC的面试是最轻松的,以至于我感觉我可能没通过。

UC第一面是一个阿里非常高级的前端工程师,面试大约一小时。首先让我讲了讲我对移动前端的了解?然后我讲了讲移动前端布局,JS方面,性能优化等,大于15分钟。然后他问我如何理解前端工程化?然后我又讲了15分钟等。然后他问我有什么问题吗?我问请问你如何理解前端以及你是如何从pc端转入移动端?他站在黑板上给我讲了20多分钟。包括hybrid技术以及现在流行的RN和Weex,以及阿里现在的业务使用的一些技术以及为什么使用等。第一轮面试结束。

第二轮面试是一个后端的哥们,面试大约30分钟。问了我一些前端优化的方法,以及平常遇到过最大的困难是什么,如何解决。有什么难忘的事等。然后问我有什么问题?我说为什么你不问我前端的基础知识也不问我前端的项目经验?他说没必要,已经了解我的背景了等等,然后带我吃了个饭。

常见的误解

- 导航条 - 首页 所有文章 JavaScript HTML5 CSS 工具资源 我要投稿 更多频道 » - iOS - Java - Android - Python

唯品会

唯品会技术面共5轮,考察的非常全面。前两面都是基础面跟百度大概类似。但是它重点问了我web安全的一些知识,xss和csrf。问我如何解决相关的问题?xss的话主要使用转义,csrf的话项目中我主要使用的是jwt(javascript web token)。然后针对jwt细节问了我20多分钟。第三面是一个产品经理面,说虽然是技术但是还是要了解产品才行。问我有没有用过唯品会app,我说没有。然后问我知道唯品会是干什么的吗?我说一家专做特卖的网站。然后给我一个唯品会的页面问我有什么建议,然后我讲了20多分钟。第四面是技术总监,进来之后先把我吊了一顿。说虽然感觉你前端基础各方面比较好,但是唯品会的业务性非常强,我没有任何电商方面的经验等,让我过来从头做起之类的。

我见过候选人犯的最大错误之一就是准备了一些琐碎的问题,例如“什么是盒子模型”或者“JavaScript 中的 == 和 === 之间的区别是什么”。知道这些问题的答案固然是好,但这并不会告诉面试官来太多有用的信息。

 

腾讯

由于面试的是移动方面的业务,所以主要问的有zepto库的使用,移动端布局,优化,JS的一些基础还有localstorage等。重点还问了一下我是如何在项目中开展测试的(单元测试和e2e测试)。后序面试由于要去深圳总部,所以我推掉了。

相反,在实际的面试中,你可能需要使用 JavaScript、CSS 和 HTML 来编写代码。在你的面试期间,你可能需要实现 UI、构建窗口小部件或使用 Lodash 和 Underscore.js 这样的库编写常用的实用程序函数。例如:

 

总结

针对于前端的面试,还是需要一定的时间去好好梳理,尤其是知识点的细节一定要非常清楚。关于项目经历一定要有一条主线,在这条主线上你做过什么,遇到过什么坑,怎么解决一定要非常清楚等。另外一点算法还是很重要的,推荐大家一本书<<剑指offer>>,面试前我前前后后看过三遍。共勉之!

  • 构建常见的 Web 应用程序的布局和交互,例如类似 Netflix 网站那样的。

  • 实现小部件,如日期选择器、轮播或电子商务网站购物车。

  • 写一个类似 debounce 或深度 clone 对象的函数。

伯乐在线 > WEB前端 - 伯乐在线 > 所有文章 > CSS > 如何准备前端开发者面试

更多免费面试资料扫描下方二维码或搜索qq群号642482868加群领取。

澳门新萄京 10

image

说到库,我看到候选人经常犯的另一个错误是他们需要完全依赖最新的框架来解决面试问题。你可能会想,如果我可以在生产环境中使用 jQuery、React、Angular 等,那为什么就不能在面试中使用它们呢?技术、框架和库会随着时间的推移而发生变化——我更感兴趣的是你是否了解前端开发的底层原理,而不是依赖更高层次的抽象。如果你不能在没有它们的情况下回答面试问题,我希望你至少可以彻底解释和推测这些库背后的原理。

 

总的来说,大部分的面试都涉及实际的编码。

 

 

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转载! 英文出处:blog.jixee.me。欢迎加入翻译小组。

澳门新萄京 11

工作面试很让人头疼。说真的。每个人都痛恨面试。虽然潜力的工作机会并不一定能拿到,但这并不意味着你在这方面会做的很差。因此,这里给出了一些如何准备 前端开发者面试的技巧。

首先明确一下,很多面试因公司、公司规模、面试官以及你获得面试资格的渠道而不同。我曾经经历过这样的面试,在面试官坐下前,他显然并没有看过(或者记得)我的简历内容。另一方面,我也经历过其他一些面试,面试官在面试前已经事先了解了关于我的一切。因此,你对前端开发者面试准备,在实际面试前开始。

面试前,应该假设一下面试官将会深入调查你。确保你的网上作品集和相关的社会关系网络内容都是最新的。无论是个人网站、Behance、还是Dribbble,确保给人的第一印象是好的。这一点甚至可以在你踏入房间之前就能影响到面试官对你的看法。

世事多变,这种准备并非包罗万象的。将这些问题作为参考,同时一定记得——放松。

澳门新萄京 12

图片来自NBC《老友记》截屏

希望你的面试官有点经验,不会用以下这样的问题开场。以防万一,还是准备一些答案。

  • 为什么选择程序员这个职业生涯?
  • 截至目前,你所从事的项目中最喜欢的是哪个?
  • 描述一下你梦想中的研发项目。

另外一些面试官会问一些通用的技术问题,来测试你的技术能力。有可能部分人不知道这些问题是什么意思,而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同,你的答案也会有所不同。这些问题简单易答,因此把这些问题记下来。

  • 描述一下创建一个新网页的过程
  • 怎样减少页面加载时间?
  • 标准和标准体(standards and standards bodies)为什么重要?
  • 你使用怎样一个过程来组织代码?
  • 你喜欢用什么工具来测试代码性能?

既然你从事前端工作,理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题,如果不能回答出来,将对你很不利。

  • CSS 中的 resetting 和 normalizing 之间的区别有哪些?
  • 什么是floats,它是如何工作的?
  • absolute、relative、fixed 和 static 定位的区别是什么?
  • 解释visiblity hidden和display none之间的区别
  • 你是如何修复特定浏览器默认样式的问题?
  • 你是否用过网格系统?目的是?
  • 如果计算CSS权重?
  • 解释如何优化CSS选择器。
  • 为什么需要使用预编译器?
  • 你是如何测试网站的跨浏览器兼容性?

澳门新萄京 13

图片来自Aftercollege.com

现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚,就把下面这些问题牢记在心。

  • 前端开发最好的框架是什么?
  • 响应式web app和原生应用程序的区别是什么?
  • 原生app相对web app的优点是什么?
  • 客户端和服务器端开发的区别是什么?
  • 什么是SASS和LESS?它们是如何工作的?

面试官会更多关注你是如何表达对这些问题的解释。他们会追问支持你的答案的工作案例。前面的问题你可能可以通过记忆而过关,你可能还会遇到这些问题的扩展,但这些答案的深度,将让你与众不同。通过你参与过的实际项目,来展示你的思考过程。

 澳门新萄京 14

图片来自《美国精神病人》的截屏

当面试(或当你在面试过程中)问题会变得更加具体。你在解释、引用实例、阐明经验教训表现地更好,你更可能会从其他面试者中脱颖而出。在这个点上,并不仅仅是你的答案,而是答案的原因。你在原生app和响应式网站间做出决择的原因是什么?两种答案都是可以接受的,但理解你的逻辑,会帮助面试官做出正确的决定并聘请你!

JavaScript

你需要了解 JavaScript,而且是彻底地了解。你面试的职位越高,对语言知识的要求就越高。以下是你应该熟悉的 JavaScript 知识点:

  • 执行上下文,尤其是词法作用域和闭包;

  • 提升、函数和块作用域,以及函数表达式和声明;

  • 绑定——特别是 call、bind、apply 和 this;

  • 对象原型、构造函数和 mixin;

  • 组合和高阶函数;

  • 事件委托和冒泡;

使用 typeof、instanceof 和 Object.prototype.toString 进行类型转换;

使用回调、promise、await 和 async 处理异步调用;

什么时候可以使用函数声明和表达式。

DOM

知道如何遍历和操作 DOM 非常重要,对于重度依赖 jQuery 或者开发了很多 React & Angular 类型应用程序的候选人来说,他们可能会在这个问题上栽跟斗。你可能不会每天都直接接触 DOM,因为我们大多数人都在使用各种抽象。在不使用第三方库的情况下,你需要知道如何执行以下这些操作:

  • 使用 document.querySelector 选择或查找节点,在旧版浏览器中使用 document.getElementsByTagName;

  • 上下遍历——Node.parentNode、Node.firstChild、Node.lastChild 和 Node.childNodes;

  • 左右遍历——Node.previousSibling 和 Node.nextSibling;

  • 操作——在 DOM 树中添加、删除、复制和创建节点。你应该了解如何修改节点的文本内容以及切换、删除或添加 CSS 类名等操作;

  • 性能——当有很多节点时,修改 DOM 的成本会很高,你至少应该知道如何使用文档片段和节点缓存。

CSS

至少,你应该知道如何在页面上布局元素,如何使用子元素或直接后代选择器来定位元素,以及什么时候该用类、什么时候该用 ID。

  • 布局——安排彼此相邻的元素的位置,以及如何将元素布置成两列或三列;

  • 响应式设计——根据浏览器宽度大小更改元素的尺寸;

  • 自适应设计——根据特定断点更改元素的尺寸;

  • 特异性——如何计算选择器的特异性,以及级联如何影响属性;

  • 适当的命名空间和类命名。

HTML

知道哪些 HTML 标签最能代表你正在显示的内容以及相关属性,应该掌握手工知识。

  • 语义标记;

  • 标记属性,例如 disabled、async、defer 以及何时使用 data-*;

  • 知道如何声明 doctype(大多数人不是每天都会写新页面,所以可能会忘了这个)以及可以使用哪些元标签;

  • 可访问性问题,例如,确保输入复选框具有更大的响应区域(使用标签“for”)。另外还有 role=“button”、role=“presentation”,等等。

系统设计

在系统设计方面,通常涉及 MapReduce、分布式键值存储系统或 CAP 定理等知识。虽然前端工程师日常不需要深入了解如何设计这类系统,但在被要求设计出常见应用程序的前端架构时,你也不应该感到惊讶。这些问题通常含糊不清,比如“设计一个像 Pinterest 这样的网站”或者“如何构建购物结账服务?”。以下是需要考虑的知识点:

  • 渲染——客户端渲染、服务器端渲染和全局渲染;

  • 布局——如果你正在设计被多个开发团队使用的系统,需要考虑进行组件化,以及是否需要开发团队通过指定标记来使用组件;

  • 状态管理,例如在单向数据流或双向数据绑定之间做出选择。你还应该考虑你的设计是采用被动式还是反应式编程模型,以及组件如何相互关联,例如是 Foo->Bar 还是 Foo->Bar;

  • 异步——你的组件可能需要与服务器进行实时的通信。在设计时需要考虑使用 XHR 或双向调用。如果你的面试官要求你支持旧浏览器,那么你需要在隐藏 iFrame、script 标签或 XHR 之间做出选择。如果没有,你可以建议使用 websocket,或者使用服务器发送事件,这样会更好;

  • 关注点分离——Model-View-Controller、Model-View-ViewModel和 Model-View-Presenter模式;

多设备支持——你的实现是否同时支持 Web、移动 Web 和混合应用程序,还是为每一种场景提供单独的实现?如果你正在构建像 Pinterest 这样的网站,你可能会考虑在 Web 上使用三列,但在移动设备上只使用一列,你的设计将如何处理这个问题;

资产文件交付——在大型应用程序中,独立团队拥有自己的代码库是常有的事。这些不同的代码库可能彼此依赖,每个代码库通常都有自己的管道来发布代码变更。你的设计需要考虑如何基于依赖项进行资产文件的构建、测试(单元测试和集成测试)和部署。你还需要考虑如何通过 CDN 交付资产文件或者内联它们来减少网络延迟。

Web 性能

除了通用编程最佳实践之外,你应该期望访问者查看你的代码或设计及其性能影响。它曾经足以将 CSS 置于文档的顶部,而 JS 脚本位于页面底部,但 Web 正在快速移动,你应该熟悉这个领域的复杂性。

  • 关键渲染路径;

  • Service Worker;

  • 图像优化;

  • 延迟加载和捆绑拆分;

  • HTTP/2 和服务器推送的一般含义;

  • 何时预取和预加载资源;

  • 减少浏览器回流以及何时将元素提升到 GPU;

  • 浏览器布局、组合和绘制之间的区别。

数据结构和算法

这个可能有点争议,但对 Big-O 时间复杂性和常见运行时间 和 O有一个基本的了解对你来说不会是坏事。单页应用程序现在非常常见,所以了解内存管理等方面的知识是有帮助的。例如,如果你被要求构建客户端拼写检查程序,那么了解常见的数据结构和算法将会让你的任务变得轻松许多。

我不是说你一定需要念一个计算机学位,但这个行业已经从构建简单的网页转移到了计算机科学。网上有很多资源可以让那个你快速掌握基础知识。

一般的 Web 知识

你需要掌握一些构成 Web 的技术和范式。

  • HTTP 请求——GET 和 POST 以及相关标头,如 Cache-Control、ETag、Status Codes 和 Transfer-Encoding;

  • REST 与 RPC;

  • 安全性——何时使用 JSONP、COR 和 iFrame。

总结

对 Web 开发人员或工程师来说,构建 Web 应用程序需要掌握大量的知识。不要被知识的深度所限制,而是要保持开放的心态去学习所有复杂的部分。

除了这里涉及的技术主题之外,你还需要讨论过去参与的项目,描述发生了哪些有趣的事情以及做出了哪些权衡。

自己是从事五年的前端工程师了,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的同学。

如果你依然在编程的世界里迷茫,不知道自己的未来规划,可以加入web前端学习交流群:731771211 里面可以与大神一起交流并走出迷茫。新手可进群免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行!群里不停更新最新的教程和学习方法(进群送web前端系统学习路线,详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击:加入

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京45分钟高分虏获offer,唯品会的体味

上一篇:澳门新萄京:初识js下的定时器,管理页面的 下一篇:没有了
猜你喜欢
热门排行
精彩图文