Skip to content

Latest commit

 

History

History
214 lines (165 loc) · 9.51 KB

4.md

File metadata and controls

214 lines (165 loc) · 9.51 KB
Raw

前端工作面试常见问题

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

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

###常见问题：

　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　 “优雅降级”观点

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

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

　“渐进增强”观点

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

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

  • Q: 请解释一下什么是“语义化的 HTML”。

    A:

  • 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

A: