Web-bightmlcssJavaScriptvuewebpackgit微信小程序uni-app性能优化兼容性网络请求web安全其他

Posted web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web-bightmlcssJavaScriptvuewebpackgit微信小程序uni-app性能优化兼容性网络请求web安全其他相关的知识，希望对你有一定的参考价值。

文章目录

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 


 
 
 
 
(c)2006-2019 SYSTEM All Rights Reserved  IT常识