Front-end-Developer-Interview-Questions

前端工作面试问题

常见问题

  • 你能描述当你制作一个网页的工作流程吗?

    1.搭建环境，例如：npm init
    2.提取罗列出该网页应该具有哪些特性
    3.描述出改网页的UI流程图
    4.开始编码

  • 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?

    假设每一个样式文件作用于网站的不同模块。首先，我会为每一个样式文件添加命名前缀，以防样式名冲突。其次，我会将这些文件整合到一个文件中（gulp/webpack），以提高网站的下载速度。若有必要，可以启用CDN缓存加速。

  • 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?

    渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。（相当于向上兼容）

    优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。（相当于向下兼容）

  • 你如何对网站的文件和资源进行优化?

    • 压缩并打包 JS/CSS/HTML 文件，可以使用 webpack 或者 gulp
    • 雪碧图（Image sprite），把许多背景图片整合到一张图片文件中
    • gzip，在服务端开启 gzip 内容压缩
    • Cache，在服务端为每个文件头指定 Cache-Control 属性
    • CDN，把资源放到不同的域名上以减少最大连接数的限制

  • 浏览器同一时间可以从一个域名下载多少资源？（有什么例外吗？）

    一个域名同一时间可以发送6-8个请求，不同浏览各不相同。例外： HTTP/2 协议，浏览器只建立一个连接去下载资源

  • 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

    • 将<link>放到<head>区域内，这会让浏览器首先加载样式文件
    • 将<script>放到文档的最底部，以防止浏览器进行渲染阻塞
    • 在 HTML5 中开启async属性，在script标签指定async属性来使得浏览器执行代码和解析页面在同一时间进行
    • 不要使用复杂的 css 查询，比如大量复杂的#foo ul li .bar会非常消耗浏览器解析的时间

  • 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？

    浏览器在外部样式加载之前渲染默认样式（无样式），从默认样式到外部样式的过渡状态称为 FOUC。引起原因：将link标签放到了head标签之后，或使用了@import，因为是异步加载样式列表的

  • 什么是跨域资源共享 (CORS)？它用于解决什么问题?

    跨域资源共享，CORS，是一个标准机制能够让你使用普通的 ajax 请求就能够得到不同域名下的资源。启用的方式很简单：在服务端为你的文件头添加如下属性

    1
    Access-Control-Allow-Origin: http://my-domain-name.com

HTML 问题

  • doctype(文档类型) 的作用是什么？

    DTD(Document Type Definition)—文档类型定义
    通过在HTML文件顶部定义<!DOCTYPE html>，来告诉浏览器当前正在使用的浏览器版本，并且它会使浏览器以标准的模式解析页面。如果不声明<!DOCTYPE html>可能会在一些老浏览器导致怪异模式。

  • HTML 和 XHTML 有什么区别？

    XHTML 表示可扩展的 HTML.如果页面使用 ‘application/xhtml+xml’会使得浏览器认为该文件是一个 XML 文件，在 IE 6,7,8会产生一些不可预知的错误。

  • 请描述 cookies、sessionStorage 和 localStorage 的区别

    Cookie

    • 可以通过设置http-only属性来控制 cookie 是否能通过 javascript 进行读取
    • 最大只有 4KB
    • 每一个域名有限制的数量
    • 通过数据包在 header 进行传递
    • 能够被服务端发送或者设置

    Session 和 local storage 都是 HTML5 的 API ，都被统称为 web storage.当 session 清除时，session storage 会删除所有的数据，而 local storage 不会。Web storage 在每一个域名中的存储大小为 5MB—10MB

  • 请解释 <script>、<script async> 和 <script defer> 的区别

    <script> - 浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载
    <script async> - 有了 async 属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行
    <script defer> - 有了 defer 属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded 事件触发执行之前

CSS 问题

  • 请解释浮动 (Floats) 及其工作原理

    浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样。
    常见的解决方案：

    1
    2
    3
    4
    5
    .clearfix:after{
      display:block; 
      content:''; 
      clear:both; 
    }

  • 使用 CSS 预处理器的优缺点有哪些？

    SCSS
    优势：为书写模块化的 CSS 提供了更多种的方式，比如：继承、变量…
    劣势：额外的学习成本，需要设置工作环境

  • 请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局

    盒模型标示元素是由四个部分组成：margin. border, padding, content.

    • Margin - 指从自身边框到另一个容器边框之间的距离，就是容器外距离
    • border - 在 margin 和 padding 之间的一层
    • padding - 指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离

    • content - 容器的内容

      定义box-sizing时，可以使用content-box和border-box来转化盒模型

    • content-box - 宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
    • border-box - 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  • 为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

    响应式设计 - 用一套布局适应多个设备
    优势：易于维护
    劣势：屏幕尺寸有很多，只能提供一个基本舒适的，并不是最好的用户体验
    自适应设计 - 用多个布局适应多个设备
    优势：在不同的设备上面能够提供最好的体验
    劣势：维护成本太高

JS 问题

  • 请解释 JavaScript 中 this 是如何工作的

    this 指向当前的作用域，构造函数中的this指向新创建的对象

  • 请解释原型继承 (prototypal inheritance) 的原理

    当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止
    ES5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var Person = function(name){
        this.name = name;
    }
    var John = function(name){
        Person.call(this, name);
    }
    John.prototype = Object.create(Person.prototype); 
    John.prototype.constructor = Person;

    ES6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class Person{
        constructor(name){
            this.name = name;
        }
    };
    class John extends Person{
        constructor(name){
            suepr(name);
        }
    }

  • 什么是闭包 (closure)，如何使用它，为什么要使用它

    闭包的定义（几本书中不同的定义）：

    1. 闭包是指有权访问另一个函数作用域中的变量的函数

    2. 函数对象可以通过作用域关联起来，函数体内的变量都可以保存在函数作用域内，所有的javascirpt函数都是闭包

    3. 闭包是基于词法作用域书写代码时所产生的必然结果

    4. 函数可以通过作用域链相互关联起来，函数内部的变量可以保存在其他函数作用域内，这种特性在计算机科学文献中称为闭包

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      for (var i = 1; i <= 5; i++) {
          setTimeout( function timer() {
              console.log(i);  
          }, 1000 );
      }
      //输出结果是: 5个6
      for (var i = 1; i <= 5; i++) {
          (function(i){
              setTimeout( function () {
                    console.log(i);
                },  1000 );
          })(i);
       }
       //输出：1-5 每循环一次回调中都引用了参数i, 而在上一个循环中，每个回调引用的都是一个变量i
       for (let i = 1; i <= 5; i++) {
          setTimeout( function timer() {
              console.log(i);  
          }, 1000 );
      }
      //改写 let创建局部作用域

  • 请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

    宿主对象 - 浏览器特定的特征，Chrome 和 IE 的 DOM 对象就不一样
    原生对象 - javascript 的核心特征，比如 array, object

  • 请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程

    假定只有 HTTP 请求，没有代理
    1.浏览器查询缓存，如果文件存在于缓存之中并且没有过期，则渲染
    2.操作系统通过 DNS 查询已给出 URL 的 IP 地址，并且将其返回给浏览器
    3.如果这个 URL 存在，浏览器与服务器建立 TCP 连接
    4.浏览器向服务器发送 HTTP 请求
    5.服务器解析 HTTP 请求，根据是否设置keep-alive来决定是否关闭 TCP 连接
    6.浏览器解析 HTTP 状态码，并且根据状态码来进行具体的渲染流程

参考文章

https://segmentfault.com/a/1190000009886713?f=tt&hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

http://andrewyan.logdown.com/posts/643979-front-end-job-interview-questions

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家