前端-笔试面试知识点

HTML

• HTTP协议

  • HTTP/1.0 每次请求都需要建立新的TCP连接，连接不能复用。HTTP/1.1 新的请求可以在上次请求建立的TCP连接之上发送，连接可以复用。优点是减少重复进行TCP三次握手的开销，提高效率。 注意：在同一个TCP连接中，新的请求需要等上次请求收到响应后，才能发送。
  • cookie/session/localStorage/sessionStorage
    
    • cookie/session
      
      • cookie保存在浏览器，session保存在服务器
      • document.cookie
    • localStorage/sessionStorage
      
      • window.*
  • HTTP缓存
    
    • WEB缓存(cache)位于Web服务器和客户端之间。 缓存会根据请求保存输出内容的副本，例如html页面，图片，文件，当下一个请求来到的时候：如果是相同的URL，缓存直接使用副本响应访问请求，而不是向源服务器再次发送请求。 HTTP协议定义了相关的消息头来使WEB缓存尽可能好的工作。
    • 相关状态码为304，缓存的具体工作流程见大标题外链3.2.4
  • HTTP2.0
    
    • 官方说明
    • 二进制传输
      
      • 对比HTTP1.*采用的字符传输能节省很大空间
    • 消息头压缩
      
      • 使用HPACK算法，对常用指令和字符串进行重新编码(其中字符串使用huffman编码)，压缩头空间
    • 利用多路复用实现延迟削减
      
      • 复用TCP连接，虽然HTTP1.1已经实现了复用，但请求间有先后顺序，HTTP2实现了真正的并发
    • Server Push
      
      • 服务端能够更快的把资源推送给客户端。例如服务端可以主动把 JS 和 CSS 文件推送给客户端，而不需要客户端解析 HTML 再发送这些请求。当客户端需要的时候，它已经在客户端了
  • HTTP状态码

      100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
      200 OK 正常返回信息
      201 Created 请求成功并且服务器创建了新的资源
      202 Accepted 服务器已接受请求，但尚未处理
      301 Moved Permanently 请求的网页已永久移动到新位置。
      302 Found 临时性重定向。
      303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
      304 Not Modified 自从上次请求后，请求的网页未修改过。
      400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
      401 Unauthorized 请求未授权。
      403 Forbidden 禁止访问。
      404 Not Found 找不到如何与 URI 相匹配的资源。
      500 Internal Server Error 最常见的服务器端错误。
      503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

• HTML元素
  
  • 块级元素
    
    • div p h1 h2 h3 h4 form ul
  • 行内元素
    
    • a b(bold) br i em(emphasis) strong span input select
• Doctype
  
  • 作用
    
    • 告知浏览器的解析器用什么文档标准解析这个文档
    • 解释器工作模式
      
      • 混杂
      • 标准
• HTML5 为什么只需要写
  
  • HTML5不基于 SGML(Standard for General Markup Language/通用标记语言标准)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
• html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
  
  • (Q1) HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    
    • 绘画canvas; 媒体video/audio
    • localStorage/sessionStorage
    • 语意化更好的内容元素，比如 article、footer、header、nav、section;
    • 表单控件，calendar、date、time、email、url、search;
    • 新的技术webworker, websocket, Geolocation;
    • 拖拽释放(Drag and drop) API
  • (Q2) IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
• 简述一下你对HTML语义化的理解？
  
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

---

CSS

• CSS垂直居中

1. 
    .container{
        height: *;
        line-height: *; /*保证height==line-height*/
        /*text-align: center;*/ /*如果设置了这项还会水平居中*/
    }
    .content{
        display: inline-block   /*设置子元素为行内块*/
    }
2. 
    .content{
      margin: auto;  
      position: absolute;  
      top: 0; left: 0; bottom: 0; right: 0;  /*利用此方法其实可以达成任意方向的居中，只要保证方向上两侧的值相等即可*/
    }
3. 
    .content{
        position: absolute;
        box-sizing: border-box
        top: 50%;
        height: 100px;
        transform: translateY(-50%) || margin-top: -50px 
    }
    /*
    重点在于子元素采用绝对布局，top:50%使其上边界居中，再通过translateY或者margi-top修正
    推荐使用translateY，因为它可以使用百分比形式， 所以子元素的高度可以不固定，例如使用vh为单位；而margin-top则必须制定具体px值
    如果需要水平方向的居中，也可同理使用translateX(-50%)达成该效果
    */
4. 使用flex
    .parent{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

• CSS浮动
  
  • 浮动元素无法撑开父级容器
  • 清除浮动
    
    • 父级div定义height（无法自适应）
    • 结尾处加空div标签clear:both(在末尾处生成一个height为0的容器，撑开父容器)
    • 父级div定义伪类:after/display:block/clear:both(与上一个方法同理，只使用:after伪类实现;after伪类的作用就是在选择的元素内部最后插入指定元素)
    • 父级div定义overflow:hidden(可能出现内容截断)
    • 父级div定义overflow:auto(可能出现滚动条)
    • 父级div也浮动，需要定义宽度（不好）
    • 父级div定义display:table
      比较好的是第3种方式，好多网站都这么用
• 分栏布局
  
  • 父容器relative，子容器中固定宽度部分通过absolute实现；自适应容器position保持默认，设置margin防止被固定宽度容器覆盖
  • float + css3中的calc(100% - 200px) 注意此处减号两边一定要有空格，否则语法错误
  • display:flex
• 盒模型
  
  • 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
  • IE8以下浏览器的盒模型中定义的元素的宽高(width)包括内边距和边框 (border-box)
    
    • 即IE8以下的content部分把border和padding计算了进去
  • IE8+和其他浏览器盒模型宽高(width)不包括内边距和边框 (content-box)
  • box-sizing
    
    • content-box
    • border-box
• FOUC(Flash of unstyled content)
  
  • 原因
    
    • 使用import方法导入样式表
    • 将样式表放在页面底部
    • 有几个样式表，放在html结构的不同位置
  • 当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中。
• css选择器
  
  • 个人不熟悉的几个
    
    • :nth-child(n)
    • :nth-last-child(n)
    • :nth-of-type(n)
    • :nth-last-of-type(n)
  • 选择器优先级：浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行。选择器的最后一部分，也就是选择器的最右边部分被称为“关键选择器”，它将决定你的选择器的效率如何，是高还是低
  • 选择器权重
    
    • 内联 权重10000
    • id选择器（#myid） 权重100
    • 类选择器（.myclassname） 权重10
    • 标签选择器（div,h1,p）权重1
    • 属性选择器（a[rel=”external”]） 权重1
    • 伪类选择器（a:hover,li:nth-child） 权重1
      /* 如下选择器权重均为0 */
    • 相邻选择器（h1+p）
    • 子选择器（ul > li）
    • 后代选择器（li a）
    • 通配符选择器（*）

• 不熟悉的CSS样式

  • border
    
    • border-radius(CSS3)
    • box-shadow(CSS3)
      none：无阴影
      length①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
      length②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
      length③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
      length④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
      color：设置对象的阴影的颜色。
      inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
  • background
    
    • background-attachment
      
      • 设置或检索背景图像是随对象内容滚动还是固定的
    • background-position [left | right | top | bottom|center]
      
      • 设置或检索对象的背景图像位置，从什么位置开始填充
    • background-origin [padding-box | border-box | content-box]
      
      • 设置或检索对象的背景图像计算 <’ background-position ‘> 时的参考原点(位置)
    • background-clip [padding-box | border-box | content-box | text]
      
      • 指定对象的背景图像向外裁剪的区域，注意和origin区别
      • 其中text属性可以用来实现遮罩效果
  • font
    
    • font-variant [normal | small-caps(小型的大写字母字体)]
  • text
    
    • text-transform [none | capitalize | uppercase | lowercase | full-width]
    • text-align-last [auto | start | end | left | right | center | justify]
    • word-spacing
      
      • 设置单词间的间隔
    • letter-spacing
      
      • 设置字母间的间隔
  • table
    
    • table-layout [auto | fixed(固定为指定列宽)]
  • nav-index(CSS3)
    
    • 设置或检索对象的导航顺序(Tab键触发)
    • 该属性有可能会被移除标准的风险且尚未有浏览器实现
  • resize(CSS3)
    
    • 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小
  • user-select(CSS3)E
    
    • 设置或检索是否允许用户选中文本
  • columns
  • flex(CSS3)
    
    • flex-direction 容器轴的方向
    • flex-grow 元素在父容器中的占比
    • flex-shrink 元素超出父容器以后子元素的收缩比
    • flex-basis 在存在width时忽略此参数，不存在时以此作为子元素在轴方向上的长度，同时不参与占比分配
    • justify-content 决定在轴在容器中的位置
    • align-items 决定从什么位置开始排布子元素(配合justify-content可以灵活地达成居中)
    • align-self 决定元素本身在父容器轴上的排布位置
    • order 决定元素排列顺序
  • transform(CSS3)
  • transition(CSS3)

  • animation(CSS3)

    • animation-name 检索或设置对象所应用的动画名称
    • animation-duration 检索或设置对象动画的持续时间

    • animation-timing-function 检索或设置对象动画的过渡类型

      linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
      ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
      ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
      ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
      ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
      step-start：等同于 steps(1, start)
      step-end：等同于 steps(1, end)
      steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
      cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

    • animation-delay 检索或设置对象动画延迟的时间
    • animation-iteration-count 检索或设置对象动画的循环次数
      
      • infinite || number
    • animation-direction 检索或设置对象动画在循环中是否反向运动
    • animation-fill-mode 检索或设置对象动画时间之外的状态

    • 示例如下：

      .object{
          background-color: aliceblue;
          width: 100px;
          height: 100px;
          animation: move 2000ms ease-out infinite;
      }
      @keyframes move {
          0% { background: aliceblue; height: 100px}
          50%{ background: lightskyblue; height: 200px}
          100% {background: aliceblue; height: 100px}
      }

• CSS3新增
  
  • transform/transition/animation
  • flex
  • 媒体查询
  • 关系选择符/伪类选择符
  • calc()
  • border相关
  • background相关
  • text相关

---

Javascript

• 获取对象类型
  
  • Object.prototype.toString.call
    
    • 最好的判断Array的方法Object.prototype.toString.call == '[object Array]'

• ES5

  • getter/setter

    • (补充)可以在类内使用Object.defineProperty来对类属性设置getter/setter，例如

      function Person() {
              var name = 'default';
              this.age = 23;
              Object.defineProperty(this, "name", {
                  get: function() {
                      return name;
                  },
                  set: function(newName) {
                      console.log(y);
                      name = newName;
                  },
                  enumerable: true,
                  configurable: true, //这两项见Javascript高级程序语言读书笔记Blog
              });
          }
      
      //访问
      var p = new Person();
      console.log(p.name); //'default'

• 读取cookie
  
  • document.cookie
• 什么样的DOM节点会影响冒泡
• angular原理
  
  • 加载过程
  • 双向绑定
    
    • 脏检查(digest对保存所有watcher的列表进行循环直到无变化发生)
  • compile/link
    
    • 基础知识
    • 详细流程
    • 个人总结
      
      • compile的返回值即为link函数，这是同时使用compile和compile的方法；否则在定义了compile函数后再单独定义link会导致link失效
      • 每一个directive标签实例只会对应一次compile，但是会多次link和controller；例如在ng-repeat中重复一个标签，则只会运行一次compile而运行多次link和controller；但是如果并列多个标签实例还是会进行多次compile
      • compile过程中尚未生成scope
  • $injector
  • $apply/$digest
    
    • $apply/$digest工作流程详解
  • scope实现
  • ng-bind/ng-model
    单向数据绑定/双向数据绑定
• Vue
  
  • 数据绑定原理(使用ES5的getter/setter)
• DOM怎样遍历、添加、移除、移动、复制、创建和查找节点

    //遍历
    childNodes //获取子节点Array-like Object，这是一个属性，不是方法；下面的方法都是这样
    parentNode //父节点
    nextSbiling //下一个相邻节点
    previousSbiling //上一个相邻节点
    firstChild //第一个子节点
    lastChild //最后一个子节点
    // 创建新节点
    createDocumentFragment() //创建一个DOM片段
    createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点
    // 添加、移除、替换、插入
    appendChild()
    removeChild()
    replaceChild()
    insertBefore() //在已有的子节点前插入一个新的子节点
    // 查找
    getElementsByTagName() //通过标签名称
    getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
    getElementById() //通过元素Id，唯一性
    document.querySelector("#demo");//DOM2 兼容性问题不建议使用，但是优势在于是引擎实现，相比jQuery快很多

• 内存泄漏
  
  • setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
  • 闭包
  • 循环引用
• documen.write和 innerHTML 的区别
  
  • document.write 只能重绘整个页面
  • innerHTML 可以重绘页面的一部分
• 实现javascript继承
  
  • 使用空函数的原因
    
    • 通过中间的空函数避免Person的属性age再次出现在原型链上导致空间浪费
    • 如果直接使Man.prototype = Person.prototype会导致修改Man原型的同时错误的修改了Person原型
  • 较为合理的继承实现如下

    function Person() {
        this.age = 20;
    }
    Person.prototype.addAge = function () {
        ++this.age;
    };
    function Man() {
        Person.call(this);
        this.sex = 'male';
    }
    function F() {}
    F.prototype = Person.prototype;
    Man.prototype = new F();
    Man.prototype.changeSex = function () {
        this.sex = 'female';
    };
    var m = new Man();
    console.log(m);

• 逗号表达式
  
  • 取最右的值
• 如下情况解释原因？

    var a = 10;
    var foo = {
        a:20,
        bar : function () {
            var a = 30;
            console.log(this.a);
        }
    };
    foo.bar();//20
    (foo.bar)();//20 - 不懂为什么
    (foo.bar = foo.bar)();//10
    (foo.bar, foo.bar)();//10

• ES6新特性
  
  • const & let
  • 箭头函数
  • Class
  • 解构赋值
  • set & map
  • Generator
  • for … of …

• js异步模式

  • 回调函数

  • 事件监听

    \\还是以f1和f2为例。首先，为f1绑定一个事件（这里采用的jQuery的写法）。
    　　f1.on('done', f2);
    \\上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：
    　　function f1(){
    　　　　setTimeout(function () {
    　　　　　　// f1的任务代码
    　　　　　　f1.trigger('done');
    　　　　}, 1000);
    　　}

  • 发布/订阅
    
    • 类似事件监听，但是信号统一放到信号中心管理，f1发布信号，f2订阅信号
  • Promise
  • Generator函数
  • Async函数
• 连等赋值
  
  • 不要使用连等赋值
  • 有可能出现在最左赋值结束后最右变量已经被回收的情况（多出现在object的某个属性上）
• Ajax(XMLHttpRequest)详细过程
  
  • xhr.open(method, url, async)
  • xhr.onreadystatechange=callback; //此处看详细解释吧，有几种状态，在回调函数中判断，重点是xhr.readState==4时为onload状态
    
    • 此处也可以使用.onload和.onerror
  • xhr.send(content) //此处如果是GET填null即可，如果是post填content
• 事件机制
  
  • 原理（观察者模式）
  • 自定义事件如何实现
    
    • javascript高级程序设计中自定义事件一章，详细解释了如何通过观察者模式实现自定义事件
• 重绘与回流
• javascript的正则表达式
• new关键字做了什么
  
  • 以下为MDN解释
    
    • When the code new Foo(…) is executed, the following things happen:
      
      1. A new object is created, inheriting from Foo.prototype.
      2. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
      3. The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn’t explicitly return an object, the object created in step 1 is used instead. (Normally constructors don’t return a value, but they can choose to do so if they want to override the normal object creation process.)

• 模块化开发

  • 立即执行函数，不暴露私有成员，不污染全局变量

     var module1 = (function(){
  　　　　var _count = 0;
  　　　　var m1 = function(){
  　　　　　　//...
  　　　　};
  　　　　var m2 = function(){
  　　　　　　//...
  　　　　};
  　　　　return {
  　　　　　　m1 : m1,
  　　　　　　m2 : m2
  　　　　};
  　　})();

---

前端整体技术

• 七层模型的应用层拆分出来的三层
  
  • 应用层
  • 表示层
  • 会话层
• 当你在浏览器中输入google.com并按下回车后发生了什么
• 前端优化原则
  
  • 性能优化
    
    • CSS Sprites
    • JS、CSS源码压缩
    • 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
    • 减少由于HTML标签导致的带宽浪费
    • 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
    • 减少DOM操作次数，优化javascript性能
      
      • 减少引起多次回流的操作
        
        • 一步一步修改style属性；应该使用cssText一次修改
      • 减少直接访问style属性；
        
        • 例如直接访问width,height等属性，会导致浏览器回流计算精准值返回，所以当需要重复使用这些值得时候应该用变量缓存下来
    • 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
• 优雅降级和渐进增强
  
  • 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
  • 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
• 输入URL发生了什么
  
  • 解析URL
    
    • 判断URL还是关键字
    • 如果是关键字先转换为URL
  • 解析协议HTTP/HTTPS/WS
  • DNS查询
    
    • 查看是否在缓存中
      
      • 如果有则调用缓存中的值
      • 如果没有则递归进行DNS查询
  • 获取到目标IP后进行TCP三次握手
    
    • SYN(C)->ACK+SYN(S)->ACK(C)
  • 建立连接构建HTTP请求发送
  • 服务器接受请求进行业务操作后返回response
  • 如果需要断开连接，还需要TCP四次挥手
    
    • FIN(C)->ACK(S)->FIN(S)->ACK(C)
  • 浏览器接收到response后
    
    • 解析HTML/CSS/JS
    • 渲染-构建DOM树->渲染->布局->绘制
  • 其中大部分过程都涉及到ARP解析
• 如何解决跨域问题?
  
  1. jsonp（jsonp 的原理是动态插入script标签）
  2. 前端中间层转发(node.js)
  3. window.postMessage
     
     • 通过API可以直接向指定窗体和origin发送数据(任意数据，会自动序列化)，发送方和接收方只需要设置后回调函数即可
  4. document.domain + iframe
     
     • 利用不同iframe在同一domain下可以共享窗体的特点达成数据交换 windows.parent
  5. window.name
     
     • 利用iframe.contentWindow.name传递数据，具体见外链
• 前端的安全问题
  
  1. XSS
     
     • 注入攻击的一种，通过发帖等方式向网页页面中注入信息，通常通过阶段标签中内容来注入自定义脚本(用以达成攻击者目的的脚本，通常是为了CSRF或者是获取管理员密码/cookie)，达成攻击目的
     • 类似于sql的攻击方式
  2. CSRF(Cross-site request forgery)：跨站请求伪造，核心是请求伪造，通过伪造身份提交POST和GET请求来进行跨域的攻击
     
     • 具体来说就是攻击者在网站A留下链接链接到网站B，网站B利用了网站A的cookie进行了伪造请求达成攻击目的
     • 例如
       有两个网站 A和B。
       你是A网站的管理员，你在A网站有一个权限是删除用户，比如说这个过程只需用你的身份登陆并且POST数据到http://a.com/delUser，就可以实现删除操作。
       好现在说B网站，B网站被攻击了，别人种下了恶意代码(通过XSS注入)，你点开的时候就会模拟跨域请求，如果是针对你，那么就可以模拟对A站的跨域请求，恰好这个时候你已经在A站登陆了。那么攻击者在B站内通过脚本，模拟一个用户删除操作是很简单的。
     • 方式
       
       • XSS注入引入
       • 将链接缩为短链传播给他人
     • 防御手段
       
       • 验证referer字段，即验证请求来源网页
       • 在HTTP请求中以参数的形式加入一个随机产生的token，并在服务器端建立一个拦截器来验证这个token，如果请求中没有token或者token内容不正确，则认为可能是CSRF攻击而拒绝该请求
         
         • 攻击者一般只会利用cookie而无法检测随机生成的token
       • 在HTTP头中自定义属性并验证
         
         • 原理等同于token，但是是放在HTTP头的属性中而不是请求参数中
       • 对于敏感API即时清除cookie
  3. SQL注入
• 前端路由原理
• 前端模块化
  
  • ES6中的模块化
• 浏览器渲染流程

---

整体好文

• 常见面试知识点
• 大部分人都会做错的经典JS闭包面试题
• Web前端面试小记
  
  • 虽然是社招，但是讲到的东西都很类似
• 一道常被人轻视的前端JS面试题 - 主要考察声明提前