滴滴面试的准备

2018-01-13 本文已影响102人韩智超

一、自我介绍

二、html问题

html5的新特性:

1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，语义化标签：比如 article、footer、header、nav、section
5.新的表单控件，比如 calendar、date、time、email、url、search

input和textarea的区别：

1.<input>是一个单行输入框，有value属性（value属性指定初始值），但是它不能自动换行；用来放置字数较少的单行文字内容
<input type="text" name="content" value="内容在这里">

2.<textarea>是一个多行输入框，没有value属性，但是它能自动换行；一般让用户可以输入多行文字,输入的文字信息量相比较大
<textarea id="content" name="content" style="width: 90%; height: 300px; margin-top:5px;" >"内容在这里"</textarea>
其中name="content"这个字段一定要和数据库中的字段对应，不然内容插不到数据库中。

用一个div模拟textarea的实现

//html
  <div contenteditable="true">
    .....此处省略.....
  </div>

//css
  div{
  width: 400px;
  min-height: 100px; //设置最小高度
  max-height: 300px;//设置最大高度，超出就出现滚动条
   _height: 100px; //IE6
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  outline: 0;
  border: 1px solid #a0b3d6;
  font-size: 12px;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto; //超过最大高度就出现滚动条
  _overflow-y: visible;
}

移动设备忽略将页面中的数字识别为电话号码的方法

<meta name = "format-detection" content = "telephone=no">

三、css问题

左右布局，左边定宽，右边自适应，不少于三种方式
BFC IFC的理解

BFC直译为"块级格式化上下文"，就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素
如何产生BFC:
float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
有什么用：比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC(Inline Formatting Contexts)直译为"内联格式化上下文",
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

栅格的理解

1、为什么使用bootstrap？
如果能指出浏览器支持情况、移动优先、响应式布局、简单易写、统一编码风格的话，那基本算过了。
2、什么是bootstrap栅格系统？
听到12字样就算过了，如果自己会解释为什么是12格，而不是14、16格，那就说明对栅格系统有很深的了解。
3.为什么是12列
因为12是1，2，3，4，6的最小公倍数，所以12列栅格系统相对较灵活，支持将一行分成1列，2列，3列，4列，6列。

CSS3用过哪些新特性

CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2.@Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {   
 font-family: BorderWeb;   
 src:url(BORDERW0.eot);   
 }   
 @font-face {   
 font-family: Runic;   
 src:url(RUNICMT0.eot);   
 }   
 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY:       "BorderWeb" }   
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

圆角：border-radius: 15px;

阴影：text-shadow

渐变：-webkit-gradien

弹性盒子模型：flex-box
.container{
display:flex;
justify-content:center;
align-items: center;
}

css3动画特效：
1)Transition 对象变换时的过渡效果
2)Transforms 2D转换效果
3)Animation动画特效

媒体查询

水平居中有哪些实现方法

1.行内元素的水平居中： text-align:center;
2.块状元素的水平居中： margin:0 auto;
3.多个块状元素的水平居中：传统的方法是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center
4.未知高度，flexbox水平居中：display:flex; justify-content:center;

已知高度宽度元素的水平垂直居中

1.利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。核心CSS代码如下：

#container{
   position:relative;
}

#center{
   width:100px;
   height:100px;
   position:absolute;
   top:50%;
   left:50%;
   margin:-50px 0 0 -50px;
}

2.绝对定位与margin:这种方法也是利用绝对定位与margin，但是无需知道被垂直居中元素的高和宽。核心代码如下

#container{
    position:relative;
}
 
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

1像素边框问题:

1.border-image 图片实现 (腾讯)这篇文章是腾讯github上的解决方案border-image来实现的链接走起《使用border-image实现类似iOS7的1px底边》，缺点是，你需要制作图片，圆角的时候会出现模糊。

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("data:image/png;base64,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") 2 0 stretch;
}

2.background-image 渐变实现:除啦用图片，难道纯粹的css就不能实现吗？我的确不想使用图片，感觉制作起来很麻烦，其实百度糯米团首页就是这么做的但是这种方法有个缺点，就是不能实现圆角

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

3.viewport+rem实现:这篇文章的解决方案是使用viewport+rem+js来实现的链接走起《移动端1像素边框问题的解决方案》，里边还引入了张鑫旭大神的文章《设备像素比devicePixelRatio简单介绍》，优点是可以直接设置1px就行了，剩下的就交给js了，而且圆角什么的都没问题。

<span style="font-size:18px;"><html>  
  
    <head>  
        <title>1px question</title>  
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">       
        <style>  
            html {  
                font-size: 1px;  
            }             
            * {  
                padding: 0;  
                margin: 0;  
            }  
              
            .bds_b {  
                border-bottom: 1px solid #ccc;  
            }  
              
            .a,  
            .b {  
                margin-top: 1rem;  
                padding: 1rem;                
                font-size: 1.4rem;  
            }  
              
            .a {  
                width: 30rem;  
            }  
              
            .b {  
                background: #f5f5f5;  
                width: 20rem;  
            }  
        </style>  
        <script>  
          
            var viewport = document.querySelector("meta[name=viewport]");  
            //下面是根据设备像素设置viewport  
            if (window.devicePixelRatio == 1) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 2) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 3) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');  
            }  
            var docEl = document.documentElement;  
            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';  
            docEl.style.fontSize = fontsize;  
              
        </script>  
    </head>  
  
    <body>  
        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>  
        <div class="b">上面的边框宽度是虚拟1像素的</div>  
    </body>  
  
</html></span>

4.box-shadow 实现:利用阴影我们也可以实现，那么我们来看看阴影，优点是圆角不是问题，缺点是颜色不好控制。

div{
    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

四、js问题

图片懒加载

vue-lazyload插件
图片懒加载的原理：

1.首先我们把这段js封装到自执行函数里面，也就是:

(function(){})()

2.声明所需参数:

var imgList = [],delay,time,offset;

3.监听scroll事件，执行节流函数

function imgLoad(selector){
    _selector = selector || '.imgLazyLoad';
    let nodes = document.querySelectorAll(selector);
    imgList = Array.apply(null,nodes);
    window.addEventListener('scroll',_delay,false)
};

4.声明节流函数

function _delay(){//函数节流
    clearTimeout(delay);
    delay = setTimeout(() => {
       _loadImg();
    },time)
};

下划线函数：加下划线函数命名没有特殊功能，只是一种约定成俗的做法，表明这是一个私有函数（并没有强制规定使用，看团队习惯斟酌使用）
函数节流目的：在类似scroll、resize事件中执行大量DOM操作或者计算时，就会出现再次触发事件而上一次事件中的DOM操作和计算还没完成的情况，结果浏览器掉帧了，导致性能下降，影响用户体验。
想了解更多相关知识点，请点击浏览器浏览器scroll优化
函数节流原理：每次执行_delay函数先清除上一次setTimeout生成的引用，阻止上一次的函数调用（如果还没执行的话），然后创建一个新的setTimeout，在time保存的时间间隔后调用函数

5.加载图片

function _loadImg(){//执行图片加载
    for(let i = 0,len =imgList.length; i < len; i++){
        if(_isShow(imgList[i])){
            imgList[i].src = imgList[i].getAttribute('data-src');
            imgList.splice(i,1);
        }
    }
};

6.判断图片是否显示

function _isShow(el){
    let coords = el.getBoundingClientRect();
    return (coords.left >= 0 && coords.left >= 0 && coords.top) <=(document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
};

何时显示图片?
当图片出现在屏幕可视局域时显示~
怎么判断图片出现在图片可视区域？
通过调用元素的getBoundingClientRect方法获得一个包含了一组用于描述边框的相对于视口的左上角位置而言的只读属性——left、top、right和bottom，在和浏览器视口相应宽高进行对比即可判断元素是否出现在可视区域中，offset是偏差值，可以进行显示偏差设置

页面加载的进度条怎么实现的：如下图，在页面加载的时候，上方红色的进度条

image

1.定义一个id为progress的div，给它写动画

body{
  margin:0; //它没有贴在页面的边缘，所以还需要将body的margin去掉
}

#progress{
  height:2px;
  background:red;
  transition:opacity 500ms linear // 线条消失时太突兀了，我们需要让它渐渐消失掉，需要用到CSS的transation属性。
}

@-webkit-keyframes pulse{ //定义首尾关键帧动画
  0%(width:0;)
  100%(width:100%;)
}

然后对元素应用动画，设定动画时间为3秒：
#progress{
  -webkit-animation:pulse 3s;
}

<script>
$({property: 0}).animate({property:100}),{
  duration:3000,
  step:function () {
    var percentage = Math.round(this.property);

    $('#progress').css('width',percentage+"%");

    if (percentage == 100){
      $("#progress").addclass("done"); //完成，隐藏进度条
    }
  }
}
</script>

手写事件模型及事件代理/委托

DOM：addEventListener、removeEventListener、dispatchEvent
IE-DOM：attachEvent、detachEvent、fireEvent
jQuery：on、off、trigger

事件的三个阶段：捕获，目标，冒泡阶段，低版本IE不支持捕获阶段

IE和W3C标准绑定事件的区别？参数分别是什么？以及IE事件对象中的e有什么区别：

标准：

/*
参数：
eventName:事件的名字
function:事件处理函数
Boolean:捕获或者冒泡,默认是false冒泡
*/
/*事件对象e作为参数传入*/
addEventListener(eventName,function(e){
},false);

ie8以下：

/*
参数：
onEvnet:是事件处理程序的名字，而不是事件名，就是说在事件名前加上on
function:事件处理函数
*/
/*
e=window.event，事件event是window的一个属性
*/
attachEvent(onEventName,function(){
   var e=window.event; 
})

事件代理的原理及优缺点:
原理：靠事件冒泡实现的
优点：
大量减少内存占用，减少事件注册
新增子对象时无需再次对其绑定事件，对于动态内容不符尤其适用
缺点：
适用于表格/列表等重复性dom元素,事件代理用不好可能出现事件误判，即本不应该触发事件的元素被绑定了事件

手写原生js实现事件代理
要求：兼容浏览器
考点：事件对象e，IE下事件对应的属性名。
重点是要说到target,currentTarget以及IE下的srcElement和this。

五.http问题（http状态码，get, post,输入一个url，enter之后发生了什么）

5.项目问题（怎么处理移动端兼容性问题，性能优化问题，用过哪些vue的插件，兼容es6吗）

6.需要问面试官的问题:
滴滴的技术栈，对高级前端工程师的理解