深入浅析前端面试总结---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

posted @ 2017-06-04 12:02  张晓艳  阅读(192)  评论(0)    收藏  举报