渣渣硕的秋招——前端开发入门及面试分享
兴业数金:
1. 生命周期函数:
创建实例前后(create),模板渲染到页面前后(mount),更新数据前后(update),销毁实例前后(destory)
2. 插槽及种类:
slot标签,将值插入到相应位置
种类:具名插槽、作用域插槽
l 具名插槽:一个组件中定义多个插槽,用属性name来区分
l 作用域插槽:子组件向父组件传值,slot-scope
字节一面:
1. 数据库的范式:
范式是符合某一种设计要求的总结;
要设计一个结构合理的关系型数据库,要满足一定的范式
2. 浏览器请求的过程
(1) 首先对url进行解析,拿到域名字段
(2) 在浏览器缓存/本地host文件中查找对应域名的ip,若没有,则发起dns请求中查找
(3) 获取到域名对应的ip地址后,发起tcp连接,tcp三次握手后
(4) 浏览器发起http请求,服务器回应
(5) 浏览器解析响应报文,渲染页面
(6) Tcp四次挥手,断开连接
3. 进程间的通讯方式
管道pipe、消息队列MessageQueue、信号量Semaphore:
线程发生阻塞,忙等待的原因:
线程阻塞:被挂起,不占用cpu(睡眠指令,执行了一个对象的wait()方法,等待相关的资源);线程忙等:消耗CPU,一直在轮询某个变量直到符合条件
4. 发生死锁的必要条件:
多个并发进程因争夺系统资源而产生相互等待的现象;
互斥(某种资源一次只允许一个进程访问)、占有且等待、不可抢占、循环等待
腾讯一面:
(1)减少head标签的JS堵塞,将script放在body后面
(2)减少head里的css资源,由于css必须要放在head里(否则页面加载会出问题,比如加载完成后又进行DOM重绘),但是css太多,在head里又会阻塞页面渲染,所以我们要尽可能减少css代码量。
(3)压缩和缓存
(4)升级到HTTP/2,对于一个域只进行一次tcp连接,使用多路复用,传输多个资源(同时加载)
2. 重绘与重排:
重排负责元素的几何属性更新,重绘负责元素的样式更新
重排必然带来重绘,但是重绘未必带来重排
建议:
多刷面经,应对一些基础问题;
大前端思维的培养:端的开发;各种网站的设计;后台逻辑;安全方面
具体的攻击手段以及防御措施
问题与解决的思路。
北森一面:
1. 介绍项目:实现的功能,用到的vue的知识点;两个网页怎么传递数据?vue的组成;vue怎么进行路由导航?
两个网页传递数据:可以通过URL带参数的方式(获取上一个页面的url:window.location.host),可以通过post到服务端再返回参数给下一个页面,可以通过session,cookies传值等;
路由导航:(1).使用a标签的href实现页面跳转。(2)使用声明式导航router-link(3)使用编程式导航 router.push()
2. Vue组件传值,共享数据的状态state,被问懵了
3. Vue元素显示设置:v-if/v-show?
4. V-model,双向数据绑定的原理
5. Vue的生命周期函数
6. 对于js有了解吗?这种要把握机会,往熟悉的地方领
7. Es6新增的,其中的promise没答好,还给自己挖了一个回调函数的坑
8. 原型链是什么?
9. Css实现垂直居中,
10. 弹性布局flex,属性有哪些
11. 定位的种类,漏了固定定位
12. 对于css有了解吗?Css3新特性:新增的选择器、盒子模型
13. 反问:对vue的文档要熟悉,对于自己的项目,要深入思考。
网易有道一面:
1. 三列,左右固定,中间自适应宽度(代码呈现)
2. 盒子垂直居中的方式(越多越好)
3. Flex属性
4. 移动端,自适应布局
5. 显示与隐藏元素
6. Css标签:伪类选择器
7. 跨域是什么,解决跨域的方法
8. Js数据类型
9. Symbol具体是什么?
10. Vue2与vue3的区别
11. 两个升序数组排序为一个升序数组
12. 反问?html,css,js基础知识;框架的使用与原理;新的概念
海康面试:
1. Css,display属性
布局方式:display:flex(弹性布局);display:grid(流式布局)
2. js数组的几种方法:
改变数组的:push(),pop(),unshift(),shift(),reverse(),sort(),splice(),
不改变原数组方法:concat(),join(),toString(),slice()
3. 排序算法有哪些,性能比较好的?
冒泡排序O(n²);选择排序O(n²),直接插入排序;希尔排序,快速排序O(nlogn),归并排序
字节电商:
1. css伪类,伪元素的区别,伪元素画圆点
::first-line 伪元素用于向文本的首行添加特殊样式;::first-letter 伪元素用于向文本的首字母添加特殊样式 ; ::before 伪元素可用于在元素内容之前插入一些内容; ::after 伪元素可用于在元素内容之后插入一些内容; ::selection伪元素匹配用户选择的元素部分(鼠标选中的)
伪元素创建的元素是行内元素
伪类与伪元素的区别:
(1) 伪类本质上是为了弥补常规css选择器的不足,以获得更多的信息
(2) 伪元素本质上创建了一个有内容的虚拟容器
(3) 可以同时使用多个伪类,而只能同时使用一个伪元素
(4) 根本区别:是否创造了新元素,这个新创造的元素就叫“伪元素”
用 [^ ] 包含一系列字符,则能够匹配其中字符之外的任意一个字符;
3. 文本垂直居中
单行文本垂直居中:line-height搭配height
单行与多行文本: display: table-cell 与 vertical-align: middle或者display: flex; justify-content: center; align-items: center;
水平居中text-align:center
华为:
一面:项目+回顾笔试题+手撕代码(“aabccccaaa”表示为a2b1c4a3;如果后者比前者长度还长,则返回前者)
二面:项目+手撕代码(循环队列的实现)
建信金科:
1. 闭包是什么?
2. 闭包的一个生命周期
4. 跨域,服务器跨域具体如何做的
6. Cookie和session和localsession的区别
cookie和session:保持登录状态
1) cookie和session都是基于键值对的字符串
2) 俩个都是都由后端服务器生成的;
3) cookie字符串保存在客户端浏览器中,session值保存在服务器中,session比cookie更安全
localStorage(本地存储):长久保存,没有时间限制,除非手动去除
7. 不同网页的cookie区别
工商银行:
1. 双向数据绑定
数据变化更新视图 view => model 利用Object.defineProperty的get、set函数对数据更改、读取进行监听。如果数据改变就通知watcher进行重新渲染页面
视图变化更新数据 model => view 利用事件监听,通过target.value拿到新值赋值给data
2. 数据库范式
第一范式:列不可分
第二范式:满足第一范式;并且全部的非主键列依赖于全部主键
第三范式:满足第二范式;并且非主键内部存在传递依赖
三张图搞透第一范式(1NF)、第二范式(2NF)和第三范式(3NF)的区别
3. 前端代码调试工具
(1) 网页浏览器的开发人员工具
(2) CSS Lint
(3) JSON 格式化和校验工具
(4) Postman
(5) Sentry
(6) BrowserStack
(7) JSHint
大华
两个电话面:
一面:
(1)v-for和v-if:v-for优先级高
(2)v-for为什么带key
(3)水平垂直居中的方法
人寿
一面8分钟,专业问题:系统优化的方法(从前端,后端,数据库来分析)
东方财富
1. link和import的区别
2. null和undefined的区别
3. post和get的差别
4. cookie和sessionStorage和localStorage区别