工作经验一年左右的前端程序员面试会问什么？面试问题汇总（一），全部来自真实经历

谈谈 css 盒模型

盒子模型包括外边距、边框、内边距，实际内容四部分

盒子模型分为两种

• W3C 标准盒子模型 content-box

width 就是实际内容的宽度

• IE 盒模型 border-box

width 是 padding + border + 实际内容的总和

切换盒子模型

  box-sizing: content-box /**是W3C盒子模型 */
  box-sizing: border-box /*是IE盒子模型*/

多种方式实现上面 100px 下面自适应的布局

1. flex 布局
2. calc() 函数

  height: calc(100vh - 100px);

display 的属性

值	描述
none	不显示
block	块级元素
inline-block	行内块
inline	内联元素
flex	弹性盒模型
grid	网格布局
table	块级表格
inherit	继承父级的display

块级元素，行内元素，行内块元素的区别

块级元素：

div p h1-h6 li 等都是典型的块级元素

• 特点：
  • 自己独占一行
  • 长度，宽度，内外边距都是可以操控的
  • 宽度默认是容器的100%
  • 是一个容器及盒子，里面可以放置块级或者行内元素
• 注意点：p 和 h 标签里面不能放块级元素

行内元素

span a i strong b

• 特点：
  • 一行可以显示多个
  • 宽高设置无效
  • 宽度默认是本身宽度
  • 是一个容器及盒子，里面可以放置块级或者行内元素
• 注意点：链接里面不能再放链接，但是可以放块级元素

行内块元素

img input td

• 特点：
  • 一行可以显示多个
  • 宽高，内外边距都是可控的
  • 宽度默认是本身宽度
• 注意点：链接里面不能再放链接，但是可以放块级元素

Javascript 基本数据类型

Numver，String，null,undefined,Boolean,Object,Bigint,Symbol

复杂数据类型

array，function

判断数据类型的方法，以及适用的场景

• typeof 局限性就是无法区分对象，数组以及 null

  let a
  const b = null
  const c = 100
  const d = 'warbler'
  const e = true
  const f = Symbol('f')
  const foo = () => {}
  const arr = []
  const obj = {}
  
  console.log(typeof a) //=> undefined
  console.log(typeof b) //=> object
  console.log(typeof c) //=> number
  console.log(typeof d) //=> string
  console.log(typeof e) //=> boolean
  console.log(typeof f) //=> symbol
  console.log(typeof foo) //=> function
  console.log(typeof arr) //=> object
  console.log(typeof obj) //=> object
  console.log(typeof Infinity) //=> number
  console.log(typeof NaN) //=> number

• instanceof

const foo = () => { }
  const arr = []
  const obj = {}
  const data = new Date()
  const number = new Number(3)
  console.log(foo instanceof Function) //=> true
  console.log(arr instanceof Array) //=> true
  console.log(obj instanceof Object) //=> true
  console.log(data instanceof Object) //=> true
  console.log(number instanceof Object) //=> true
  console.log(null instanceof Object) //=> false
  console.log(undefined instanceof Object) //=> false

• constructor 除了 undefined 和 null 其他的都可以通过 constructor 来判断

 const c = 100
  const d = 'warbler'
  const e = true
  const f = Symbol('f')
  const reg = /^[a-zA-Z]{5,20}$/
  const foo = () => { }
  const arr = []
  const obj = {}
  const date = new Date();
  const error = new Error();
  console.log(c.constructor === Number) //=> true
  console.log(d.constructor === String) //=> true
  console.log(e.constructor === Boolean) //=> true
  console.log(f.constructor === Symbol) //=> true
  console.log(reg.constructor === RegExp) //=> true
  console.log(foo.constructor === Function) //=> true
  console.log(arr.constructor === Array) //=> true
  console.log(obj.constructor === Object) //=> true
  console.log(date.constructor === Date) //=> true
  console.log(error.constructor === Error) //=> true

• object.prototype.toString.call

let a
  const b = null
  const c = 100
  const d = 'warbler'
  const e = true
  const f = Symbol('f')
  const reg = /^[a-zA-Z]{5,20}$/
  const foo = () => { }
  const arr = []
  const obj = {}
  const date = new Date();
  const error = new Error();
  const args = (function() {
    return arguments;
  })()
  console.log(Object.prototype.toString.call(a)) //=> [object Undefined]
  console.log(Object.prototype.toString.call(b)) //=> [object Null]
  console.log(Object.prototype.toString.call(c)) //=> [object Number]
  console.log(Object.prototype.toString.call(d)) //=> [object String]
  console.log(Object.prototype.toString.call(e)) //=> [object Boolean]
  console.log(Object.prototype.toString.call(f)) //=> [object Symbol]
  console.log(Object.prototype.toString.call(reg)) //=> [object RegExp]
  console.log(Object.prototype.toString.call(foo)) //=> [object Function]
  console.log(Object.prototype.toString.call(arr)) //=> [object Array]
  console.log(Object.prototype.toString.call(obj)) //=> [object Object]
  console.log(Object.prototype.toString.call(date)) //=> [object Date]
  console.log(Object.prototype.toString.call(error)) //=> [object Error]
  console.log(Object.prototype.toString.call(args)) //=> [object Arguments]

将其封装成函数使用

const getPrototype = (item) => Object.prototype.toString.call(item).split(' ')[1].replace(']', '');
console.log(getPrototype('abc')) //=> String

var，let，const

• var 不存在块级作用域，let 和 const 存在块级作用域
• var 存在变量提升，let 和 const 只能声明后使用
• const 需要有初始值
• var 可以重复声明

遍历数组的 n 种方法

• for 循环
• while 循环
• foreach()
• every()
• some()
• filter()
• map
• reduce
• for in
• for of

some、every、filter 的相同点和不同点

相同点：都不会对空数组进行检测，不改变原数组

不同点：

1. filter 是返回一个新数组

let arr = [1,2,6,7,8];
let filterArr = arr.filter(item=>{return item == 6});
console.log('filterArr：',filterArr); // [6]

2. some 返回布尔值，当遍历到符合条件的，即返回 true，后面的元素不会再检测

3. every 会对每一个值进行检测，如果有一项不满足，则会返回 false

Vue 有哪些内置指令

• v-for
• v-if v-else
• v-bind
• v-once
• v-on
• v-text
• v-html
• v-show
• v-model
• v-clock 保持在元素上直到关联实例编译结束

解决 vue 页面初始化页面闪动问题

css样式中添加

[v-cloak] { display: none; }

如果没有彻底解决问题，则在根元素加上 style="display: none;" :style="{display: block }"

Vue 首屏渲染优化有哪些

• 图片压缩、懒加载
• 禁止生成 .map 文件
• 路由懒加载
• CDN 引入公共库
• 开启 GZIP 压缩

第一次页面加载会触发哪几个钩子

beforeCreate`，`created`，`beforeMount`，`mounted

Vue router 有几种路由模式

hash、history、abstract

hash: 使用 URL hash 值来作路由，支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

hash 和 history 有什么区别

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 #search：

js
复制代码https://www.word.com#search

hash 路由模式的实现主要是基于下面几个特性：

• URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
• hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制 hash 的切换；
• 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
• 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

js复制代码window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

history 路由模式的实现主要基于存在下面几个特性：

• pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
• 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

如何做权限认证

在路由守卫中根据 url 地址结合 token 做权限认证。

HTTP 请求参数格式

• Query String Parameters 格式 ?key=value&key=value
• Form Data 格式：key=value&key=value 键值对形式
• Request Payload 格式：{key: value, key: value}

Cookie、Session、localStorage、SessionStorage 的区别

Cookie 和 Session 都是客户端保存用户信息的一种机制

Cookie 和 Session 的区别

• Cookie 保存在浏览器，Session 保存在服务器
• Cookie 的安全性不如 session
• 单个 Cookie 保存数据不能超过 4k ，很多浏览器都限制最多保存20个 cookie，而 Session 则没有限制
• Session 的运行依赖 Session ID，而 Session ID 是存储在 Cookie 当中的，所以说如果浏览器禁用了 Cookie 那么 Session 也会失效
• Session 会在一定时间内保存在服务器上，所以出于减轻服务器压力考虑，应该尽量多使用 Cookie

localStorage 和 SessionStorage 都是保存在客户端的哈希表，可以用来保存本地的一些数据

localStorage 和 SessionStorage 的区别

localStorage 的生命周期是永久的，除非被清除否则永久保存，而 sessionStorage 只在当前回话生效，关闭页面或者浏览器之后则被清除