基础面试问题整理

前端技术：

html 部分：

1、块级元素和行内元素有哪些，块级元素和行内元素的区别

块级元素

1)块级元素可以独占一行。

2)块级元素的默认宽度为 100%，默认高度由子元素或者内容决定。

3)块级元素的可以设置宽高，内外边距。

4)块级元素可以嵌套块级元素或者行内元素。

行内元素

1)行内元素不能独占一行，多个行内元素共享一行。

2)行内元素的宽高由内容决定。

3)行内元素不能为其设置宽高，垂直方向的内外边距。（设置了浮动的行内元素可以设置宽高和水平方向上的内外边距）

4)行内元素不能嵌套块级元素。

还有一些比较特别的元素叫行内块元素， 兼具行内元素和块级元素的特点，可以设置宽高，在一行内显示，没有默认宽度如 img、input、select、textarea、button 等。

行内元素

块级元素

2、input 表单控件的 value 和 placeholder 属性有什么区别

3、H5 的本地存储有哪些，有何区别

sessionStorage 生命周期为当前窗口或标签页

4、同源策略是什么

协议+域名+端口不相同，则浏览器会爆出异常

• 同源策略，它是由 Netscape 提出的一个著名的安全策略。

• 当一个浏览器的两个 tab 页中分别打开来 百度和谷歌的页面

• 当浏览器的百度 tab 页执行一个脚本的时候会检查这个脚本是属于哪个页面的，

• 即检查是否同源，只有和百度同源的脚本才会被执行。 [1]

• 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

• 同源策略是浏览器的行为，是为了保护本地数据不被 JavaScript 代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

5、跨域是什么？如何解决跨域问题

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本 IE），缺点是只支持 get 请求，不支持 post 请求。

核心思想：网页通过添加一个 script 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

设置 document.domain 解决无法读取非同源网页的 Cookie 问题

因为浏览器是通过 document.domain 属性来检查两个页面是否同源，因此只要两个页面通过设置相同的 document.domain，两个页面就可以共享 Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、 普通跨域请求：只需服务器端设置 Access-Control-Allow-Origin

2、带 cookie 跨域请求：前后端都需要进行设置，前端设置根据 xhr.withCredentials 字段判断是否带有 cookie，后端 Java 还可以使用 springMVC 的@CrossOrigin

nginx 代理跨域

ginx 模拟一个虚拟服务器，因为服务器与服务器之间是不存在跨域的。

发送数据时 ，客户端-|nginx-|服务端；返回数据时，服务端-|nginx-|客户端。

6、怎么判断图片是否加载完成

Css 部分

1、布局方式

流式布局 一个一个往下排

自适应布局 适应窗口大小变化大小，百分数，flex

响应式布局 响应窗口的大小进行动态布局，媒体查询

弹性布局 flex，常用 css 属性

2、盒子模型 从外到内 content+padding+border+margin

3、如何放入一张与原图相同长宽比以及不被裁剪的图片 img

4、如何将一个不知长宽的 div 用 absolute 方式进行居中

5、Css 框架有哪些

6、伪类和伪元素

伪类

a:link{background-color:pink;}/品红，未访问/

a:visited{color:orange;}/字体颜色为橙色，已被访问/

a:focus{background-color:lightgrey;}/浅灰，拥有焦点/

a:hover{background-color:lightblue;}/浅蓝，鼠标悬停/

a:active{background-color:lightgreen;}/浅绿，正被点击/

伪元素

::after (:after) 在选中元素中创建一个后置的子节点

::before (:before) 在选中元素中创建一个前置的子节点

::first-line (:first-line) 选取文字块首行字符

::first-letter (:first-letter) 选取文字块首行首个字符

::selection 选取文档中高亮(反白)的部分

::placeholder 选取字段的占位符文本(提示信息)

::grammar-error 选取被 UA 标记为语法错误的文本

::spelling-error 选取被 UA 标记为拼写错误的文本

::marker 选取列表自动生成的项目标记符号

::cue (:cue) 匹配所选元素中 WebVTT 提示

::backdrop 匹配全屏模式下的背景

::slotted() 用于选定那些被放在 HTML 模板 中的元素

::inactive-selection 选取非活动状态时文档中高亮(反白)的部分

7、什么是 CSS Sprite（“精灵图”）

CSS Sprites 叫 CSS 精灵或者雪碧图，是一种网页图片应用处理方式。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中。

再利用 CSS 的"background-image"，“background-repeat”，"background-position"的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。

8、使用 CSS Sprite 有什么好处

9、清除浮动常用方式

Overflow:hidden;和::after 伪元素 clear:both

10、怎么写弹性布局

11、Css 预处理器有哪些

Stylus,less,sass

Js 部分：

1、事件冒泡的各个阶段

从上往下捕获阶段（如何捕获） ---| 2：找到目标阶段 ---| 3：从下网上冒泡阶段（如何冒泡）

2、数据类型

五种基本类型: Undefined、Null、Boolean、Number 和 String。

一种引用数据类型：object

在引用数据类型 object 中包括 function/array/object

ES6 新增：Symbol，主要用于创建一个独一无二的标识。

ES10 新增：Bigint，解决 js 中精度问题

3、数组去重？

4、数组拉平函数

5、判断变量是否是数组

6、this 指向最后一次调用这个方法的对象

7、如何改变 this 指向，call、apply、bind

-          call 经常做继承 call 写多个参数

-          apply 经常和数组有关，比如实现数组中的最大值，最小值等 apply 传数组

-          bind 不调用函数，但是还是想改变 this 指向，比如改变定时器内部的 this 指向。

8、浅拷贝和深拷贝，如何实现深拷贝

9、let const 区别

10、Es6 模块化的导入导出方式

11、.判断数据类型的方法

typeof：无法判断 null，是 obj 类型，而且只能判断出是引用类型

instanceof：

constructor：null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过 typeof 来判断。

Object.prototype.toString ：Object.prototype.toString.call(undefined) ;

12、防抖和节流是什么

13、js 的异步编程模式有哪些

• 回调函数

• Promise

• Async/await

• 发布/订阅模式

• Generator

Vue 部分：

1、Create 和 mounted 区别，

1）created:在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。

2）mounted:在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

2、Spa 是什么

3、Mvvm 都代表什么,用你的理解说说看？将模型(M）与视图（V）用“驱动桥梁”（Vm）搭建起来，达到数据驱动视图的目的

4、双向绑定？Vue2 与 vue3 的双向绑定的区别

5、watch 是什么怎么用

6、Mixin 是什么，有什么用

7、vue 的生命周期

8、Restful 接口有哪些？ POST,GET,PUT,DELETE,HEAD,PATCH，OPTIONS

9、Vue 组件通信有哪些方式

• props / $emit

• ref / $refs 父组件定义

• eventBus 事件总线（$emit / $on）

• 依赖注入（provide / inject）这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（ e m i t ） 触 发 事 件 和 （ emit）触发事件和（ emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。

• $parent / $children

• $attrs / $listeners

10、如何让 CSS 只在当前组件中起作用？

Scoped

11、如何去掉#号

在 vue-router 配置 mode 为 history

12、v-if 和 v-show 的区别

V-if 中变量不为 true 时 dom 中不会生成该节点，而 v-show 同样情况下会生产 dom 节点，只是将 display:none

项目部分：

1、使用的框架，技术栈

2、在实际项目中扮演什么角色

3、项目有哪些模块，涉及那些业务

4、遇到的问题。

5、项目是否做过优化，包括了代码、开发效率、性能、体验等相关领域。

6、如果让你从头搭建一个项目，你会考虑哪些东西？

选框架，权限模块，菜单配置，登录模块，复用模块，复用组件，样式库，组件库，字体库，工具库，业务与用户群，浏览器兼容性，安全性，性能，团队代码质量 eslint，是否需要 ssr 等等

7、前端如何模拟后端接口，

可以 mock.js 来模拟后端接口