奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 >

前端一箩筐面试题,带答案

时间:2019-03-16 09:47来源: 作者:史密斯
有没有自己写过组件怎么实现样式的继承和复用

CSS

Q1:怎么实现三列布局(左侧和右侧宽度固定,中间自适应)

常见 CSS 布局

该问题主要想了解面试者的思维是否有局限性,实现该布局是一个比较常见并且方法很多的一种布局方式,并且可以引导面试者一步一步回答 CSS 相关的基础问题。

  • 绝对定位 + 中间版块不给宽度
  • 两侧浮动 + 中间自动撑开(使用 calc 动态计算宽度,设置对应宽度的 margin)
  • flex,左右设置 flex-basis,中间设置 flex-grow

基本上最常见的答案是这三种布局方式,但是很多人都只说一个 flex,其他两种布局方式稍微考虑下就可以想到(o´゚□゚`o),该问题不是想让面试者回答出什么奇淫技巧,只是对 CSS 基础知识的一个考察。

Q 1-1: flex 具体是怎么实现三列布局的(左侧和右侧的宽度是怎么设置的,中间自适应使用的是哪个属性)

flex 设置宽度和宽度自适应应该算是 flex 的最基本用法,在面试中,问到 flex 的设置宽度和中间自适应具体是哪个属性,很多面试者都回答“不记得了,平时都是自动填充的”

Q 1-2: 设为 flex 属性之后,子元素的哪些属性会失效

float、clear 和 vertical-align

Q 1-3 float/绝对定位 怎么实现中间宽度自适应

Q2: 移动端开发 rem 布局的原理(rem 单位换算)

Q3: 有没有自己写过组件

Q 3-1: 怎么实现样式的继承和复用

Q 3-2: 你平时都是怎么管理自己的 CSS

  • base.css、common.css、page.css(对应都存放哪些内容)

Q 3-3: 你平时都是使用 sass/lass/styles 的哪些功能,sass 的计算属性对页面性能有影响吗?

Q4: 如何在页面上画一个圆

  • SVG
  • CANVAS
  • css border-radius
  • background
  • map + area
  • 直接放一张圆形图片

Q 4-1: 如何在页面上画一个椭圆

 <style> .sector { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: #f00 transparent transparent; border-radius: 50px; } </style> 复制代码

Q 4-2: 如果圆边界模糊,有什么办法去锯齿

这几个问题基本上可以了解到面试者平时都是怎么使用 CSS 的了,对于 CSS,我觉得够用就好,因为我们现在基本急太处理兼容性问题(有 babel 并且我们的项目不要求兼容 ie6 等古老的浏览器)

JS

Q1: JS 基本数据类型

cherryblog.site/deepcopy.ht…

Q 1-1 JS 数据类型有哪些,其中基本数据类型有哪些

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (ECMAscript 6 新定义)
  • Object
  • (ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,ES6出来的Symbol也是原始数据类型 ,表示独一无二的值。Object 为引用类型(范围挺大),也包括数组、函数

Q: 1-2 原始数据类型和引用类型的区别

在内存中的存储方式不同,原始数据类型在内存中是堆存储,引用类型是栈存储 栈(stack)为自动分配的内存空间,它由系统自动释放;而堆(heap)则是动态分配的内存,大小不定也不会自动释放。

在内存中存储方式的不同导致了原始数据类型不可变 原始数据类型和引用数据类型做赋值操作一个是传值一个是传址

Q: 1-3 深拷贝 和 浅拷贝 的区别

cherryblog.site/deepcopy.ht…

Q: 1-4 怎么实现浅拷贝

  • ES6:object.assign()
  • 展开运算符…
  • 自己封装函数实现

Q: 1-5 怎么实现一个深拷贝

  • JSON.parse() (但是如果里面有 function 和 undefined 不可用)
  • lodash
  • 自己封装

Q: 1-6 null和undefined的差异

相同点:

  • 在 if判断语句中,值都默认为 false
  • 大体上两者都是代表无,具体看差异 差异:
  • null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
  • undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefined
  • null是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
  • 设置为null的变量或者对象会被内存收集器回收

这个问题是一个 JS 基础相关的问题,可以考察面试者 JS 基本功

Q2: 实现给数字添加千分位符的方法

  • 正则表达式:"12345678".replace(/(\d)(?=(?:d{3})+$)/g, '$1,')
  • 字符串分析, 循环,然后3位加','
  • 数字分析, 取到整数部分, %1000 操作, 然后加逗号 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

Q3: 面向对象三大要素(cherryblog.site/javascript-…

  • 封装、继承、多态

Q3-1: 能够简单的说明面向对象和面向过程的区别吗

  • 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。
  • 面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。
  • 面向对象: 狗.吃(屎)
  • 面向过程: 吃.(狗,屎)

Q3-4: 怎么实现封装和继承

Q3-5: 一句话概述什么是闭包

Q4: 一句话概述什么是 promise

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

译文:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。

Q 4-1: promise 解决了哪些问题

Q 4-2: 在没有 promise 之前,怎么解决异步回调

JS 异步回调的 4 种解决方案

Q 4-3: 自己如何实现一个 promise(blog.csdn.net/chaunceyw/a…

  • new Promise(fn) 返回一个promise对象
  • 在fn 中指定异步等处理
    • 处理结果正常的话,调用resolve(处理结果值)
    • 处理结果错误的话,调用reject(Error对象)

promise 也是一道常见的面试题,在开始问什么是 promise 的时候,很少有人能够用一个话说出什么是 promise,都只是说 promise 的 api 怎么使用,包括闭包,也很少有人能够用一句话概括什么是闭包。个人感觉不能用一句话概括都是理解的不够深入或者没有从更高的层面理解

Q5: eventloop

在一个事件循环中,异步事件返回结果后会被放到一个任务队列中。然而,根据这个异步事件的类型,这个事件实际上会被对应的宏任务队列或者微任务队列中去,当执行栈为空的时候,主线程会首先查看微任务中的事件,如果微任务不是空的那么执行微任务中的事件,如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈...如此反复,进入循环。

  • macro-task(宏任务)
    • setTimeout
    • setInterval
    • setImmediate
  • micro-task(微任务)
    • Promise
    • process.nextTick

eventloop 也是一个很常见的面试题,也是回答出来比较高的一个问题,可以写一个函数,让面试者回答输出

计算机相关

Q1 :比较 HTML XML XHTML 和 JSON

  • 我们最熟悉的就是 HTML(HyperText Markup Language / 超文本标记语言),用来描述和定义 网络内容的标记语言,超文本的意思是说,除了能标记本文,还能标记 图片,视频,链接 等其他内容

  • XML(Extensible Markup Language / 可扩展标记语言),表现就是给一堆文档加上标签,说明里面的数据是什么意思,方便存储、传输、分享数据。和 HTML 的区别是 HTML 的标签就预定义的,XML 是可扩展的 XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语,其实就是 HTML 的严格语法形式,约定了 属性名必需小写,空元素必需关闭,元素名小写,属性名必需加引号,布尔类型必需加属性值

  • JSON(Javascript Object Notation)比较轻量级的数据交换格式,由键值对组成,数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

这个问题确实是一个很基础的计算机先关的问题,但是很多的面试者仍然不能准确的说出 HTML 的含义(超文本标记语言),在说 XML 和 JSON 的区别的时候只能回答出 XML 常用作配置文件,JSON 用于 AJAX 传输数据

Q2: 概述输入一个url到网页呈现的过程

Q 2-1: DNS 解析的详细过程

Q 2-2: 概述 http 的缓存控制(http2 与相关缓存控制)

Q 2-3: 简述三次握手

Q 2-4: 页面加载白屏的原因有哪些,以及如何监控白屏时间,如何优化

Q 2-5:script 标签的属性有哪些

Q 2-6: script 标签的 defer 和 async 标签的作用与区别

Q 2-7: script intergrity的作用

这个问题真的是前端面试必问问题,因为能全方面考察面试者的能力,能根据面试者的回答层层层深入,引申出好多问题

Q3: 你所接触的前端领域的通讯有哪些(github.com/rainjay/blo…

  • 前端和后端
  • 前端和移动端
  • 前端 父页面 和 iframe 之间
  • 浏览器各个 tab 之间
  • web workers 线程通信
  • 路由间的通信
  • vue 父子组件

Q 3-1: 通信的要点和目的

要点:1. 发送者和接收者 2. 传输媒介 3. 传输的数据 4. 传输格式(协议)

目的:1. 同步数据 2. 传递指令(执行的方法)

框架

Q1: 三大框架解决了传统 JQ 开发的哪些问题

使前端不用再操纵 DOM,数据驱动,通过数据的改变直接改变 DOM

Q 1-1: Vue2.0 怎么实现双向绑定的

Q 1-2: Vue3.0 怎么实现双向绑定的

Q 1-3: Object.defineProperty() 和 proxy 的区别

Q2: 你使用过哪些 Vue/React 全家桶,分别解决了什么问题

Q3: Vue/React 的 diff 算法

Q4: Vue hash 路由和 history 路由的区别

Q5: Vue 计算属性和 watch 在什么场景下使用

Q6: Vue 的 nexttick 实现的原理

对于 Vue/React/Angular 三大框架会使用哪些 api 是次要的,主要是要了解框架解决的问题和实现原理。

打包工具

Q1: webpack 相关,是否自己配置过

Q1-1: webpack 和其他自动化构建工具(gulp、grunt、rollup)有哪些区别(juejin.im/post/5b10c6…

  • webpack 是 module bundle
  • gulp 是 tast runner
  • Rollup 是在 Webpack 流行后出现的替代品。Rollup 在用于打包 Javascript 库时比 Webpack 更加有优势,因为其打包出来的代码更小更快。 但功能不够完善,很多场景都找不到现成的解决方案。

Q1-2: 模块化解决了前端的哪些痛点

  • 命名冲突
  • 文件依赖
  • 代码复用

Q1-3: webpack 的 loader 和 plugin 区别,举几个常用的 loader 和 plugin 并说出作用

  • loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 Typescript)转换为 Javascript,或将内联图像转换为 data URL。loader 甚至允许你直接在 Javascript 模块中 import CSS文件! 因为 webpack 本身只能处理 Javascript,如果要处理其他类型的文件,就需要使用 loader 进行转换,loader 本身就是一个函数,接受源文件为参数,返回转换的结果。
  • Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。 通过plugin(插件)webpack可以实 loader 所不能完成的复杂功能,使用 plugin 丰富的自定义 API 以及生命周期事件,可以控制 webpack 打包流程的每个环节,实现对 webpack 的自定义功能扩展。

Q1-4: webpack 打包的过程

  • 读取文件,分析模块依赖
  • 对模块进行解析执行(深度遍历)
  • 针对不同的模块使用不同的 loader
  • 编译模块,生成抽象语法树(AST)
  • 遍历 AST,输出 JS

Q1-5: webpack 打包之后生成哪些文件

Q2: webpack 打包出来的文件体积过大怎么办

Q3: webpack 热部署的原理

Q4: webpack 打包速度过慢怎么办?

关于 webpack ,对于初级前端,基本上只需要可以 cli 将项目起来,知道 loader 和 plugin 的区别以及常用的 loader、plugin 个人觉得就差不多了,但是对于 高级前端及以上,最好还是了解下 webpack 相关的原理


作者:sunshine小小倩
来源:掘金
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2019-03-16 09:03

奔三路小程序已改版