interview整合

贴一个 前端面试与进阶指南博客

1. http协议 / http请求

   http1.0 1.1 2.0区别

2. webpack 打包优化

3. promise 原理 手写一个promise

4. 懒加载原理

5. node 的 eventEmitter 原理&实现

6. 动画性能优化

7. 兼容性问题

8. 跨域

   /*CORS使用自定义的HTTP头部容许浏览器和服务器相互了解对方*/
   Access-Control-Allow-Origin:指定受权访问的域
   Access-Control-Allow-Methods：受权请求的方法（GET, POST, PUT, DELETE，OPTIONS等)
   复制代码

9. css浮动

   清除浮动的经常使用方式：
    1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
    2.父级div定义 伪元素:after
    3.父级div定义 overflow:hidden
   复制代码

10. 水平居中，垂直居中 三栏布局

    /*垂直居中*/
    .parent::after{
        content:'';
        height:100%
    }
    .parent::after .son{
        display: inline-block;
        vertical-align: middle;
    }
    复制代码

    .parent2{
        position: relative
    }
    .son2{
        position: absolute;
        height:10px;
        /*方案一 有滚动条*/
        top:50%;
        margin-top:-0.5*10px;
        /*方案二 截断 无滚动条*/
        margin:auto 0;
        bottom:0;
        top:0
    }
    复制代码

    /*transform*/
    .parent3{
        position:relative;
    }
    .son3{
        position:absolute;
        top:50%;
        transform:translate(-50%,-50%)
    }
    复制代码

11. Event Loop 宏任务/微任务

    宏任务（MacroTask） script所有代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。

    微任务（MicroTask） Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver

12. 重排reflow)和重绘(repaint)

    DOM Tree的构建过程

    • 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
    • 生成Tokens: 以后开始parser，浏览器会将HTML字符串解析成Tokens
    • 构建Nodes: 对Node添加特定的属性，经过指针肯定 Node 的父、子、兄弟关系和所属 treeScope
    • 生成DOM Tree: 经过node包含的指针肯定的关系构建出DOM Tree

    重排: 部分渲染树（或者整个渲染树）须要从新分析而且节点尺寸须要从新计算，表现为从新生成布局，从新排列元素

    重绘: 因为节点的几何属性发生改变或者因为样式发生改变，例如改变元素背景色时，屏幕上的部份内容须要更新，表现为某些元素的外观被改变

    触发重排和重绘

    • 添加、删除、更新DOM节点
    • 经过display: none隐藏一个DOM节点-触发重排和重绘
    • 经过visibility: hidden隐藏一个DOM节点-只触发重绘，由于没有几何变化
    • 移动或者给页面中的DOM节点添加动画
    • 添加一个样式表，调整样式属性
    • 用户行为，例如调整窗口大小，改变字号，或者滚动

    避免重排/重绘

    • 集中改变样式
    • 使用DocumentFragment
    • 提高为合成层：

      1.位图交予GPU处理，比CPU快；
      2.当须要 repaint 时，只须要 repaint 自己，不会影响到其余的层；
      3.对于 transform 和 opacity 效果，不会触发 layout 和 paint
      /*提高为合成层*/
      #target {
          will-change: transform;
      }
      复制代码

13. cookie 和 session

    Cookie是服务器发送到用户浏览器并保存在本地的一小块数据
    它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
    Session 表明着服务器和客户端一次会话的过程。
    Session 对象存储特定用户会话所需的属性及配置信息
    cookie在浏览器和服务器间来回传递，另外两个只存在本地
    cookie不能超过4k，另两个5M； 
    cookie有效期是设置时间，sessionStorage是浏览器关闭时，localStorage是始终有效;
    localStorage 和 cookie 在同源窗口共享，sessionStorage数据不共享
    复制代码

14. css3

    css重置样式：不建议使用通配符重置，主要是性能问题。若是用通配符重置样式，那么势必会花费很大时间。网站打开速度变慢。 因此reset时，按需而行。用到哪些标签就设置重置。经常使用的重置样式：

    • textarea标签中，默认的方式为：both；就是说：在textarea的右下角有一个三角，用户能够拖动，以改变textarea的大小。通常状况下咱们将textarea的样式设置为：none；

      textarea { resize:none; } /*防止拖动*/
      复制代码

    • 浏览器默认图片都有3px的空白，以保证咱们对齐样式：

      img {border:0;vertical-align:middle; } /* 去掉图片底部默认的3像素空白缝隙*/
      复制代码

    • 清除浮动的基本写法:

      .clearfix:before,.clearfix:after{
      	content:"";
      	display:table;
      }
      .clearfix:after{clear:both;}
      .clearfix{
      	*zoom:1;/*兼容IE7/6*/
      }
      复制代码

15. script标签中的 defer 和 aysnc

16. 阮一峰老师的 es6

17. es6 彻底使用手册

18. JS 面向对象