Web前端面试常见问题

备注: 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 src="a.png"><input id="img2" name="img" type="radio"><img src="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" src="a.jpg"><img id="img2" src="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 到页面加载完的过程中都发生了什么事情 —— 网络优化篇

Web前端面试常见问题相关推荐

前端面试技巧和注意事项_2020大厂web前端面试常见问题总结
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题.通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者. 1.web前端项目的结构是怎样的?文件有哪些命名规范? 项 ...
Web前端面试自我介绍对话技巧注意事项
大家在学会了web前端技术后,当然是要准备找一个适合自己的web前端工作了,那么面试环节是必不可少的,有一个良好的自我介绍表述,在HR心中也能加分不少,接下来小编就为大家介绍一下Web前端面试自我介绍 ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
web前端面试问答_Web服务面试问答
web前端面试问答在这篇文章中,我们涵盖了您需要熟悉的Web服务概念的几乎所有部分,以回答任何层级问题. 您还将在分类中找到最佳的Web服务面试问题和答案,因此只有在必要时才可以使用特定条款. 今天 ...
2018web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
web前端面试总结(自认为还算全面哈哈哈哈哈！！！！）
web前端面试总结(自认为还算全面哈哈哈哈哈!!!!) 一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex ...
web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
Web前端面试指导(完结)
首先感谢网友对我的关注,对智学无忧的关注!历经个多月,终于将web前端面试指导的课程全部更新完毕!希望对学习前端和面试前端的同学有帮助.智学无忧祝大家前程无忧! 面试真题学习地址 1. Web前端面 ...
web前端面试-10大经典题（HTML基础）
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用? HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type,网页文件的文档类型 ...

Web前端面试常见问题

Web前端面试常见问题相关推荐

最新文章

热门文章