Web前端面试常见问题

曾经终败给现在 2022-06-10 01:30 275阅读 0赞

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

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

常见问题：  
**● Q: 你在昨天/本周学到了什么？**

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

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

**A: 安全性：**  
\- ○ [从“黑掉Github”学Web安全开发][Github_Web]  
\- ○ [零基础如何学习 Web 安全？][Web]  
\- ○ [Web前端－－黑客技术揭秘（菜鸟知识）][Web 1]  
\- ○ [Web前端攻防][Web 2]  
\- ○ [前端冷知识集锦,很多都是web安全能用到的小技巧][web]

**高性能：**  
\- ○ [雅虎的34条黄金准则][34]  
\- ○ [【高性能前端1】高性能HTML][1_HTML]  
\- ○ [【高性能前端2】高性能CSS][2_CSS]  
\- ○ [【高性能前端3】高性能JavaScript][3_JavaScript]  
\- ○ [【高性能前端4】Appcache Facts 中译版][4_Appcache Facts]

SEO：  
\- ○ [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制作中常见应用举例][CSS _web]  
● [译)理解“渐进增强(Progressive Enhancement)”][Progressive Enhancement]  
● [認識優雅降級與漸進增強][Link 1]  
● [优雅降级和渐进增强][Link 2]  
● [渐进增强、优雅降级][Link 3]  
● [理解前端开发中的优雅降级及渐进增强][Link 4]  
● [http://www.w3cfuns.com/blog-5426413-5396597.html][http_www.w3cfuns.com_blog-5426413-5396597.html]  
● [渐进增强和优雅降级之间的有什么不同？][Link 5]

**Q: 请解释一下什么是“语义化的 HTML”。**  
A:  
○ [如何理解 web 语义化][web 1]  
○ [关于HTML语义化的一些理解][HTML]  
○ [再谈语义化][Link 6]  
○ [语义化标签的实战意义][Link 7]  
○ [关于Web语义化—张振强][Web 3]  
○ [语义化标签规范][Link 8]

**Q: 你如何对网站的文件和资源进行优化？**  
○ 期待的解决方案包括：  
\- 文件合并  
\- 文件最小化/文件压缩  
\- 使用 CDN 托管  
\- 缓存的使用  
\- 其他

**Q: 为什么利用多个域名来提供网站资源会更有效？**  
\- ○ 浏览器同一时间可以从一个域名下载多少资源？

**Q: 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）**

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

*  ○ 建议这个项目使用像 EditorConfig ([http://editorconfig.org/][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][http_www.cnblogs.com_coco1s_p_4034937.html]

**Q: 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？**  
A: [http://blog.csdn.net/laney1206/article/details/8591264][http_blog.csdn.net_laney1206_article_details_8591264]

**Q: 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程**  
A:  
[从输入 URL 到页面加载完成的过程中都发生了什么事情？][URL]  
[从FE的角度上再看输入url后都发生了什么][FE_url]  
[当你输入一个网址，实际会发生什么?][Link 9]  
[从输入 URL 到页面加载完的过程中都发生了什么事情 —— 网络优化篇][URL _ _]

[Rebecca Murphey]: http://rmurphey.com/
[Baseline For Front-End Developers]: http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
[Github_Web]: http://coolshell.cn/articles/11021.html
[Web]: http://www.zhihu.com/question/21606800
[Web 1]: http://www.myhack58.com/Article/60/61/2014/48629.htm
[Web 2]: http://drops.wooyun.org/tips/2686
[web]: http://www.toolmao.com/things_you_dont_know_about_frontend
[34]: http://www.ha97.com/2710.html
[1_HTML]: http://www.alloyteam.com/2012/10/high-performance-html/
[2_CSS]: http://www.alloyteam.com/2012/10/high-performance-css/
[3_JavaScript]: http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/
[4_Appcache Facts]: http://www.alloyteam.com/2012/10/appcache-facts/
[SEO]: http://www.imooc.com/learn/204
[CSS _web]: http://www.zhangxinxu.com/wordpress/2010/04/css-%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E5%9C%A8web%E5%88%B6%E4%BD%9C%E4%B8%AD%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/
[Progressive Enhancement]: http://ued.taobao.org/blog/2008/10/understanding-progressiveen-hancement-chs-translation/
[Link 1]: http://augus-blog.logdown.com/posts/143403-graceful_degradation_and_progressive_enhancement
[Link 2]: http://hanazawakana.iteye.com/blog/1711556
[Link 3]: http://blog.csdn.net/xiongzhengxiang/article/details/7999525
[Link 4]: http://www.biaodianfu.com/graceful-degradation-progressive-enhancement.html
[http_www.w3cfuns.com_blog-5426413-5396597.html]: http://www.w3cfuns.com/blog-5426413-5396597.html
[Link 5]: http://segmentfault.com/q/1010000000264469
[web 1]: http://www.zhihu.com/question/20455165
[HTML]: http://www.cnblogs.com/season-huang/p/3548514.html
[Link 6]: http://ued.ctrip.com/blog/?p=2735
[Link 7]: http://ued.sina.com.cn/?p=157
[Web 3]: http://studio.ewe.com.cn/?p=455
[Link 8]: http://hikejun.com/work/qq/spec/html_reference.html
[http_editorconfig.org]: http://editorconfig.org/
[http_www.cnblogs.com_coco1s_p_4034937.html]: http://www.cnblogs.com/coco1s/p/4034937.html
[http_blog.csdn.net_laney1206_article_details_8591264]: http://blog.csdn.net/laney1206/article/details/8591264
[URL]: http://fex.baidu.com/blog/2014/05/what-happen/
[FE_url]: http://div.io/topic/609
[Link 9]: http://blog.jobbole.com/33951/
[URL _ _]: http://oilbeater.com/%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3/2014/05/09/from-url-to-webpage.html