深刻浅析前端面试总结---1

为何要初始化CSS样式(reset css)？

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别

• 最简单粗暴的

  * {
      margin: 0;
      padding: 0;
  }

• 更好的选择Normalize.css 相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案

• Reset CSS:只选对的，不选"贵"的，因根据具体项目来作选择权衡，不该该滥用

 如何水平垂直居中div？（至少给出2种解决方法）

1.absolute + transform:

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

2.inline-block + text-align + table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

3.flex + justify-content + align-items

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

渐进加强 VS 优雅降级，你怎么看？

• 渐进加强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，而后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
• 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，而后针对浏览器测试和修复。好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack 使其能够在低版本浏览器上正常浏览

JavaScript 数组去重？(简述思路便可)

• 遍历数组法： 这应该是最简单的去重方法（实现思路：新建一新数组，遍历数组，值不在新数组就加入该新数组中）

  // 遍历数组去重法
  function unique(arr){
    var _arr = []
    //遍历当前数组
    for(var i = 0; i < arr.length; i++){
      //若是当前数组的第i已经保存进了临时数组，那么跳过，
      //不然把当前项push到临时数组里面
      if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i])
    }
    return _arr
  }

  注意点：indexOf 为 ES5 的方法，注意浏览器兼容，须要本身实现 indexOf

• 对象键值对(hash) 法：速度快，高效，占用更大的内存换取更快的时间，用 JavaScript 中的 Object 对象来当作哈希表，hash去重的核心是构建了一个 hash 对象来替代 indexOf

  // hash 去重法
  function unique(arr){
      var _arr = [], 
          hash = {}
      for (var i = 0; i < arr.length; i++) {
          var item = arr[i]
          var key = typeof(item) + item
            // 对象的键值只能是字符串, typeof(item) + item来去分1和'1'的状况
          if(hash[key] !== 1){
              _arr.push(item)
              hash[key] = 1
          }
      }
      return _arr
  }

• 炫酷的 es6 Set数据结构: ES6 提供了新的数据结构 Set。它相似于数组，可是成员的值都是惟一的，没有重复的值

  function unique(arr){
      return Array.from(new Set(arr))
      // Array.from方法用于将两类对象转为真正的数组：
      // 相似数组的对象（array-like object）和可遍历（iterable）的对象
  }

关于 JavaScript 数组去重，还有不少不少能够讲，篇幅有限，这里介绍了几种常规的，更多的本身去探索

 

 使用原生ajax获取 Linus Torvalds 的GitHub信息(API:https://api.github.com/users/torvalds，如记不清具体代码简述过程便可)，并将JSON字符串解析为JSON对象，并讲讲对JSON的了解

这是对 ajax与json的考察

ajax的全称：Asynchronous Javascript And XML，异步传输+js+xml 如今差很少都用JSON

1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 数据处理

下面就来贴代码吧：

var api = 'https://api.github.com/users/torvalds'
var xhr = new XMLHttpRequest() // 建立XMLHttpRequest对象

if(window.XMLHttpRequest){ // 兼容处理
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP')// 兼容ie6如下下
}

xhr.open('get',api,true)    //设置请求信息    
xhr.send()  //提交请求

//等待服务器返回内容
xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
         console.log(JSON.parse(xhr.responseText)) // 使用JSON.parse解析JSON字符串
    } 
}

上面这端代码应该就是最简单的一个完整的AJax，固然了，你能够对它进行各类封装，甚至结合promise，async/await。。。鸟枪换炮

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 如：{"age":"12", "name":"back"}

JSON.parse() 方法解析一个JSON字符串

JSON.stringify() 方法将一个JavaScript值转换为一个JSON字符串

eval也能解析JSON字符串，但不推荐

关于JSON就很少说了，前面写过一篇 JSON入门

 简单谈谈前端性能优化

1. 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2. 减小DOM操做次数，优化javascript性能。
3. 少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。
4. 尽可能避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
5. 图片预加载，将样式表放在顶部，将脚本放在底部。
6. 还有不少内容，可看看雅虎军规

转载自：https://juejin.im/post/592f8124a0bb9f0058a114d0