前端:面试与笔试经验总结

介绍

  • 主要总结了各个公司的面试与笔试时的一些内容

一、字节跳动

1.一面

(1).讲述一下计算机网络的七层

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

(2).TCP、UDP、HTTP分别处于哪一层?

  • 传输层、传输层、应用层
  • HTTP与TCP的关系:

(3).TCP和UDP的区别

  • TCP:面向连接、传输可靠(保证数据正确性,保证数据顺序)、用于传输大量数据(流模式)、速度慢,建立连接需要开销较多(时间,系统资源)

  • UDP:面向非连接、传输不可靠、用于传输少量数据(数据包模式)、速度快

  • TCP和UDP协议的一些应用例子:

    • TCP一般用于文件传输(FTP HTTP 对数据准确性要求高,速度可以相对慢),发送或接收邮件(POP IMAP SMTP 对数据准确性要求高,非紧急应用),远程登录(TELNET SSH 对数据准确性有一定要求,有连接的概念)等等
    • UDP一般用于即时通信(QQ聊天 对数据准确性和丢包要求比较低,但速度必须快),在线视频(RTSP 速度一定要快,保证视频连续,但是偶尔花了一个图像帧,人们还是能接受的),网络语音电话(VoIP 语音数据包一般比较小,需要高速发送,偶尔断音或串音也没有问题)等等。

(4).JS中有几种数据类型?

(5).JS中有几种判断数据类型的方法,有什么区别?

  • typeof和instanceof
  • 区别:

(6).JS中判断两个数据相等的方法

  • NAN === NAN 成立吗?
  • 0.1 === 0.1 成立吗?

(7).以下代码的输出结果是什么?涉及什么知识点?

  • 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    setTimeout(()=>{log(1)}, 0);
    Promise.resolve().then(e=>{log(2)});
    setTimeout(()=>{log(3)}, 0);
    let p = new Promise((res)=>{
    log(4);
    setTimeout(
    ()=>{
    Promise.resolve().then(e=>{log(7)});
    res(6)
    log(5)
    }
    ,0);
    setTimeout(()=>{log(8)}, 0);
    })
    p.then(e=>{log(e)});
  • 输出结果为:4 2 7 6 1 3 5 8

  • 涉及知识点:js异步中的两种队列(微、宏)、promise异步编程

(8).BFC是什么?

(9).JSON数据格式是什么?

  • 键值对:

    1
    2
    3
    4
    {
    "name": "wrysmile",
    age: 25
    }
  • 数组/集合:

    1
    2
    3
    4
    {
    [1,2,3],
    [4,5,6]
    }

(10).如何实现 JSON 深拷贝?

  • 例如:
    1
    2
    var a = {b:1, c: {d:3}, e:[2,3,4]}
    var copy = clone(a)

(11).let、const、var的区别是什么?

  • 区别:

  • 以下代码输出什么?

    1
    2
    3
    4
    if(true){
    console.log(a)
    let a = 2
    }
  • 以下代码输出什么?

    1
    2
    const  a = {b: 2}
    a.b = 4

(12).事件冒泡和事件委托分别是什么?

(13).如何判断是那个子元素发生事件冒泡?

(14).前端中是如何发送请求的?

  • <link<<a> 标签中的 href 属性
  • <script><img><iframe> 的 src属性
  • 通过表单提交来发送请求
  • ajax、axios、jquery 调用 ajax 方法

(15).用css2和css3分别写一下垂直居中和水平居中

  • css3新增了一些属性,像flex,这是css3中很重要的改变,所以除了flex以外的垂直水平居中的技巧都是属于css2的。
  • 水平居中:
    • css2
      将元素display为行内元素,再text-align:center;即可或者将块级元素定义一个宽度,再margin: 0 auto;即可
    • css3
      将元素display设为flex,再通过justify-content: center; 实现居中。
  • 垂直居中
    • css2
      单行内容的垂直居中可以通过设置相同height值和line-height值来实现。
      多行内容的垂直居中且高度可变可以通过设置上下相同的padding值来实现。
      行级盒子:小图标和标题对齐设置vertical-align: middle。
      绝对定位:top:50%; left:50%;的方法,需要已知块级的宽高
    • css3
      将元素display设为flex,再通过align-items:center;来实现。

(16).闭包是什么?

  • 函数嵌套且内层函数调用外层函数的变量就会形成闭包

!建议

  • 学习好计算机网络、数据结构、JS基础内容
  • 建议多端学习,如 Web、小程序、客户端

二、北京校萌科技有限公司

1.http状态码含义

2.浏览器存储的几种方式

  • 分别为:cookie、localStorage、sessionStorage、indexedDB
  • 区别:第一个属于文档对象模型DOM树根节点document,后者属于浏览器对象模型BOM的对象window

3.数组的各种方法

4.基本数据类型和引用数据类型

5.小程序的生命周期

  • 小程序的生命周期如下:
    • onLunch():小程序首次加载初始化
    • onShow():小程序进入前台的时候
    • onHide():小程序进入后台的时候
    • onError():发生脚本错误时
  • 页面的生命周期如下:
    • onLoad():页面加载
    • onReady():页面初次渲染完成
    • onShow():页面显示
    • onHide():页面隐藏
    • onUnload():页面卸载

三、润尼尔科技有限公司

1.sessionStorage、localStorage与cookie的区别

2.jQuery与其他框架相比的优势

  • 轻量级
  • 强大的选择器
  • 出色的DOM操作的封装
  • 可靠的事件处理机制
  • 完善的Ajax
  • 不污染顶级变量
  • 出色的浏览器兼容性
  • 链式操作方式
  • 隐式迭代
  • 行为层与结构层的分离
  • 丰富的插件支持

3.http与https的区别

  • https 协议需要到 CA 申请证书,一般免费证书较少,因而需要一定费用
  • http 是超文本传输协议,信息是明文传输;https 则是具有安全性的 ssl 加密传输协议
  • http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443
  • http 的连接很简单,是无状态的;HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 http 协议安全

4.什么是跨域

  • 违背同源策略的都可以认为是跨域,即协议、url、端口等都不相同
  • 解决跨域:jsonp 与 CORS

5.了解canvas吗?

  • Canvas API 提供了一个通过JavaScriptHTMLcanvas元素来绘制图形的方式
  • 它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面

6.用网页播放过视频或音频吗?

7.Linux命令有哪些,简要说明一下

四、中科聚网

1.编写一个方法,进行数组去重

2.如何阻止默认事件?

  • 在IE浏览器中通过 e.returnValue=false;
  • 在其他浏览器中调用方法 e.preventDefault();
  • return false 实现阻止事件的默认行为;禁止冒泡,同时取消默认行为

3.同步和异步的区别

  • 同步:提交请求 -> 等待服务器处理 -> 处理完毕返回(这个期间客户端浏览器不能干任何事)
  • 异步: 请求通过事件触发 -> 服务器处理(这时浏览器仍然可以做其他事情)-> 处理完毕

4.ES6的新特性有哪些?

5.vue的指令有哪些?

6.vue的生命周期有哪些?

  • beforeCreate(创建前)
  • created(创建后)
  • beforeMount(载入前)
  • mounted(载入后)
  • beforeUpdate(更新前)
  • updated(更新后)
  • beforeDestroy(销毁前)
  • destroyed(销毁后)

7.前端性能优化的方法

  • 七大手段:减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的 API 和构建优化
  • 可以查看 这里

8.谈谈你对MVC与MVVM的理解

9.微信小程序的优劣有哪些?

10.什么是响应式开发?

  • 定义:Ethan Marcotte 在 2010 年 5 月份提出的一个概念,旨在让一个网站同时兼容多种设备,而不是为不同设备定制不同的版本
  • 主要有如下几部分:
    • 字体大小响应
    • 屏幕尺寸响应
    • 屏幕精度响应
    • 交互方式响应
    • 网络状况响应
    • 其他功能响应
    • 使用场景响应
    • 用户偏好响应
  • 具体内容可以查看 这里

五、北京丰升

1.什么是跨域?

2.浏览器存储有哪些?

3.清除浮动的方式有哪些?

4.get与post的区别有哪些?

5.HTTP状态码有哪些?

6.ES6新特性有哪些?

7.var、let、const的区别有哪些?

8.高维数组如何转化为一维数组?

9.输入一个对象如何输出为另一个对象?

10.vue中的data为什么是函数?

11.如何将一个链接解析成一个对象?

六、简巨科技

1.想找一家什么样的公司呢?

2.公司从事的行业有考虑过吗?

3.对自己的职业规划有什么想法?

4.接受加班/出差/驻场吗?

5.你的优点/缺点有哪些?

6.你的性格怎么样?

7.你买过最贵的东西是什么?

8.你是一个轴的人吗?

七、思无界

1.微信小程序中有什么常用的API?

2.单位除了px、rpx还有什么?

3.熟悉的Linux命令有哪些?

4.CSS3中怎么做动画样式?

八、