前端开发面试题之综合篇

“每18至24个月,前端都会难一倍”

——赫门 “2015深JS大会《前端服务化之路》主题演讲”

题目&答案

  • 你遇到过比较难的技术问题是什么?你是如何解决的?
  • 是否知道关于设计模式中的Singleton,Factory,Strategy,Decrator?
  • 常使用的库有哪些?常使用的前端开发工具有哪些?开发过什么应用或组件?
  • 页面重构怎么操作?
网站重构:
在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。
也就是说在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。
//
传统网站的重构通常是:
表格(table)布局改为 div+css
使网站前端兼容于现代浏览器(针对于不合规范的css)
对于移动平台的优化
针对SEO进行优化
//
深层次的网站重构应该考虑的方面:
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如 VB)
增强用户体验
//
通常来说对于速度的优化也包含在重构中
压缩js、css、image等前端资源(通常由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于js、DOM的优化
HTTP服务器的文件缓存
  • 列举IE与其他浏览器不一样的特性
触发事件的元素被认为是目标(target)。而在IE中,目标包含在event对象的srcElement属性;
获取字符代码、如果按键代表一个字符(shift、ctrl、alt除外),IE的keyCode会返回字符代码(Unicode),DOM中按键的代码和字符是分离的,要获取字符代码,需要使用charCode属性;
阻止某个事件的默认行为,IE 中阻止某个事件的默认行为,必须将 returnValue 属性设置为 false,Mozilla 中,需要调用 preventDefault() 方法;
停止事件冒泡,IE 中阻止事件进一步冒泡,需要设置 cancelBubble 为 true,Mozzilla 中,需要调用 stopPropagation();
  • “99%的网站都需要被重构”是哪本书上写的?
《网站重构:应用Web标准进行设计(第2版)》
  • 什么叫优雅降级和渐进增强?
优雅降级:
Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如:border-shadow
//
渐进增强:
从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
如:默认使用flash上传,但如果浏览器支持 HTML5 的文件上传功能,则使用HTML5实现更好的体验;
  • 是否了解公钥加密和私钥加密?
一般情况下私钥用于对数据进行签名,公钥用于对签名进行验证;
HTTP网站在浏览器端用公钥加密敏感数据,然后在服务器端再用私钥解密。
  • Web应用从服务器主动推送Data到客户端有哪些方式?
HTML5提供的WebSocket
不可见的iframe
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
<script>标签的长时间连接(可跨域)
  • 对Node的优点和缺点提出自己的看法?
优点:
因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
//
缺点:
Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
  • 你用过哪些前端性能优化的方法?
(1)减少http请求次数:CSS Sprites,JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数.
(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4)当需要设置的样式很多时设置className而不是直接操作style。
(5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。
(8)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
//
对普通网站有一个统一的思路,就是尽量向前端优化、减少数据库请求、减少磁盘I/O。
向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。
  • HTTP 状态码有哪些?分别代表什么意思?
完整版
  1**(信息类):表示接收到请求并且继续处理
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本
//
  2**(响应成功):表示动作被成功接收、理解和接受
    200——表明该请求被成功地完成,所请求的资源发送回客户端
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到,但返回信息为空
    205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求
//
  3**(重定向类):为了完成指定的动作,必须接受进一步处理
    300——请求的资源可在多处得到
    301——本网页被永久性转移到另一个URL
    302——请求的网页被转移到一个新的地址,但客户访问仍继续通过原始URL地址,重定向,新的URL会在response中的Location中返回,浏览器将会使用新的URL发出新的Request。
    303——建议客户访问其他URL或访问方式
    304——自从上次请求后,请求的网页未修改过,服务器返回此响应时,不会返回网页内容,代表上次的文档已经被缓存了,还可以继续使用
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码,现行版本中不再使用
    307——申明请求的资源临时性删除
//
  4**(客户端错误类):请求包含错误语法或不能正确执行
    400——客户端请求有语法错误,不能被服务器所理解
    401——请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
    HTTP 401.1 - 未授权:登录失败
      HTTP 401.2 - 未授权:服务器配置问题导致登录失败
      HTTP 401.3 - ACL 禁止访问资源
      HTTP 401.4 - 未授权:授权被筛选器拒绝
    HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败
    402——保留有效ChargeTo头响应
    403——禁止访问,服务器收到请求,但是拒绝提供服务
    HTTP 403.1 禁止访问:禁止可执行访问
      HTTP 403.2 - 禁止访问:禁止读访问
      HTTP 403.3 - 禁止访问:禁止写访问
      HTTP 403.4 - 禁止访问:要求 SSL
      HTTP 403.5 - 禁止访问:要求 SSL 128
      HTTP 403.6 - 禁止访问:IP 地址被拒绝
      HTTP 403.7 - 禁止访问:要求客户证书
      HTTP 403.8 - 禁止访问:禁止站点访问
      HTTP 403.9 - 禁止访问:连接的用户过多
      HTTP 403.10 - 禁止访问:配置无效
      HTTP 403.11 - 禁止访问:密码更改
      HTTP 403.12 - 禁止访问:映射器拒绝访问
      HTTP 403.13 - 禁止访问:客户证书已被吊销
      HTTP 403.15 - 禁止访问:客户访问许可过多
      HTTP 403.16 - 禁止访问:客户证书不可信或者无效
    HTTP 403.17 - 禁止访问:客户证书已经到期或者尚未生效
    404——一个404错误表明可连接服务器,但服务器无法取得所请求的网页,请求资源不存在。eg:输入了错误的URL
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖,请求资源不可访问
    407——类似401,用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态,请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求长。
//
  5**(服务端错误类):服务器不能正确执行一个正确的请求
    HTTP 500 - 服务器遇到错误,无法完成请求
      HTTP 500.100 - 内部服务器错误 - ASP 错误
      HTTP 500-11 服务器关闭
      HTTP 500-12 应用程序重新启动
      HTTP 500-13 - 服务器太忙
      HTTP 500-14 - 应用程序无效
      HTTP 500-15 - 不允许请求 global.asa
      Error 501 - 未实现
  HTTP 502 - 网关错误
  HTTP 503:由于超载或停机维护,服务器目前无法使用,一段时间后可能恢复正常
  • 一个页面从输入URL到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
注:这道题胜在区分度高,知识点覆盖广,再不懂的人也能答出一些。高手可以根据自己擅长的领域自由发挥,从URL规范、HTTP协议、DNS、CDN、数据查询、浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等;
//
详细版:
(1)浏览器会开启一个线程来处理这个请求,对 URL 分析判断,如果是 http 协议就按照 web 方式来处理;
(2)调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法; 
(3)通过 DNS 解析获取网址的 IP 地址,设置 UA 等信息发出第二个 GET 请求;
(4)进行 HTTP 协议会话,客户端发送报头(请求报头);
(5)进入到 web 服务器上的 Web Server,如 Apache、Tomcat、Node.js 等服务器;
(6)进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
(7)处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改事件对比,一致则返回304;
(8)浏览器开始下载 html 文档(响应报头,状态码200),同时使用缓存;
(9)文档树建立,根据标记请求所需指定 MIME 类型的文件(比如css、js),同时设置 cookie;
(10)页面开始渲染 DOM ,JS 根据 DOM API 操作 DOM ,执行事件绑定等,页面显示完成;
//
简洁版:
浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;
服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、CSS、JS、image等);
浏览器对加载到的资源(HTML、CSS、JS等)进行语法解析,建立相应的内部数据结构(如 HTML 的 DOM );
载入解析到的资源文件,渲染页面,完成。
  • 对前端工程师这个职位是怎么理解的?它的前景怎么样?
前端是最贴近用户的开发人员,比后端、数据库、产品经理、经营、安全都近。
(1)实现界面交互
(2)提升用户体验
(3)有了 Node.js ,前端可以实现服务器端的一些事情
//
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好。
参与项目,快速高质量完成实现效果图,精确到1px;
与团队成员,UI设计,产品经理的沟通;
做好的页面结构,页面重构和用户体验;
处理hack,兼容、写出优美的代码格式;
针对服务器的优化、拥抱最新前端技术。
  • 平时如何管理你的开发项目?
前期团队必须确定好全局样式(globe.css),编码模式(utf-8)等;
编写习惯必须一致(例如都采用继承式的写法,单样式都写成一行);
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面、模块、开始和结束);
CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css);
JS 分文件夹存放,命名以该 JS 功能为准的英文翻译;
图片采用整合的 images.png png8 格式文件使用,尽量整合在一起使用以方便将来的管理。
  • 移动端(Android iOS)怎么做好用体验?
清晰的视觉纵线
信息的分组、极致的减法
利用选择代替输入
标签及文字的排布方式
依靠明文确认密码
合理的键盘利用
  • 你对加班的看法?
加班就想借钱,原则应当是——救急不救穷!
  • 从打开 App 到刷新出内容,整个过程中都发生了什么,如果感觉慢,怎么定位问题,怎么解决?
  • 除了前端以外还了解什么其他技术?你最厉害的技能是什么?
  • 你怎么看待 Web App、Hybrid App、Native App?
  • 谈谈你对移动前端开发的理解。(和Web前端开发的主要区别是什么)
  • 说说最近流行的一些东西吧?
ES6\Node\WebAssembly\MVVM\Web Components\React\React Native\Angular2.0\Webpack
  • 知道什么是 SEO 吗?怎么优化?各种 meta data 是什么含义?
  • 谈谈你对 “全端工程师” 和 “全栈工程师” 的理解。
全端是横向的,全栈是纵向的。
//
全端即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要扩展Android开发和iOS开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深。
全栈可以说是最适合初创公司的一种发展类型,广义上认为是从前端干到后端,从开发干到运维;而狭义上的全栈特指使用js语言从前端写到假设在NodeJS上的后端,前后端统一语言,统一编程模型,甚至共用同一套代码。
  • 是否了解 Web 注入攻击,说下原理,最常见的两种攻击(XSS 和 CSRF)了解到什么程度?
  • 项目中遇到过哪些印象深刻的技术难题?具体是什么问题?怎么解决的?
  • 最近在学什么东西?
  • 你的优点是什么?缺点是什么?
  • 能谈谈未来3、5年给自己的规划吗?

系列:
前端开发面试题之HTML
前端开发面试题之CSS
前端开发面试题之JavaScript


资料搜集整理自 网络
同时发布在 GitHub-前端开发面试题之综合篇GitBook-《WEB-DE》前端开发面试题之综合篇

推荐阅读更多精彩内容

  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    袁俊亮技术博客阅读 3,439评论 0 73
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 1,611评论 1 15
  • 标签的长时间连接(可跨域) 对Node的优点和缺点提出了自己的看法? *(优点)因为Node是基于事件驱动和无阻塞...
    前端小姐姐aymin阅读 757评论 1 10
  • JavaScript 介绍js的基本数据类型。 Undefined、Null、Boolean、Number、St...
    cuikangjie阅读 121评论 0 3
  • 应笑我 倘无悲天悯人心,焉有几分诚?嬉笑玩闹空成了逢场作戏。念念相续,念念烦恼,何时看真自我?今世无数反复己招自烦...
    舍舟阅读 80评论 0 1