web前端 & 校招

酱籽
95 阅读10分钟

石墨文档

  1. git命令用过哪些

  2. css3用过哪些

  3. box-sizing

  4. 跨域 jsonp为什么可以跨域

  5. ajax原生和jq的不同

  6. web攻击的几种方式和防御

  7. 下拉列表

  8. 输入查询框自动匹配，防抖节流

  9. for (var i = 0; i < 12; i + + ) {

    settimeout ( function ( ) {

     console. log (i )

}, 1000 )

}

输出什么，如何依次输出下标并且让它每1000ms输出一个数

for(let i = 0; i < 12; i++){

  setTimeout(function(){

      console.log(i)

  },1000*i)

}

for(var i = 0; i < 12; i++){

  (function(num){

      (setTimeout(function(){

          console.log(num)

      },1000*i))

  })(i)

}

  1. 一个数组，如何实现查找其中两个不同下标的数字想加等于一个固定的值，输出可能的结果

var arr = [ 2, 3, 5, 1]

var sum = 5;

function arrLoad ( ) {

}

畅游

  1. 你怎么接触到的前端

  2. position的各个属性的区别

  3. 说一下h5新特性

  4. 行内，块级元素有哪些

  5. sass

  6. 你用过angular没

网易面经

  1. web攻击的方式，CSRF的攻击原理，具体怎么做的

  2. jquery里面的ready方法与window.onload有什么区别 Window.onload() 必须等待网页全部加载完毕（包括图片）再执行JS代码，只能执行一次，否则第二次会覆盖前一次

(document).ready()只需要等待网页中的DOM结构加载完毕，就能执行JS代码，可以执行多次，都会输出结果，简写方式为(document).ready() 只需要等待网页中的DOM结构加载完毕，就能执行JS代码，可以执行多次，都会输出结果，简写方式为(function(){})

3.http状态码403是什么状态

403资源不可用

4.http和https有什么区别

https是以安全为目标的http通道，http下加入ssl层，对http传输的数据进行加密，http端口80，https 443端口，http的是无状态协议，https是由ssl + http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

客户端向服务器端请求https连接，服务器端返回证书（公钥）产生随机对称密钥，使用公钥对对称密钥加密，客户端向服务器端发送加密后的对称密钥，通过加密密钥加密的密文通信

5.抓包工具有使用过么

6.进程与线程的区别

进程是资源的分配和调度的一个独立单元，而线程是CPU调度的基本单元

同一个进程中可以包括多个线程，并且线程共享整个进程的资源（寄存器、堆栈、上下文），一个进行至少包括一个线程。

7.node是单线程的么？回答是，那node怎么实现多线程操作？

8.数据库的索引有什么作用

9.数据库的组件与唯一id

10.你认为自己做前端有什么优势

11.sessionStorage里面的session是什么意思

12.cookie有哪些方法

13.同源策略，163.com/abc和163.com/abc/a之间怎么获取cookie

14.你觉得bootstrap框架干了些什么

15.使用git的时候，怎么管理分支的

16.angular是属于哪类设计框架的，mvc和mvvm有什么区别

滴滴

滴滴1面

  1. 你的项目最能代表你水平的一个介绍一下

  2. jquery 的$fn是干嘛的，你为什么要用它

  3. 写一下你项目中的轮播

  4. @keyframe怎么用

  5. css3中的各种动画

  6. h5中你用了什么

  7. 你怎样去封装一个自己的jquery插件

  8. 怎样写一个settimeout异步

  9. css画三角形

  10. 原生实现 on off triggle

  11. 怎么实现一个类，类的继承

  12. 绑定和移出事件怎么写

滴滴2面

  1. rem em

rem是根据html根节点来计算的，而em是继承父元素的字体

使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。

  1. 你用过的图片格式

GIF格式：支持动画以及全透明/不透明，仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色，GIF是无损的，采用GIF格式保存图片不会降低图片质量。

JPEG：有损压缩，更丰富的色彩，适合用来存储照片，不适合用来存储企业Logo、线框类的图，不支持透明。针对相片影响，压缩过程中图像的品质会遭受到可见的破坏，JPEG在色调及颜色平滑变化的相片或是写实绘画上可以达到它最佳的效果。

Png: 无损压缩，支持alpha透明，不支持动画

  1. png8 png24区别

Png8: png8是非常好的GIF代替者，在相同的图片效果下，png8具有更小的体积，并且支持透明度的调节。除非要去使用动画的支持，GIF受到广泛的支持，png8本身也是支持动画的，只是浏览器支持的不好。

Png24: 无损压缩了图片数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多,，要比JPEG大5倍之多，而显示效果通常只能获得一点点提升，只有在你不在乎文件体积而要最好的一个显示效果的时候，才应该去使用PNG24

  1. png8怎么实现半透明

filter:alpha(opacity=100);opacity: 1;

  1. 写一个继承，并且改变这个属性

  2. 写一个正则 匹配11个字符串 第一位1 中间9个字母或者数字不区别大小写 最后一位不能是1

  3. css怎么区分浏览器

  4. DTD类型和区别

  5. css优先级

  6. 状态码 1XX 2xx 3xx 4xx

  7. 跨域 jsop原理 你为什么非要用script标签

  8. 重绘和重排 fixed是什么

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。

将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

美团：

  1. jquery选择器(.cls1.cls2)(. cls1.cls2 ) (.cls1 .cls2 ) 区别

$(".class1 .class2") 选择class1元素下class2的元素（中间有空格）

$(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格）

$(".class1,.class2") 选择class1或者class2的元素（中间有逗号）

  1. 写一个依次弹出下标的jq代码

("div").click(function(){ console.log((this).index()) });

this指的是谁，为什么你非要用 this 指的是谁，为什么你非要用

$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()；而this,则是html元素对象，能调用元素属性

$this

jQuery.fn.init [div]

0: divlength:

1__proto__: Object(0)

this

1
​
  1. let块级作用域为什么能解决弹出下标是循环最后一个数的问题 先写出来代码

for(let i = 0 ; i < 5 ;i++){ setTimeout(function(){ console.log(i) }, 1000 * i) }

Let 块级作用域，在for循环中，循环一次完了销毁，不是全局的，只对本次循环有效

  1. 你的项目的文件是怎么放置的画出来

  2. innerHTML innerText 区别

innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本

  1. 用jq获取标签中的文本几种方法

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

  1. es6

  2. 什么时候cookie能互相访问

  3. vue 中data el compated都干嘛的

  4. 你给我用vue写一个组件...

  5. jsonp有什么缺点

Jsonp优点：不受同源策略的限制，兼容性好，不需要XHR的支持，请求完成之后通过调用callback的方式回传结果。

缺点：只支持get请求而不支持Post请求等，只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行js调用的问题

迅雷：

  1. 你的项目

  2. 怎么样实现弹幕并且让他匀速运动还要兼容ie

  3. setTimeout中的动画公式推倒，你设置的时间跟实际时间之间的数学公式

  4. 你如何进行http抓包

  5. http1到http2

  6. es5到es6

CVTE

一面：

自我介绍

  1. 手写两栏布局

  2. 手写实现一个方法传入的数字（123123123.123）改成123,123,123.123这种格式

  3. vue双向绑定原理

  4. vue修改了data数据会不会更新视图

  5. cookie了解多少

  6. 怎么保证cookie安全

  7. https是什么 安全如何保证

  8. 清除浮动的方式

9.手写伪类清除浮动 content还有哪些值

10.xss csrf sql 的危害以及防御

11.怎么判断一个类型是不是number

isNaN

  1. typeof NaN 等于啥

number

  1. 六列布局兼容ie6

  2. http缓存

二面：

  1. xss csrf原理以及防御

  2. csrf为什么会造成攻击

  3. 如何保证cookie安全

  4. 现场敲代码出了一个题 没记住..

  5. 你为什么要学前端

金蝶：

  1. 你的项目

  2. css3你用了什么

  3. 旋转用的什么 其他的呢

Skew

  1. json标准格式的标点符号

  2. vue好在哪里

  3. vue双向绑定原理

  4. 二列布局

  5. web安全

  6. null undefined 区别

Undefined 被转化成数字是NaN，null被转化为数字是0

Null: 作为函数的参数，表示函数的参数不是对象；作为原型链的终点

Undefined: 变量被声明了，但是没有赋值，就等于Undefined; 调用函数时，应该提供的参数没有提供，该参数等于undefined；对象没有赋值的属性，该属性的值为Undefined；函数没有返回值时，默认返回Undefined

hr:

  1. 你项目中遇到的问题和你的收获

用友：

  1. http tcp工作在哪一层

http 应用层 tcp传输层

Tcp/ip 五层模型：应用层、传输层、网络层、数据链路层、物理层

OSI 应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

  1. 发送一个http请求得全过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

  1. 数据库第三范式

  2. 403 204

  3. 你的一个项目

  4. json怎么处理数组和对象

  5. 跨域以及原理

  6. 为什么做前端

  7. 异步有几种方式

  8. 长字符串如何进行压缩

  9. 事件模型

  10. addEventListener 第三个参数干嘛的

中移在线：

  1. 你做前端的优势

  2. 定位absolute你的名字 会出现在网页哪里为什么

  3. 跨域和你如何解决的

  4. node用过没有

  5. 你期望的薪资

  6. 你想在哪里工作

  7. 闭包

  8. 输入一个url到页面渲染的过程

  9. 状态码

诺瓦：

  1. 笔试题

  2. 冒泡排序时间复杂度

  3. 冒泡排序 快排 希尔排序的思想

  4. 二分查找

  5. 进程和线程

  6. 你对面向对象的理解

  7. 封装继承多态的理解

  8. 你对内存的理解 画出来

  9. a = b，b = a 的内存

  10. 一排 中间缺失一个 你怎么解决

  11. 你的项目 各种问

  12. 一个网页能不能操作另一个

  13. dom节点属性 多种方法

滴滴实习

  1. document . write和innerHTML 区别

  2. 跨域

  3. 你的项目

  4. 闭包

  5. 继承

  6. 原型

  7. h5你用过哪些

  8. css3你用过哪些

  9. 什么时候来

京东

1.css实现三角形

2.行内元素.块级元素.行内块级元素都有什么

3.rem em

4.css动画translation

  1. 原型

6.有没有用过node

爱奇艺实习

  1. 你的项目

  2. animation

  3. cookie有哪些字段

  4. 跨域和你的解决

  5. xss csrf SQL是什么和具体的防御怎么做

  6. 原生实现mustache

  7. 说说盒子模型

  8. display

  9. 说说vue react angularjs jquery的区别。

  10. 聊聊项目

  11. 问了一段js代码，输出结果是什么

  12. 口述数组去重

  13. jquery的一个方法的实现原理

  14. 怎么实现分栏

  15. 怎么隐藏一个元素

  16. 怎么用原生的js实现jquery的一个特定方法（你自己选的，我选的toggle）

  17. js的数据类型

原始： null undefined boolean string number

其他： object

1.项目 轮播图怎么实现的？懒加载怎么实现的？

2.webpack模块化原理？你还知道什么模块化方案（答了AMD,CMD,CommonJS,面试官说还有，就说了匿名函数自执行和闭包）

  1. js继承？优缺点？为什么这样就能继承？（答了原型链）

  2. 一个不定宽高的元素垂直水平居中方案

  3. rem和em区别

  4. position定位

  5. 事件流

  6. 事件委托 原理 怎么确定点的是哪个（答了e.target 然后面试官问parent.target 我蒙蔽了）

  7. 如果一个ul里面插入1000个li节点，怎么插入？（答了innerHTML或者用分时函数）

  8. 为什么要用分时函数？（答了Dom操作影响性能）为什么影响性能？（答了浏览器重排机制）

  9. js作用域

  10. js this指向

  11. call apply bind区别

  12. 实现一个bind方法？

  13. 数组都有哪些方法？

  14. ES6新特性？

  15. 手写实现promise

  16. 输入一个url后发生了什么？

  17. 接上面的问题，具体说浏览器渲染

  18. 接上面的 说说cssom生成规则

  19. 前端性能优化，cdn原理？

  20. mvvm理解？

  21. 你知道哪些框架是mvvm架构？

360

  1. 函数式编程

  2. 继承

  3. 你对数学建模，算法的理解

  4. 你为什么要学前端

  5. 你的规划

  6. 模电的01怎么实现？（二极管）

  7. 一个地图有很多条路，你怎么选择最近的

  8. 盒子模型

  9. 你说一下你了解的web安全

  10. 你知道Array中的push state

  11. 说你的项目

  12. 模块化怎么实现

  13. 你对数据库学了什么

  14. 你的安全实验在哪个平台上做的

  15. 你说一下原型链继承

  16. 你项目中的收获

  17. 你项目中遇到的问题和解决的办法

  18. 你的网页设计大赛是做的什么

  19. 你的兴趣爱好

  20. 你对后端的了解

  21. 有没有用过node

  22. 你有没有在实习

  23. 清除浮动的方法

  24. 你用Photoshop 能做图吗

  25. 你觉得vue好在哪里

绿盟：

  1. 你的项目

  2. 项目中的各种问题

  3. web安全 xss SQL具体实施以及预防措施

  4. vue 你用过多深

  5. vue react angular之间的区别

  6. 对后台语言的深度

  7. 你对jquery 源码的了解 选择元素的源码

  8. jq绑定事件怎么写

  9. 浏览器兼容

二面：

  1. 你是哪的人

  2. 工作地点选择

  3. 你的项目

  4. 你的期望薪资

  5. 你能不能实习

  6. 对后台语言的了解

ofo (霸面)

  1. 你的项目

  2. 定时器的设定时间和实际时间之间的误差以及原因 （数学公式）

  3. 错误处理

  4. 跨域

  5. jsonp原理 原生手写

  6. 如果url没拿到数据怎么进行错误处理

  7. vue中怎么做错误处理（监听变化时发现并没有变化）

  8. css画个车轮

  9. 浏览器兼容

艺龙

一面：

  1. 你的项目

  2. h5中的history

  3. bom下的东西

  4. 如何用bom中的刷新页面

  5. vue (怕带偏了就直接说了用的少 )

  6. 手写编程 如何判断一个月中的最后一个星期日是几号

  7. 写一个函数返回中位数

  8. 伪类after before的具体原理

  9. 伪类清除浮动的原理

  10. 如何获取一个星期

  11. 如何new一个Date

二面：

  1. span div的区别 以及他们如何互相转换

  2. 实现艺龙官网的轮播图

  3. setTimeout setInterval的区别

  4. 如何实现从快到慢

  5. 你对面向对象的理解

  6. 你写一个面向对象

  7. 编码的了解

  8. 透明度的兼容处理

  9. 浏览器兼容

  10. 框架

  11. 闭包

触宝：

  1. 响应式局部你如何实现，遇到了什么问题

  2. rem em

rem是根据html根节点来计算的，而em是继承父元素的字体

使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。

  1. settimeout原理

JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个任务队列。一旦当前任务执行完毕，再从队列中取出下一个任务

如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

  1. 实现深拷贝和浅复制

浅复制

function simpleClone(initalObj) {

var obj = {};

for ( var i in initalObj) {

    obj[i] = initalObj[i];

}

return obj;

}

/* ================ 客户端调用 ================ */

var obj = {

a: "hello",

b: {

    a: "world",

    b: 21

},

c: ["Bob", "Tom", "Jenny"],

d: function() {

    alert("hello world");

}

}

var cloneObj = simpleClone(obj); // 对象拷贝

深拷贝

/* ================ 深拷贝 ================ */

function deepClone(initalObj) {

var obj = {};

try {

    obj = JSON.parse(JSON.stringify(initalObj));

}

return obj;

}

/* ================ 客户端调用 ================ */

var obj = {

a: {

    a: "world",

    b: 21

}

}

var cloneObj = deepClone(obj);

cloneObj.a.a = "changed";

console.log(obj.a.a); // "world"

递归拷贝

/* ================ 深拷贝 ================ */

function deepClone(initalObj, finalObj) {

var obj = finalObj || {};

for (var i in initalObj) {

    if (typeof initalObj[i] === 'object') {

        obj[i] = (initalObj[i].constructor === Array) ? [] : {};

        arguments.callee(initalObj[i], obj[i]);

    } else {

        obj[i] = initalObj[i];

    }

}

return obj;

}

  1. 原生js向前向后插入

只有appendChild 找前一个再向后插入

今日头条

汉诺塔 222^n - 1

寻找规律（把所有的圆盘移动到C）：

　　1）n(圆盘个数) == 1

　　　　第一次：1号盘A -> C sum(移动次数) = 1

　　2）n == 2

　　　　第一次：1号盘 A -> B

　　　　第二次：2号盘 A -> C

　　　　第三次：1号盘 B -> C　　sum = 3

　　3）n == 3

　　　　第一次：1号盘 A -> C

　　　　第二次：2号盘 A -> B

　　　　第三次：1号盘 C -> B

　　　　第四次：3号盘 A -> C

　　　　第五次：1号盘 B -> A

　　　　第六次：2号盘 B -> C

　　　　第七次：1号盘 A -> C　　sum = 7

　　以此类推...

　　故不难发现规律,移动次数为：sum = 2^n - 1　

算法分析（递归）：

　　把一堆圆盘从一个柱子移动另一根柱子，必要时使用辅助的柱子。可以把它分为三个子问题：

　　　　首先，移动一对圆盘中较小的圆盘到辅助柱子上，从而露出下面较大的圆盘，

　　　　其次，移动下面的圆盘到目标柱子上

　　　　最后，将刚才较小的圆盘从辅助柱子上在移动到目标柱子上

　　 把三个步骤转化为简单数学问题：

　　　　（1）把 n-1个盘子由A 移到 B；

　　　　（2）把第n个盘子由 A移到 C；

　　　　（3）把n-1个盘子由B 移到 C；

　　我们创建一个JS函数，当它调用自身的时候，它去处理当前正在处理圆盘之上的圆盘。最后它回一个不存在圆盘去调用，在这种情况下，它不在执行任何操作。

JavaScript源代码实现

var hanoi = function(disc,src,aux,dst){

if(disc>0){



    hanoi(disc-1,src,dst,aux);



    console.log(' 移动 '+ disc +  ' 号圆盘 ' + ' 从 ' + src +  ' 移动到 ' +  dst);



    hanoi(disc-1,aux,src,dst)



}

}

hanoi(3,'A','B','C')

整个算法的思路是：

将A柱子上的n-1个盘子暂时移到B柱子上

A柱子只剩下最大的盘子，把它移到目标柱子C上

最后再将B柱子上的n-1个盘子移到目标柱子C上

  1. 三次握手.四次挥手

  2. cookie session

  3. 行内元素和块级元素，行内块级元素的区别

  4. a是否可以加padding margin

  5. 算法中的排序

  6. 排序的时间复杂度

  7. 写一个闭包

for(var i = 0 ; i < 12 ; i++){

(function(n){

(setTimeout = function (){

console.log(n)

},1000)

})(i)

}

  1. cookie安全

  2. highCharts 和 echarts的区别

  3. Svg和 canvas 区别

Svg: 不失真，可被搜索，页面优化：减少外部链接

Canvas: 在HTML中绘制图形，实际运行中会以图片.png方式出现，不能被搜索引擎抓取，放大后会失真

为什么游戏用canvas ？ 游戏会分不同分辨率的版本

Svg效果：静态绘制图形，动态动画效果，专门提供事件

webGL : 专门用于绘制图像

12 Angular Vue React JQuery Bootstarp对比

  1. Vue与 Angular 双向数据绑定原理

14.数组去重

function unique(arr){
    var res = [];
    for(var i = 0 ; i<arr.length;i++){
        if(res.indexOf(arr[i]) == -1){
            res.push(arr[i]);
        }
    }
    return res;
}

function unique10(arr){

  //Set数据结构，它类似于数组，其成员的值都是唯一的

  return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组

}
avatar
文章
阅读
粉丝