图片 6

怎么筹划前端开拓者面试

如何准备前端开发者面试

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

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

图片 1

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

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

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

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

图片 2

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

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

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

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

  • 描述一下创建一个新网页的过程
  • 怎样减少页面加载时间?
  • 标准和标准体(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 收藏
评论

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的缩写,意为“应用”)。
自从触屏式手机和平板电脑开始流行起来后(…

前端灰度效果的实现(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%3A%2F%2Fjuejin.im%2Fentry%2F5924079d570c350069cb9349)

前端导航

关于作者:cucr

图片 5

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

图片 6