很多同学都想得到滴滴出行的实习或者校招机会。那从过来人的角度谈谈，要通过滴滴出行的实习、校招面试，都有哪些经验和注意事项呢？今天就跟大家分享一下。

1、 DOM 元素操作方法，事件相关

（1）操作元素：

①对内部结构的操作②元素属性的操作③元素样式的操作④类属性操作

（2） 事件：

①事件源②事件类型③事件处理程序④绑定事件⑤解除事件：直接删除法、使用addEventListener绑定事件⑥常用事件：onclick、ondblclick、onmouseover、onmouseout

2、 盒模型

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：. width和height： 内容 的宽度、高度（不是盒子的宽度、高度）。. padding：内边距。. border：边框。. margin：外边距。. 在 标准盒子模型 中， width 和 height 指的是内容区域 的宽度和高度。. 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。. IE盒子模型 中， width 和 height 指的是内容区域+border+padding 的宽度和高度。

3、 事件对象，阻止默认，阻止冒泡

4、html 文档流

普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。 很显然这是最普通的文档流，从左到右，一个挨一个按照顺序01先，02其次，03最后排列。 一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。 为了能更好辨认，我分别给01绿色，02灰色，03黄色。 然后再给01左浮动。 结果，01脱离了文档流，完全不占空间，所以02顺势顶替了01原来的位置，结果02被01盖住了。 同理，absolute定位跟FLOAT一样，脱离了文档流，不再占原来文档流的空间了。

5、html/css

Html和CSS的关系

（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

（2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现

（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

6、 对于浮动的理解，清除浮动的方法及原理

其实浮动一开始的意义是文本围绕图片，也就是我们常说的文字环绕效果。 我们的理解: 一个元素, 当添加浮动属性, 他就到了上一层画布, 如果是left则往左飘, 但是有一个方向是默认的, 是向上;

原理：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。 其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfloat利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

7、获取元素样式 getComputedStyle/currentStyle

8、 路由相关 html5 的 history，与早期的#

9、自述 js 学习遇到的难点 包括原型，闭包，作用域链，变量提升，执行上下文等

闭包函数：①可以实现函数外部访问函数内部的变量②在JavaScript只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
用途：①可以读取函数内部的局部变量②让这些变量始终保存在内存当中（延长局部变量的生命周期）

闭包出现的场景:①函数外部能访问函数内部的变量②在立即执行函数③闭包可以保留变量在内存里面( 给节点集合绑定事件,获取每个节点的索引值 )

10、 url 从输入到返回结果的过程

11、 html5/css3 相关 keyframes, requestAnimationFrame, box-sizing, transform, flex

12、对 position 的了解程度

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left属性则决定了该元素的最终位置。

13、 BOM 相关知识，如 ua 如何获取

BOM( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。

14、 this 的理解

每个函数在被调用时都会创建一个执行上下文，这个上下文包含了变量环境、this、作用域链等，this就是执行上下文中的一个属性，他是在函数运行时进行绑定的，this的绑定和函数的声明位置没有关系，它取决于函数的调用方式。

15、包含块，BFC，VFM，行内置换/非置换等涉及到布局原理的知识点

16、基本数据类型

比如，null, undefined, number, boolean, string

17、常用布局 主要会考察圣杯局部与双飞翼布局

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

18、 jquery 异步 deferred, promise 的理解与应用

jquery异步请求有4种：1、Ajax请求，语法为“$.ajax ({name:value,…})”；2、get请求，语法为“$.get (url,传递的参数,回调函数,类型)”；3、getJSON请求，支持跨域调用；4、post请求。 本教程操作环境：windows10系统、jquery3.2.1版本、Dell G3电脑。

Promise 是异步编程的一种解决方案：从语法上讲，promise 是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

19、数组的相关操作，基本方法，以及之前 ES5 的高级迭代方法，map，filter，forEach 等

20、 判断数据类型的方法

typeof , Object.prototype.toString.call

21、 各种水平垂直居中

22、$(‘xxxxx’).eq(0) 与 $(‘xxxxx’).[0]的差别

23、常用浏览器及内核，对于渲染引擎与 js 解释引擎的区分

渲染引擎 ：用来解析 HTML 与 CSS，俗称 内核 ，比如 chrome 的 blink，老版本的 webkit。 js 引擎 ：也称为 js解析器 。 用来读取网页的 javaScript 代码，对其处理后运行，比如 chrome 浏览器 V8 。

24、 模块化的理解

模块化的特点在于每一个子模块都可以在一定的通用标准下进行独立的设计和生产，每个模块都有它的特点和优势，各个模块都可以对原有的市场垄断者的产品的某一部分产生替代作用，使得越来越多的模块企业在市场上竞争和聚集。

25、 domcontentloaded/onload 区别，如何实现 domcontentloaded

# load事件触发时，页面上所有的DOM，样式表，脚本，图片都已经加载完成了.

# DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片(譬如如果有async加载的脚本就不一定完成)
# 这个要IE9以上才兼容.

26、 按值传递，与按引用传递

值传递（pass by value）是指在调用函数时将实际参数复制一份传递到函数中，这样在函数中如果对参数进行修改，将不会影响到实际参数。. 引用传递（pass by reference）是指在调用函数时将实际参数的地址直接传递到函数中，那么在函数中对参数所进行的修改，将影响到实际参数。

27、 apply, call, bind 的理解

三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。 bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

28、jquery 插件的封装

封装jQuery对你方法的插件，首先需要在javaScript文件里搭好框架，代码如下： ; (function ($) { //这里写插件代码 }) (jQuery); 1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件

29、jquery，常用的方法，选择器等

基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素。 注意：在网页中id只能使用一次，即id具有唯一性，但class是允许重复使用的。 层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。 说明：只有这个方法返回的是JQuery对象才能进行链式操作。

判断数据类型的方法 typeof , Object.prototype.toString.call

30、 jquery callbacks, delegate, jquery 源码结构 综合

31、 ajax 的远离及实现

32、 行内元素与块元素的区别

• 块元素，总是在新行上开始；行内元素，和其他元素都在一行上
• 块元素，能容纳其他块元素或行内元素；而内联元素，只能容纳文本或者其他行内元素
• 块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变
• 说白了，行内元素就好像一个 单词 ；块级元素就好像一个 段落 ，如果不另加定义的话，它将独立一行出现

33、 页面性能优化

（1）资源压缩合并，减少http请求

（2）非核心代码异步加载 --> 异步加载的方式 --> 异 .. ...

（3）利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

34、 location.replace/loation.asign 的区别

Location.replace () Location.replace () 方法以给定的 URL 来替换当前的资源。 与 assign () 方法 不同的是，调用 replace () 方法后，当前页面不会保存到会话历史中（session History ），这样，用户点击 回退 按钮时，将不会再跳转到该页面。

想要更多滴滴出行实习、校招的机会，请点击这里