前端开发面试题之综合篇

作者: 晓松 | 来源:发表于2016-04-10 22:28 被阅读8253次

    “每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》前端开发面试题之综合篇

    相关文章

      网友评论

      • 6cc01719e0fe:不错不错,收藏了。

        推荐下,源码圈 300 胖友的书单整理:http://t.cn/R0Uflld


      • 饥人谷_青青: :blush: 恭喜被评选为饥人谷2016.04.10最优技术博客!
        :sunglasses: 前端的小伙伴可以加入前端技术交流群: 104892730 有各路前端大神~
      • 伊然凝望:里面的知识点太多了。
      • 3af5a570e6fd:我正在学习web前端的相关知识,太有帮助了,感谢!
      • 小朦朦:总结不错,好几个问题都遇到过
      • 化猿:输入URL,发生了啥的详细版还不够详细:smile:
      • 潇潇荷:亲,在首页上看到你的头像,我还以为屏幕上趴了小蚊纸,该配眼镜了:sweat::sweat::smile::smile:
        晓松:@潇潇荷 小蚊纸?! :joy: :joy:
      • 大学女混混儿:刚开始接触前端,虽然只知道div+css.还是有很亲切的感觉!
        晓松:@大学女混混儿 其实蛮有意思的~

      本文标题:前端开发面试题之综合篇

      本文链接:https://www.haomeiwen.com/subject/xwqblttx.html