Web-bightmlcssJavaScriptvuewebpackgit微信小程序uni-app性能优化兼容性网络请求web安全其他
Posted web半晨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web-bightmlcssJavaScriptvuewebpackgit微信小程序uni-app性能优化兼容性网络请求web安全其他相关的知识,希望对你有一定的参考价值。
文章目录
- 01、HTML基础
- 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
- 05、ES6
- 06、webpack
- 07、Git
- 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、微信小程序
- 10、uni-app
- 11、性能优化
- 12、兼容性
- 13、网络请求
- 14、WEB安全
- 15、其他
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