为了账号安全,请及时绑定邮箱和手机立即绑定

前端面试题汇总解析之一

前端工作面试常见问题

备注: Rebecca Murphey 的 Baseline For Front-End Developers 是你在准备面试前应该阅读的绝佳资源。

记住: 很多问题都是开放的,可以引发有趣的讨论。这比直接的答案更能体现此人的能力。

常见问题:

Q: 你在昨天/本周学到了什么?

Q: 编写代码的哪些方面能够使你兴奋或感兴趣?

Q: 在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的?

A: 安全性:

从“黑掉Github”学Web安全开发
零基础如何学习 Web 安全?
Web前端--黑客技术揭秘(菜鸟知识)
Web前端攻防
前端冷知识集锦,很多都是web安全能用到的小技巧
高性能:

雅虎的34条黄金准则
【高性能前端1】高性能HTML
【高性能前端2】高性能CSS
【高性能前端3】高性能JavaScript
【高性能前端4】Appcache Facts 中译版
SEO:

SEO在网页制作中的应用
Q: 谈谈你喜欢的开发环境。(例如操作系统,编辑器,浏览器,工具等等)

A:

我要攒钱买MBPR;
操作系统:windows,linux;
编辑器:Sublime Text,以前用过一段时间Vim,后来转到Sublime Text;
浏览器:Chrome,Firefox;
工具:Photoshop,Eclipse,Fiddler 等;
前端框架:Bootstarp,jQuery等。
Q: 你最熟悉哪一套版本控制系统?

A:

Git
SVN
Q: 你能描述一下当你制作一个网页的工作流程吗?

Q: 你能描述一下渐进增强和优雅降级之间的不同吗?

如果提到了特性检测,可以加分。
A:

渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
 区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。  “优雅降级”观点

 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

 在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

 “渐进增强”观点

 “渐进增强”观点则认为应关注于内容本身。

 内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

CSS “渐进增强”在web制作中常见应用举例
译)理解“渐进增强(Progressive Enhancement)”
認識優雅降級與漸進增強
优雅降级和渐进增强
渐进增强、优雅降级
理解前端开发中的优雅降级及渐进增强
http://www.w3cfuns.com/blog-5426413-5396597.html
渐进增强和优雅降级之间的有什么不同?
Q: 请解释一下什么是“语义化的 HTML”。

A:

如何理解 web 语义化
关于HTML语义化的一些理解
再谈语义化
语义化标签的实战意义
关于Web语义化—张振强
语义化标签规范
Q: 你如何对网站的文件和资源进行优化?

期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用
其他
Q: 为什么利用多个域名来提供网站资源会更有效?

浏览器同一时间可以从一个域名下载多少资源?
Q: 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

Q: 如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做?

建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
为了保持一致性,接受项目原有的风格
直接使用 VIM 的 retab 命令
Q: 请写一个简单的幻灯效果页面

如果不使用JS来完成,可以加分。
<!doctype htm l>
<html>
<head>
<style>
img {
display: none;
width: 100px;
height: 100px;
}
input:checked + img {
display: block;
}
input {
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
}
</style>
</head>
<body>
<div id="cont">
<input id="img1" name="img" type="radio" checked="checked">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.png">
<input id="img2" name="img" type="radio">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="b.png">
</div>
<div id="nav">
<label for="img1">第一张</label>
<label for="img2">第二张</label>
</div>
</body>
</html>
可以这样写,但是不能支持所有浏览器。

<!DOCTYPE HTML>
<html>
<head>
<style>

cont {

position: relative;
height: 100px;
}
img {
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
}
img:first-child,
img:target {
z-index: 2;
}
</style>
</head>
<body>
<div id="cont">
<img id="img1" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.jpg">
<img id="img2" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="b.jpg">
</div>
<div>
<a href="#img1">one</a>
<a href="#img2">two</a>
</div>
</body>
</html>
Q: 你都使用哪些工具来测试代码的性能?

Profiler, JSPerf, Dromaeo
Q: 如果今年你打算熟练掌握一项新技术,那会是什么?

Q: Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别?

Q: 请谈一下你对网页标准和标准制定机构重要性的理解。

A: “一次编码。随处运行”。
网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。 摘自:http://www.cnblogs.com/coco1s/p/4034937.html

Q: 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

A: http://blog.csdn.net/laney1206/article/details/8591264

Q: 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

A:

从输入 URL 到页面加载完成的过程中都发生了什么事情?
从FE的角度上再看输入url后都发生了什么
当你输入一个网址,实际会发生什么?
从输入 URL 到页面加载完的过程中都发生了什么事情 —— 网络优化篇

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7246
获赞与收藏
3476

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消