文章目录

01、HTML基础
- 1、行内元素有哪些？行内块元素有哪些？块级元素有哪些？空(void)元素有哪些？
- 2、页面导入样式时，使用link和@import有什么区别？
- 3、title与h1的区别、b与strong的区别、i与em的区别？
- 4、img标签的title和alt有什么区别？
- 5、png、jpg、gif、webp这些图片格式解释一下，分别什么时候用？
02、CSS基础
- 01、介绍一下CSS的盒子模型
- 02、line-height和heigh区别
- 03、CSS选择符有哪些？哪些属性可以继承？
- 04、CSS优先级算法如何计算？
- 05、用CSS画一个三角形
- 06、一个盒子不给宽度和高度如何水平垂直居中？
- 07、display有哪些值？说明他们的作用。
- 08、对BFC规范(块级格式化上下文：block formatting context)的理解？
- 09、清除浮动有哪些方式？
- 10、在网页中的应该使用奇数还是偶数的字体？为什么呢？
- 11、position有哪些值？分别是根据什么定位的？
- 12、写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
- 13、什么是CSS reset？
- 14、css sprite是什么，有什么优缺点
- 15、display: none;与visibility: hidden;的区别
- 16、opacity和rgba区别
03、JavaScript基础
- 01、延迟加载JS有哪些方式？
- 02、JS数据类型有哪些？
- 03、JS数据类型考题
- 04、null和undefined的区别
- 05、两等和三等有什么不同
- 06、JS微任务和宏任务
- 07、JS作用域考题
- 08、JS对象考题
- 09、JS作用域+this指向+原型考题
- 10、JS判断变量是不是数组，你能写出哪些方法？
- 11、slice是干嘛的、splice是否会改变原数组
- 12、JS数组去重
- 13、找出多维数组最大值
- 14、给字符串新增方法实现功能
- 15、找出字符串出现最多次数的字符以及次数
- 16、new操作符具体做了什么
- 17、闭包
- 18、原型链
- 19、JS继承有哪些方式
- 20、说一下call、apply、bind区别
- 21、sort背后原理是什么？
- 22、深拷贝和浅拷贝
- 23、localstorage、sessionstorage、cookie的区别
04、H5/C3
- 01、什么是语义化标签
- 02、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
- 03、如何关闭iOS键盘首字母自动大写
- 04、怎么让Chrome支持小于12px的文字？
- 05、rem和em的区别
- 06、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
- 07、webkit表单输入框placeholder的颜色值能改变吗？
- 08、禁止ios长按时不触发系统的菜单，禁止ios&android长按时下载图片
- 09、禁止ios和android用户选中文字
- 10、自适应
- 11、响应式
05、ES6
- 1、var、let、const区别
- 2、作用域考题
- 3、将下列对象进行合并
- 4、箭头函数和普通函数有什么区别？
- 5、Promise有几种状态
- 6、find和filter的区别
- 7、some和every的区别
06、webpack
- 1、webpack插件
07、Git
- 1、git常用命令
- 2、解决冲突
- 3、GitFlow
08、Vue
- 01、Vue2.x生命周期有哪些？
- 02、第一次进入组件或者页面，会执行哪些生命周期？
- 03、谈谈你对keep-alive的了解
- 04、v-if和v-show区别
- 05、v-if和v-for优先级
- 06、ref是什么？
- 07、nextTick是什么？
- 08、路由导航守卫有哪些？
- 09、Vue中如何做样式穿透
- 10、scoped原理
- 11、Vuex是单向数据流还是双向数据流？
- 12、讲一下MVVM
- 13、双向绑定原理
- 14、什么是虚拟DOM
- 15、diff算法
- 16、Vue组件传值
- 17、介绍一下SPA以及SPA有什么缺点？
- 18、Vue双向绑定和单向绑定
- 19、props和data优先级谁高？
- 20、computed、methods、watch有什么区别？
- 21、Vuex
09、微信小程序
- 1、如何自定义头部？
- 2、如何自定义底部？
10、uni-app
- 1、生命周期
- 2、条件编译
11、性能优化
- 1、加载优化
- 2、图片优化
- 3、渲染优化
- 4、首屏优化
- 5、vue优化
12、兼容性
- 1、页面样式兼容
- 2、框架兼容
13、网络请求
- 1、跨域面试题
- 2、http和https
14、WEB安全
- 1、XSS攻击
- 2、SQL注入
- 3、接口安全
15、其他
- 1、token
- 2、SEO

01、HTML基础

1、行内元素有哪些？行内块元素有哪些？块级元素有哪些？空(void)元素有哪些？

元素分类

行内元素：a标签、span标签、b标签、i标签、em标签等
行内块元素：img标签、input标签、button标签、select标签等
块级元素：div标签、p标签、li标签、ol标签、ul标签、h标签等
空元素：input标签、img标签、hr标签等

元素之间的转换

属性	转换	特性
`display: inline;`	把某元素转换成了行内元素	不独占一行的，并且不能设置宽高
`display: inline-block;`	把某元素转换成了行内块元素	不独占一行的，可以设置宽高
`display: block;`	把某元素转换成了块元素	独占一行，并且可以设置宽高

2、页面导入样式时，使用link和@import有什么区别？

1、link先有，后有@import，link的兼容性比@import好
2、加载顺序差别，浏览器先加载link标签，后加载@import

3、title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别

定义
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景
网站的logo都是用h1标签包裹的

b与strong的区别

定义
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调。
题外话
为了符合css3的规范，b尽量少用该用strong就行了。

i与em的区别

定义
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景
i更多的用在字体图标，em术语上（医药，生物）。

4、img标签的title和alt有什么区别？

区别一

title ：鼠标移入到图片显示的值
alt ：图片无法加载时显示的值

区别二

在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

5、png、jpg、gif、webp这些图片格式解释一下，分别什么时候用？

png: 无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg: 采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif: 一般是做动图的。
webp: 同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

02、CSS基础

01、介绍一下CSS的盒子模型

CSS的盒子模型有哪些

标准盒子模型、IE盒子模型

CSS的盒子模型区别

标准盒子模型：margin、border、padding、content
IE盒子模型：margin、content（ border + padding + content ）

通过CSS如何转换盒子模型

box-sizing: content-box; // 标准盒子模型
box-sizing: border-box; // IE盒子模型

02、line-height和heigh区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。
height是一个死值，就是这个盒子的高度。

03、CSS选择符有哪些？哪些属性可以继承？

CSS选择符

通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1…）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])

CSS属性哪些可以继承

文字系列：font-size、color、line-height、text-align…
不可继承属性：border、padding、margin…

04、CSS优先级算法如何计算？

优先级比较

!important > 内联样式 > id > class > 标签 > 通配

CSS权重计算

等级	选择器	权重值
第一	内联样式（style）	1000
第二	id选择器	100
第三	类选择器	10
第四	标签&伪元素选择器	1
第五	通配、>、+	0

05、用CSS画一个三角形

// 用边框画、border
// 这是一个向上的三角形
b {
    
    
	width: 0;
	height: 0;
	
	border-left:100px solid transparent;
	border-right:100px solid transparent;
	border-top:100px solid transparent;
	border-bottom:100px solid #ff0000;
}

06、一个盒子不给宽度和高度如何水平垂直居中？

方式一

<div class='container'>
	<div class='main'>main</div>
</div>

.container{
    
    
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 300px;
	border:5px solid #ccc;
}

.main{
    
    
	background: red;
}

方式二

<div class='container'>
	<div class='main'>main</div>
</div>

.container{
    
    
	position: relative;
	width: 300px;
	height: 300px;
	border:5px solid #ccc;
}

.main{
    
    
	position: absolute;
	left:50%;
	top:50%;
	background: red;
	transform: translate(-50%,-50%);
}

07、display有哪些值？说明他们的作用。

none: 隐藏元素
block: 把某元素转换成块元素
inline: 把某元素转换成行内元素
inline-block: 把某元素转换成行内块元素

08、对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1、了解BFC ：块级格式化上下文。
2、BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3、如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell…
position的值为:absoute、fixed

09、清除浮动有哪些方式？

1、触发BFC
2、多创建一个盒子，添加样式：clear: both;
3、after方式
ul:after { content: ''; display: block; clear: both; }

10、在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数 : 让文字在浏览器上表现更好看。
另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。

11、position有哪些值？分别是根据什么定位的？

值

static: [默认] 没有定位
fixed: 固定定位，相对于浏览器窗口进行定位。
relative: 相对于自身定位，不脱离文档流。
absolute: 相对于第一个有relative的父元素，脱离文档流。

relative和absolute区别

1、relative不脱离文档流、absolute脱离文档流
2、relative相对于自身、 absolute相对于第一个有relative的父元素
3、relative如果有left、right、top、bottom -> left、top
absolute如果有left、right、top、bottom -> left、right、top、bottom

12、写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

双飞翼

<div class='container'>
	<div class='c'>
		<div class='main'>中</div>
	</div>
	<div class='l'>左</div>
	<div class='r'>右</div>
</div>

* {
    
    
	margin: 0;
	padding: 0;
}

body {
    
    
	width: 100vw;
	height: 100vh;
}

.container>div {
    
    
	float: left;
}

.l {
    
    
	margin-left: -100%;
	width: 200px;
	height: 100vh;
	background: red;
}

.c {
    
    
	width: 100%;
	height: 100vh;
	background: pink;
}

.r {
    
    
	margin-left: -200px;
	width: 200px;
	height: 100vh;
	background: blue;
}

.main {
    
    
	padding: 0 200px;
}

圣杯布局

// 待补充

13、什么是CSS reset？

reset.css是一个css文件，用来重置css样式的。
normalize.css为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。

14、css sprite是什么，有什么优缺点

1、是什么
把多个小图标合并成一张大图片。
2、优缺点
优点：减少了http请求的次数，提升了性能。
缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

15、display: none;与visibility: hidden;的区别

占用位置的区别

display: none;不占用位置
visibility: hidden;虽然隐藏了，但是占用位置

重绘和回流的问题

visibility: hidden;和display: none;都产生重绘
display: none;还会产生一次回流
产生回流一定会造成重绘，但是重绘不一定会造成回流。
产生回流的情况：改变元素的位置(left、top…)、显示隐藏元素…
产生重绘的情况：样式改变、换皮肤

16、opacity和rgba区别

实现透明效果

1、opacity: 取值范围0到1之间，0表示完全透明，1表示不透明
2、rgba: r表示红色，g表示绿色，b表示蓝色，取值可以在正整数或者百分数；a表示透明度取值0到1之间

继承的区别

opacity会继承父元素的opacity属性，而rgba设置的元素的后代元素不会继承不透明属性。

03、JavaScript基础

01、延迟加载JS有哪些方式？

延迟加载：async、defer
<script defer type="text/javascript" src='script.js'></script>
<script async type="text/javascript" src='script.js'></script>
defer : 等html全部解析完成，才会执行js代码，顺次执行js脚本。
async : async是和html解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。
也就是说当有多个js文件时，在执行完html后defer会根据js文件顺序执行，而async是先加载完先执行

02、JS数据类型有哪些？

JavaScript共有8种数据类型。
7种基本数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6新增，表示独一无二的值）和BigInt（ES10新增）。
1种引用数据类型：Object。Object里面包含Object、Array、Function、Date、RegExp等。
总结：JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述8种数据类型之一。
NaN是一个数值类型，但不是一个具体的数字。

03、JS数据类型考题

考题一

console.log(true + 1);     			// 2
console.log('name' + true);  		// nametrue
console.log(undefined + 1); 		// NaN
console.log(typeof undefined);      // undefined

考题二

console.log(typeof(NaN));       // number
console.log(typeof(null));      // object

04、null和undefined的区别

历史遗留

1、作者在设计js的都是先设计的null，为什么设计了null：最初设计js的时候借鉴了java语言。
2、null会被隐式转换成0，很不容易发现错误。
3、先有null后有undefined，出来undefined是为了填补之前的坑。

具体区别

JavaScript的最初版本的null是一个表示"无"的对象（空对象指针），转为数值时值为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

其他解释
null

null 表示一个"无"的对象，转为数值为 0；
作为函数的参数，表示该函数的参数不是对象；
作为对象原型链的终点；
console.log(Number(null)); // 0
console.log(5 + null); // 5
console.log(JSON.stringify(null)); // 'null' 字符串类型
console.log(JSON.parse(null)); // null 基本类型

undefined

变量被声明了，但是没有赋值，就等于 undefined；
调用函数时，应该提供的参数没有提供，该参数等于 undefined；
对象没有赋值属性，该属性的值为 undefined；
函数没有返回值时，默认返回 undefined；
console.log(Number(undefined)); // NaN
console.log(5 + undefined); // NaN
console.log(JSON.stringify(undefined)); // undefined
console.log(JSON.parse(undefined)); // 报错

05、两等和三等有什么不同

==: 比较的是值
string == number || boolean || number …都会隐式转换
通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中）
===: 除了比较值，还比较类型

06、JS微任务和宏任务

1、js是单线程的语言。
2、js代码执行流程：同步执行完 =》事件循环
同步的任务都执行完了，才会执行事件循环的内容
进入事件循环：请求、定时器、事件…
3、事件循环中包含微任务和宏任务
微任务：promise.then…
宏任务：setTimeout…
要执行宏任务的前提是清空了所有的微任务
流程：同步 =》事件循环【微任务和宏任务】=》微任务 =》宏任务 =》微任务…

07、JS作用域考题

介绍

1、除了函数外，js是没有块级作用域。
2、作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量。
注意：如果内部有，优先查找到内部，如果内部没有就查找外部的。
3、注意声明变量是用var还是没有写（window.）
4、注意：js有变量提升的机制【变量悬挂声明】
5、优先级：声明变量 > 声明普通函数 > 参数 > 变量提升

应用
1、本层作用域有没有此变量【注意变量提升】
2、注意：js除了函数外没有块级作用域
3、普通声明函数是不看写函数的时候顺序

考题一

function c() {
    
    
	var b = 1;
	function a() {
    
    
		console.log(b); // undefined
		var b = 2;
		console.log(b); // 2
	}
	a();
	console.log(b); // 1
}
c();

考题二

var name = 'a';
(function() {
    
    
	if(typeof name == 'undefined') {
    
    
		var name = 'b';
		console.log('111' + name); // 111b
	} else {
    
    
		console.log('222' + name);
	}
})();

考题三

function fun(a) {
    
    
	var a = 10;
	function a() {
    
    }
	console.log(a); // 10
}
fun(100);

08、JS对象考题

JS对象注意点

1、对象是通过new操作符构建出来的，所以对象之间不相等(除了引用外)；
2、对象注意：引用类型(共同一个地址)；
3、对象的key都是字符串类型；
4、对象如何找属性|方法；
查找规则：先在对象本身找 ===> 构造函数中找 ===> 对象原型中找 ===> 构造函数原型中找 ===> 对象上一层原型查找

考题一

console.log([1, 2, 3] === [1, 2, 3]); // false

考题二

var obj1 = {
    
     a:'hellow' };
var obj2 = obj1;
obj2.a = 'world';
console.log(obj1); // {a: world}
(function(){
    
    
	console.log(a); // undefined
	var a = 1;
})();

考题三

var a = {
    
    };
var b = {
    
     key:'a' };
var c = {
    
     key:'c' };

a[b] = '123';
a[c] = '456';

console.log(a[b]); // 456
// a[b] || a[c] ==> a['[object Object]']

09、JS作用域+this指向+原型考题

考题一

function Foo()	{
    
    
	getName = function() {
    
     console.log(1); } // 注意是全局的window.
	return this;
}

Foo.getName = function() {
    
     console.log(2); }
Foo.prototype.getName = function() {
    
     console.log(3) }
var getName = function() {
    
     console.log(4); }
function getName() {
    
     console.log(5); }

Foo.getName();       // 2
getName(); 		     // 4
Foo().getName();     // 1
getName();		     // 1 因为重新执行了Foo()
new Foo().getName(); // 3

考题二

var o = {
    
    
	a: 10,
	b: {
    
    
		a: 2,
		fn: function() {
    
    
			console.log(this.a); // 2
			console.log(this); // {a: 2, fn: ƒ}
		}
	}
}
o.b.fn();

考题三

window.name = 'ByteDance';
function A() {
    
    
	this.name = 123;
}
A.prototype.getA = function() {
    
    
	console.log(this);   // this代表window对象
	return this.name + 1;
}
let a = new A();
let funcA = a.getA;
console.log(funcA()); // ByteDance1

考题四

var length = 10;
function fn() {
    
    
	return this.length + 1;
}
var obj = {
    
    
	length: 5,
	test1: function() {
    
    
		return fn();
	}
}
obj.test2 = fn;
console.log(obj.test1()); 				 // 11
console.log(fn() === obj.test2()); 		 // false
console.log(obj.test1() == obj.test2()); // false

10、JS判断变量是不是数组，你能写出哪些方法？

1、isArray

var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

2、prototype

var arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr).indexOf('Array') !== -1); // true

3、isPrototypeOf

var arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // true

4、constructor

var arr = [1, 2, 3];
console.log(arr.constructor.toString().indexOf('Array') !== -1); // true

5、instanceof

var arr = [1, 2, 3];
console.log(arr instanceof Array); // true

11、slice是干嘛的、splice是否会改变原数组

1、slice用来截取
参数可以写slice(3)、slice(1, 3)、slice(-3)
返回的是一个新的数组
2、splice有插入、删除和替换功能
返回：删除的元素
该方法会改变原数组

12、JS数组去重

1、new set

var arr1 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
    
    
	return [...new Set(arr)];
}
console.log(unique(arr1));

2、indexOf

var arr2 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
    
    
	var brr = [];
	for(var i = 0; i < arr.length; i++) {
    
    
		if(brr.indexOf(arr[i]) == -1) brr.push(arr[i]);
	}
	return brr;
}
console.log(unique(arr2));

3、sort

var arr3 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
    
    
	arr = arr.sort();
	var brr = [];
	for(var i = 0; i < arr.length; i++) {
    
    
		if(arr[i] !== arr[i - 1]) brr.push(arr[i]);
	}
	return brr;
}
console.log(unique(arr3));

13、找出多维数组最大值

function fnArr(arr){
    
    
	var newArr = [];
	arr.forEach((item, index) => {
    
     newArr.push(Math.max(...item)); });
	return newArr;
}
console.log(fnArr([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]));

14、给字符串新增方法实现功能

给字符串对象定义一个addPrefix函数，当传入一个字符串str时，它会返回新的带有指定前缀的字符串，
例如：console.log( 'world'.addPrefix('hello')); 控制台会输出helloworld

String.prototype.addPrefix = function(str) {
    
    
	return str + this;
}
console.log('world'.addPrefix('hello'));
// helloworld

15、找出字符串出现最多次数的字符以及次数

方式一

function statistics(string) {
    
    
	string = string.replace(/\s+/g, '');
	
	var dictionaries = {
    
    },
		max = null,
		count = 0;
		
	for (var i = 0; i < string.length; i++) {
    
    
		if (dictionaries[string[i]] === undefined) {
    
    
			dictionaries[string[i]] = 1;
		} else {
    
    
			dictionaries[string[i]] += 1;
		}
	}
	
	for (var key in dictionaries) {
    
    
		if (dictionaries[key] > count) {
    
    
			max = key;
			count = dictionaries[key];
		}
	}

	return {
    
     dictionaries, max, count };
};

console.log(statistics('I miss you'));
// {dictionaries: {…}, max: "s", count: 2}
// dictionaries: { I: 1, i: 1, m: 1, o: 1, s: 2, u: 1, y: 1 }
// max: "s"
// count: 2

方式二

var str = 'aaabbbbbccddddddddddx';
var obj = {
    
    };
for(var i = 0; i < str.length; i++) {
    
    
	var char = str.charAt(i);
	if(obj[char]) {
    
    
		obj[char]++;
	} else {
    
    
		obj[char] = 1;
	}
}
console.log(obj);
// 统计出来最大值
var max = 0;
for(var key in obj) {
    
    
	if(max < obj[key]) max = obj[key];
}
// 拿最大值去对比
for(var key in obj) {
    
    
	if(obj[key] == max) {
    
    
		console.log('最多的字符是' + key);
		console.log('出现的次数是' + max);
	}
}

16、new操作符具体做了什么

1、创建了一个空的对象
2、将空对象的原型，指向于构造函数的原型
3、将空对象作为构造函数的上下文（改变this指向）
4、对构造函数有返回值的处理判断

function Fun(age,name) {
    
    
	this.age = age;
	this.name = name;
}
function create(fn, ...args) {
    
    
	// 1. 创建了一个空的对象
	var obj = {
    
    }; // var obj = Object.create({})
	// 2. 将空对象的原型，指向于构造函数的原型
	Object.setPrototypeOf(obj, fn.prototype);
	// 3. 将空对象作为构造函数的上下文（改变this指向）
	var result = fn.apply(obj,args);
	// 4. 对构造函数有返回值的处理判断
	return result instanceof Object ? result : obj;
}
console.log(create(Fun, 18, '张三'));

17、闭包

1、闭包是什么
闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。
2、闭包可以解决什么问题【闭包的优点】
2.1、内部函数可以访问到外部函数的局部变量
2.2、闭包可以解决的问题
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
     
     
	(function(i) {
     
     
		lis[i].onclick = function() {
     
     
			console.log(i);
		}
	})(i);
}
3、闭包的缺点
3.1、变量会驻留在内存中，造成内存损耗问题。
解决：把闭包的函数设置为null
3.2、内存泄漏【ie】 ==> 可说可不说，如果说一定要提到ie

18、原型链

1、原型可以解决什么问题
对象共享属性和共享方法
2、谁有原型
函数拥有：prototype
对象拥有：proto
3、对象查找属性或者方法的顺序
先在对象本身查找 --> 构造函数中查找 --> 对象的原型 --> 构造函数的原型中 --> 当前原型的原型中查找
4、原型链
4.1、是什么？：就是把原型串联起来
4.2、原型链的最顶端是null

19、JS继承有哪些方式

1、构造函数继承

这种方式只能继承父类构造函数中的属性和方法，对于原型对象上的方法无法继承。
构造函数继承是利用call或者apply方法，将父类构造函数的this绑定到子类构造函数的this上即可。

2、原型实例继承

这是比较常用的一种实现继承的方式。
1、将student的prototype对象指向parentClass的一个实例。
此操作完全删除了student.prototype对象原本的内容，然后赋予给它一个新的值。
student.prototype = new parentClass();
2、任何一个构造函数都有一个prototype对象，这个prototype对象都有一个constructor属性指向自身的构造函数。
2.1、因为第上面代码对prototype对象进行了重新赋值，所以prototype对象的constructor属性也发生了改变，变成指向parentClass，所以必须手动将student.prototype.constructor指回student。
2.2、如果没有(student.prototype.construct = student)这行代码，则student.prototype.constructor==parentClass和example.constructor==parentClass的结果返回false。
2.3、这里比较好理解，因为example是student的实例化对象，它的constructor属性默认继承自parentClass.prototype，而parentClass.prototype的constructor属性继承自parentClass.prototype，最后找到parentClass.prototype.constructor指向parentClass。显然如果没有这句话，将会导致继承链的错乱。
注意：在编程时，如果对prototype对象进行重新赋值后，记得手动奖prototype的constructor属性智慧原来的构造函数。
student.prototype.construct = student;

3、原型直接继承

原型直接继承是通过直接将子类构造函数的原型对象，直接赋值为父类构造函数的原型对象，从而达到继承的目的。
student.prototype = parentClass.prototype;
student.prototype.constructor = student;

4、class继承

20、说一下call、apply、bind区别

共同点

都可以改变this指向

语法

函数.call()、函数.apply()、函数.bind()

区别
1、call、apply会立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。
2、参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写。

场景

var arr1 = [1, 2, 4, 5, 7, 3, 321];
console.log(Math.max.apply(null, arr1));

// ------------------------------------
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function() {
    
    
	console.log(this.id);
}.bind(h1s);

21、sort背后原理是什么？

V8引擎sort函数只给出了两种排序InsertionSort和QuickSort，数量小于10的数组使用InsertionSort，比10大的数组则使用QuickSort。
之前的版本是：插入排序和快排，现在是冒泡
原理实现-710行代码开始

22、深拷贝和浅拷贝

定义
1、浅拷贝只是增加了一个指针指向已存在的内存地址。
2、深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。

浅拷贝

只复制引用，而未复制真正的值。

var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = arr1;
var obj1 = {
     
      a: 1, b: 2 };
var obj2 = Object.assign(obj1);

深拷贝

是复制真正的值（不同引用）

var obj3 = {
    
     a: 1, b: 2 };
var obj4 = JSON.parse(JSON.stringify( obj3 ));

// 递归的形式
function copyObj(obj) {
    
    
	if(Array.isArray(obj)) {
    
    
		var newObj = [];
	} else {
    
    
		var newObj = {
    
    };
	}
	
	for( var key in obj ) {
    
    
		if( typeof obj[key] == 'object' ) {
    
    
			newObj[key] = copyObj(obj[key]);
		} else {
    
    
			newObj[key] = obj[key];
		}
	}
	
	return newObj;
}
console.log(copyObj(obj5));

23、localstorage、sessionstorage、cookie的区别

公共点

在客户端存放数据

区别

1、数据存放有效期
sessionStorage: 仅在当前浏览器窗口关闭之前有效。【关闭浏览器就没了】
localStorage: 始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储。
cookie: 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。
2、localStorage、sessionStorage不可以设置过期时间
cookie 有过期时间，可以设置过期（把时间调整到之前的时间，就过期了）
3、存储大小的限制
cookie存储量不能超过4k
localStorage、sessionStorage不能超过5M
根据不同的浏览器存储的大小是不同的。

04、H5/C3

01、什么是语义化标签

1、易读性和维护性更好。
2、seo成分会更好，蜘蛛抓取更好。
3、IE8不兼容HTML5标签的解决办法：可以通过html5shiv.js去处理。

02、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

1、区别
:是伪类、::伪元素 ===》是为了做区分
2、是什么？作用
元素before之前、元素after之后
作用：清除浮动、样式布局上也有作用

03、如何关闭iOS键盘首字母自动大写

<input type="text" autocapitalize='off' />

04、怎么让Chrome支持小于12px的文字？

Chrome默认字体大小是：16px
每个浏览器默认字体大小可能都不一样

div {
    
    
	font-size: 10px;
}

div span {
    
    
	display: inline-block;
	-webkit-transform: scale(1.6);
}

05、rem和em的区别

相对于font-size
em针对于父元素的font-size
rem针对于根(html)元素的font-size

06、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

a,
button,
input,
textarea {
    
    
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

07、webkit表单输入框placeholder的颜色值能改变吗？

input::-webkit-input-placeholder {
    
    
	color: red;
}

08、禁止ios长按时不触发系统的菜单，禁止ios&android长按时下载图片

html,
body {
    
    
	touch-callout: none;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
}

09、禁止ios和android用户选中文字

html,
body {
    
    
	user-select: none;
	-webkit-user-select: none;
}

10、自适应

淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem

11、响应式

1、是什么？

一个URL可以响应多端

2、语法结构

@media only screen and (max-width: 1000px) {
     
     
	ul li:last-child {
     
     
		display: none;
	}
}
only : 可以排除不支持媒体查询的浏览器
screen ：设备类型
max-width | max-height
min-width | min-height

3、响应式图片【性能优化】

<picture>
	<source srcset="1.jpg" media='(min-width: 1000px)'>
	<source srcset="2.jpg" media='(min-width: 700px)'>
	<img srcset="3.jpg">
</picture>

布局方案
一、什么情况下采用响应式布局

数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
例如：公司的官网、专题页面
特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc+移动端应该做什么样的布局方案

注意：访问量还可以或者比较大，类似于淘宝网。
pc是一套，会加入一点点响应式。
移动端是一套，会使用自适应的布局方式。

三、pc的设计图

ui：1980
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应该怎么办？
1、把ui图进行等比缩放，缩放成和电脑一样的尺寸
2、换1980的电脑

四、移动端的设计图

宽度：750
因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。

05、ES6

1、var、let、const区别

var、let、const共同点是可以声明变量

区别一

var具有变量提升的机制
let和const没有变量提升的机制

区别二

var可以在同一作用域多次声明同一个变量
let和const不可以在同一作用域多次声明同一个变量

区别三

var、let声明变量
const声明常量
var和let声明的变量可以再次赋值，但是const不可以再次赋值。

区别四

var声明的变量没有自身作用域
let和const声明的变量有自身的作用域

1、var声明的变量会挂载在window上，而let和const声明的变量不会。
2、var声明变量存在变量提升，let和const不存在变量提升。
3、let和const声明形成块作用域。
4、同一作用域下var可以声明同名变量，而let和const不可以。
5、var或let声明的变量可以再次赋值，而const声明的是常量，不可以再次赋值。

2、作用域考题

考题一

console.log(str); // undefined
var str = '你好';

console.log(num); // 报错
let num = 10;

考题二

function demo() {
    
    
	var n = 2;
	if(true) {
    
    
		var n = 1;
	}
	console.log(n); // 1
}
demo();

function demo() {
    
    
	let n = 2;
	if(true) {
    
    
		let n = 1;
	}
	console.log( n ); // 2
}
demo();

考题三

const obj = {
    
     a: 1 };
obj.a = 11111;
console.log(obj);
// {a: 11111}

const arr = ['a', 'b', 'c'];
arr[0]= 'aaaaa';
console.log(arr);
// ['aaaaa', 'b', 'c']

3、将下列对象进行合并

方式一

const a = {
    
     a: 1, b: 4 };
const b = {
    
     b: 2, c: 3 };

let obj = Object.assign(a, b);
console.log(obj);
// {a: 1, b: 2, c: 3}

方式二

const a = {
    
     a: 1, b: 4 };
const b = {
    
     b: 2, c: 3 };

let obj = {
    
     ...a, ...b };
console.log(obj);
// {a: 1, b: 2, c: 3}

方式三

function extend(target, source) {
    
    
	for(var key in source) {
    
    
		target[key] = source[key];
	}
	return target;
}

let a = {
    
     a: 1, b: 4 },
	b = {
    
     b: 2, c: 3 };

console.log(extend(a, b));
// {a: 1, b: 2, c: 3}

4、箭头函数和普通函数有什么区别？

1、箭头函数的this在定义时确定，且不能用call、apply、bind修改，this会指向外层第一个普通函数的this
2、箭头函数不能用new关键字执行，也就是不能当作构造函数
3、箭头函数没有prototype原型
4、箭头函数没有arguments对象

5、Promise有几种状态

Promise有三种状态
pending（进行中）
fulfilled（已成功）
rejected（已失败）

6、find和filter的区别

1、返回的内容不同
filter：返回是新数组
find：返回具体的内容
2、截断不同
find：匹配到第一个即返回
filter：返回整体，返回所有匹配成功的值

7、some和every的区别

some：如果有一项匹配则返回true
every：全部匹配才会返回true

06、webpack

1、webpack插件

07、Git

1、git常用命令

2、解决冲突

3、GitFlow

08、Vue

01、Vue2.x生命周期有哪些？

生命周期	名称	描述
beforeCreate	创建前	组件实例被创建之初，组件的属性生效之前。
created	创建后	组件实例已经完全创建，属性也绑定，但真实DOM还没有生成，$el还不可用。
beforeMount	载入前	在挂载开始之前被调用，相关的render函数首次被调用。
mounted	载入后	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate	更新前	组件数据更新之前调用，发生在虚拟DOM打补丁之前。
update	更新后	组件数据更新之后。
beforeDestory	销毁前	实例销毁前调用，实例仍然可用。
destoryed	销毁后	实例销毁之后调用，Vue实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除。

beforeCreate() {
    
    
	console.log('beforeCreate');
}

created() {
    
    
	console.log('created');
}

beforeMount() {
    
    
	console.log('beforeMount');
}

mounted() {
    
    
	console.log('mounted');
}

beforeUpdate() {
    
    
	console.log('beforUpdate');
}

updated() {
    
    
	console.log('updated');
}

beforeDestroy() {
    
    
	console.log('beforeDestroy');
}

destroyed() {
    
    
	console.log('destroyed');
}

02、第一次进入组件或者页面，会执行哪些生命周期？

beforeCreate、created、beforeMount、mounted

03、谈谈你对keep-alive的了解

概念

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。

作用

组件在切换过程中将状态保留到内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理

在created函数调用时将需要缓存的VNode节点保存在this.cache中；在render执行时，如果VNode的name符合缓存条件，则会从this.cache中取出之前缓存的VNode实例进行渲染。

04、v-if和v-show区别

定义

v-if指令是通过销毁和重建DOM来使元素显示或隐藏。
v-show指令是通过修改元素的display属性让其显示或隐藏。

应用场景

v-if适用于不需要频繁切换条件的场景。
v-show适用于需要频繁切换条件的场景。

05、v-if和v-for优先级

v-for的优先级高于v-if，连用的话每个循环出来的元素都添加了v-if，会造成性能问题，影响渲染速度，所以不建议连用。

06、ref是什么？

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

07、nextTick是什么？

异步方法，异步渲染最后一步，与JavaScript事件循环联系紧密。主要使用了宏任务微任务定义了一个异步方法，多次调用$nextTickt会将方法存入队列，通过异步方法清空当前队列。

08、路由导航守卫有哪些？

全局

beforeEach
beforeResolve
afterEach

路由独享

beforeEnter

组件内

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

09、Vue中如何做样式穿透

sass和less：/deep/
通用使用：:v-deep

10、scoped原理

1、作用：让样式在本组件中生效，不影响其他组件。
2、原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

11、Vuex是单向数据流还是双向数据流？

12、讲一下MVVM

MVVM是Model-View-ViewModel的缩写，也就是把MVC中的controller演变成ViewModel。
1、Model表示数据模型层，也就是vue中的data。
2、View表示视图层，也就是UI组件。
3、ViewModel是View和Model层的桥梁，数据绑定到viewModel层并自动渲染到页面中，视图变化会通知viewModel层更新数据。

Web-big、html、css、JavaScript、vue、webpack、git、微信小程序、uni-app、性能优化、兼容性、网络请求、web安全、其他

文章目录

01、HTML基础

1、行内元素有哪些？行内块元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

2、页面导入样式时，使用link和@import有什么区别？

3、title与h1的区别、b与strong的区别、i与em的区别？

4、img标签的title和alt有什么区别？

5、png、jpg、gif、webp这些图片格式解释一下，分别什么时候用？

02、CSS基础

01、介绍一下CSS的盒子模型

02、line-height和heigh区别

03、CSS选择符有哪些？哪些属性可以继承？

04、CSS优先级算法如何计算？

05、用CSS画一个三角形

06、一个盒子不给宽度和高度如何水平垂直居中？

07、display有哪些值？说明他们的作用。

08、对BFC规范(块级格式化上下文：block formatting context)的理解？

09、清除浮动有哪些方式？

10、在网页中的应该使用奇数还是偶数的字体？为什么呢？

11、position有哪些值？分别是根据什么定位的？

12、写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

13、什么是CSS reset？

14、css sprite是什么，有什么优缺点

15、display: none;与visibility: hidden;的区别

16、opacity和rgba区别

03、JavaScript基础

01、延迟加载JS有哪些方式？

02、JS数据类型有哪些？

03、JS数据类型考题

04、null和undefined的区别

05、两等和三等有什么不同

06、JS微任务和宏任务

07、JS作用域考题

08、JS对象考题

09、JS作用域+this指向+原型考题

10、JS判断变量是不是数组，你能写出哪些方法？

11、slice是干嘛的、splice是否会改变原数组

12、JS数组去重

13、找出多维数组最大值

14、给字符串新增方法实现功能

15、找出字符串出现最多次数的字符以及次数

16、new操作符具体做了什么

17、闭包

18、原型链

19、JS继承有哪些方式

20、说一下call、apply、bind区别

21、sort背后原理是什么？

22、深拷贝和浅拷贝

23、localstorage、sessionstorage、cookie的区别

04、H5/C3

01、什么是语义化标签

02、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

03、如何关闭iOS键盘首字母自动大写

04、怎么让Chrome支持小于12px的文字？

05、rem和em的区别

06、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

07、webkit表单输入框placeholder的颜色值能改变吗？

08、禁止ios长按时不触发系统的菜单，禁止ios&android长按时下载图片

09、禁止ios和android用户选中文字

10、自适应

11、响应式

05、ES6

1、var、let、const区别

2、作用域考题

3、将下列对象进行合并

4、箭头函数和普通函数有什么区别？

5、Promise有几种状态

6、find和filter的区别

7、some和every的区别

06、webpack

1、webpack插件

07、Git

1、git常用命令

2、解决冲突

3、GitFlow

08、Vue

01、Vue2.x生命周期有哪些？

02、第一次进入组件或者页面，会执行哪些生命周期？

03、谈谈你对keep-alive的了解

04、v-if和v-show区别

1、行内元素有哪些？行内块元素有哪些？块级元素有哪些？空(void)元素有哪些？