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种基本数据类型:NullUndefinedBooleanNumberStringSymbol(ES6新增,表示独一无二的值)和BigInt(ES10新增)。
1种引用数据类型:Object。Object里面包含ObjectArrayFunctionDateRegExp等。
总结: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-2024 SYSTEM All Rights Reserved IT常识