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

发表于 更新于 分类于 阅读次数：
本文字数： 3.9k 阅读时长 ≈ 4 分钟

介绍

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

一、字节跳动

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 提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式

  • 它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面

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中怎么做动画样式？

八、