文章目录
- 1.说说你对盒子模型的理解?
- 2.如何让一个盒子水平垂直居中,
- 3.说说javascript都有哪些数据类型,如何存储的?
- 4.什么是响应式设计?响应式设计的基本原理是什么?如何做?
- 5.Css性能优化有哪些常见的方法?具体如何实现?
- 6.判断数据类型的方法有哪些?有什么区别?
- 8.说说你对BOM的理解,BOM的核心都有哪些?作用是什么
- 9.Bind,call,apply有什么区别?如何实现一个bind方法?
- 10.如何理解闭包?闭包的应用场景是?
- 11.说说你对同步和异步的区别的理解?
- 12.Css选择器有哪些?优先级是什么?哪些属性可以继承?
- 13.简单说一下什么是事件代理?
- 14.如何理解重回和回流?使用场景
- 20.Javascript本地存储有哪些?区别和使用场景?
1.说说你对盒子模型的理解?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性,分为标准模型和IE模型,标准模型的宽度不包括内边距,IE模型的宽度要包括内边距。
content:即实际内容,显示文本和图像;
border:即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成;
padding:即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响;
margin:即外边距,在元素外创建格外的空白,空白通常指不能放其他元素的区域。
二、标准模型
盒子总高度 = height + padding + border + margin;
盒子总宽度 = weight + padding + border + margin.
即weight /height 只是内容的宽高度,不包含padding 和margin
三、IE模型
盒子总高度 = height + margin;
盒子总宽度 = weight + margin.
即weight /height 包含了padding和border.
div {
box-sizing:content-box; /*默认标准盒子*/
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
border: 5px black solid;
margin: 30px;
}
.border {
box-sizing:border-box; /*IE盒子*/
}
2.如何让一个盒子水平垂直居中,
方法一:利用定位
父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法二:利用margin:auto
有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会自动去计算子元素和父元素之间的边距,并设为居中。所以就会实现上下左右都居中。
那么还有一个问题,既然居中是有margin:auto来计算实现。为什么还需要将元素设为绝对定位呢?
这是因为margin:auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。
但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以能实现垂直居中
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父盒子设置相对定位 */
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
/* 子盒子设置绝对定位,将top,left,right,bottom设置为0 设置margin为auto 通过计算所得,能实现垂直居中。 */
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法三:利用display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
/* 会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法四:利用display:flex
flex布局设置主轴从轴居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
display: flex;
/* 主轴居中 */
justify-content: center;
/* 从轴居中 */
align-items: center;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
记得给盒子添加边框,防止产生外边距塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
/*父盒子添加边边框,防止外边距塌陷*/
border: 1px solid transparent;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
margin-top: 150px;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法六: 利用transform(变换)实现居中
这个方法与方法一类似,也是使用子绝夫相,先是让子盒子在父盒子的上和左50%再返回自身宽高的50%,从而来实现居中,在translate中的百分比是相较与自身宽高来计算的,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父盒子设置相对定位 */
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
/* translate中的%百分比相对的是自身的 也就是向左向上走自身的%50来实现居中效果 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
3.说说javascript都有哪些数据类型,如何存储的?
js中的数据类型分类
JavaScript一共有8种数据类型,有7种基本数据类型(原始数据类型、简单数据类型)和1种引用数据类型(复杂数据类型)
基本数据类型:Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值)和BigInt(es10新增);
引用数据类型:Object(Object本质上是由一组无序的名值对组成的),里面包含 function、Array、Date等。注意:JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 8 种数据类型之一。
js中数据存储方式
基本数据类型:直接存储在栈(stack)中,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。
引用数据类型:同时存储在栈(stack)和堆(heap)中,占据空间大、大小不固定。引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。
let str1="hello"
let str2="diveng"
let obj={name:"diveng"}
let arr=[2033,'javascript']
字符串str1和str2都是基本类型,变量和值都存储在栈内存中。而obj是对象,arr是数组,属于引用类型,其存储方式为:对象名存储在栈内存中,对象中的属性与属性值都存储在堆内存中,同时在栈内存和堆内存中分别存储一个地址,将二者联系起来,通过栈内存中的地址寻找堆内存中相同的地址。
两种数据类型赋值方式的区别
1.基本类型赋值时,拷贝的是数据
2.应用类型赋值时,拷贝的是地址
栈内存与堆内存的区别
4.什么是响应式设计?响应式设计的基本原理是什么?如何做?
响应式布局:指在同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,移动端再开发一套,pad端再开发一套,而使用响应式布局只要开发一套就够了。
响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是移动端、PC端、pad端,从而请求服务层,返回不同的页面。
二、响应式实现方式
媒体查询
流体布局(float)
弹性布局(flex)
通过 JavaScript、JQuery 进行判断来显示不同的布局页面
Bootstrap 等第三方框架 。 BootStrap的官网
rem
vw/vh
百分比
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
三、响应式布局优缺点
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
5.Css性能优化有哪些常见的方法?具体如何实现?
1. 使用内联样式
如果给定样式仅用于单个特定页面元素(例如图像滑块或轮播)并且该组件仅用于站点中的少数页面,请使用内联样式而不是通用加载的 CSS 文件。这不仅会减少外部样式表的大小,还会减少在不使用该组件的页面上发生的 CSS 选择器评估的数量。
2. 使用特定的样式
不要将样式应用于通用选择器、后代选择器和顶级 HTML 元素。这样做会触发许多布尔评估。相反,通过选择更细粒度的元素(例如单个类样式)来优化 CSS 性能。
3. 使用 WebComponents 优化 CSS
WebComponents 是自包含的,减少了对共享 CSS 和 JavaScript 的需求,WebComponents 框架是一种相对较新的基于标准的方法,用于创建可重用组件,其中 JavaScript 和样式是自包含和隔离的。当你将组件所需的样式保留在全局共享的 CSS 文件之外时,你不会看到对站点的其他区域的性能影响,因为未使用的样式应用程序会不必要地消耗时钟周期。
4. 拆分你的 CSS 文件
如果你的许多 CSS 文件是针对特定浏览器或设备定制的,请将这些样式分解为多个 CSS 文件。在运行时,仅加载必要的那些。
这个 CSS 性能优化技巧将需要一些客户端 JavaScript 或服务器端处理来完成,但对用户的好处将值得付出额外的努力。
例如,如果移动和桌面呈现显着不同,这可能会在每种设备类型上将文档对象模型 (DOM) 评估的数量减少 50%。
5. 减小 DOM 的大小
用于拆分 CSS 文件的技巧也可用于减小 DOM 的大小。
另一个 CSS 性能优化技巧类似于将 CSS 文件拆分为多个特定于设备的文件。相反,你还可以缩小网页本身的大小,减少 HTML 中 DOM 元素的数量,从而加快客户端渲染速度。
但是,处理 CSS 的问题不仅在于需要应用于页面的样式数量,还在于实际页面上的 DOM 元素数量。许多采用响应式设计的现代网页会在每个页面请求上加载 HTML 源代码,以实现移动和桌面体验。相反,使用客户端 JavaScript 甚至服务器端技术来确保不会将多余的 HTML 加载到永远不会使用它的页面上。这可以显着减少 DOM 大小以及页面需要经过的样式表评估次数。
6.判断数据类型的方法有哪些?有什么区别?
1.typeof
返回表示数据类型的字符串。
一般用来判断基本数据类型(但判断null类型是返回object),typeof 目前能返回string,number,boolean,symbol(ES6新增基本数据类型,表示独一无二的值,使用 symbol 作为属性名可以保证不会出现同名属性),bigint(es10新增一种基本数据类型,BigInt 可以表示任意大的整数,整数溢出将不再是问题。),unfined,object,function这八种判断类型。
typeof 运算符的问题是无论引用的对象是什么类型,它都返回object
2.instanceof
返回布尔值。
一般用来检测引用数据类型,如:Object,Function,Array,Date,RegExp等。
A instanceof B 判断A是否是B的实例,根本就是判断B.protoytpe是否在A的原型链上,所以无法判断具体是哪一种数据类型,arr instanceof Object=true,arr instanceof Array=true。
实现instanceof:
function instance_of(L, R) { // L 表示instanceof左边,R 表示instanceof右边
let O = R.prototype; // 取 R 的显示原型
L = L.__proto__; // 取 L 的隐式原型
while (true) { // 循环执行,直到 O 严格等于 L
if (L === null) return false;
if (O === L) return true;
L = L.__proto__;
}
}
3.Object.prototype.toString.call()
返回为[object,xxx]格式的字符串,xxx即判断数据的具体类型。
基本上所有对象的类型都可以通过这个方法获取到。
使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。
原理:每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用 toString 方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply方法来改变toString方法的执行上下文
4.constructor
constructor是原型对象的属性,指向构造函数。a.constructor==b。判断b是不是a的构造函数。
null和undefined是无效的对象,因此是不会有constructor存在的,所以constructor判断不了这两种类型。
JS对象的constructor是不稳定的,当开发者重写prototype后,原有的constructor会丢失,constructor会默认为Object
undefined和null的区别:
当声明的变量还未被初始化时,变量的默认值为undefined。
null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
null表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。
8.说说你对BOM的理解,BOM的核心都有哪些?作用是什么
1.Browser Object Model: 浏览器对象模型
2、作用:
(1)可以操作浏览器窗口及浏览器窗口中的控件(标签):即可以在JavaScript程序中操作标签
(2)实现页面和用户之间的动态交互
3、浏览器对象:一系列浏览器内置对象的统称
4、浏览器对象模型:内置对象之间按照某种层次组织起来的结构
二、BOM对象
1、window对象:浏览器窗口对象,是BOM的核心,BOM的其他内置对象可以作为window的属性
2、document对象:文档对象,是DOM的核心
3、location对象:地址对象。浏览器的地址栏
4、history对象:历史对象。浏览器的访问记录,可以实现前进和后退。
5、navigator对象:浏览器对象,又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核等信息
6、screen对象:屏幕对象。用于获取和屏幕有关的数据。例如屏幕分辨率
9.Bind,call,apply有什么区别?如何实现一个bind方法?
bind()方法创建一个新的函数,将传入的对象绑定为新函数的this值,并返回一个新函数。这个新函数可以在以后的任何时间被调用,并且this值始终指向绑定的对象。
call()方法调用一个函数,并将一个对象作为函数执行时的上下文(this 值),以及一个参数列表传递给函数。
apply()方法也调用一个函数,但是它接受一个数组作为参数,数组中的每个元素将被视为函数的一个参数。第一个参数仍然是函数执行时的上下文。
实现一个bind()方法的基本思路是:
返回一个新的函数,该函数在调用时将传入的对象作为其上下文对象(this 值)。
返回的函数应该接受任意数量的参数,这些参数在调用时应该作为原始函数的参数传递。
如果返回的函数被用作构造函数(使用 new 关键字),则应该创建一个新对象并使用原始函数的原型继承它,然后使用新对象作为上下文对象来调用原始函数,并将其参数传递给原始函数。
如果返回的函数被直接调用,则只需要将参数传递给原始函数。
下面是一个简单的实现:
Function.prototype.myBind = function(context, ...args) {
const fn = this;
return function(...innerArgs) {
if (this instanceof fn) {
return new fn(...args, ...innerArgs);
}
return fn.apply(context, [...args, ...innerArgs]);
}
};
这个myBind()方法接受一个context参数作为上下文对象,并返回一个新函数。新函数会将传入的参数args 与在调用时传递给新函数的参数innerArgs合并,并将它们传递给原始函数。如果新函数被调用时使用new关键字,则它会创建一个新对象,并将它作为上下文对象使用,然后将参数传递给原始函数。否则,它将使用传入的 context对象作为上下文对象来调用原始函数,并将参数传递给它。
10.如何理解闭包?闭包的应用场景是?
一、闭包的特性
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
二、闭包的定义及其优缺点
定义:
闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量
缺点:
闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
存在闭包的原因:
内部的函数存在外部作用域的引用就会导致闭包。
闭包是javascript语言的一大特点,主要应用闭包场合主要是为了:设计私有的方法和变量。
一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。但闭包的情况不同!
11.说说你对同步和异步的区别的理解?
同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。
同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。
同步如打电话,通信双方不能断(我们是同时进行,同步),你一句我一句,这样的好处是,对方想表达的信息我马上能收到,但是,我在打着电话,我无法做别的事情。
异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。
将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。
异步如收发收短信,对比打电话,打电话我一定要在电话的旁边听着,保证双方都在线,而收发短信,对方不用保证此刻我一定在手机旁,同时,我也不用时刻留意手机有没有来短信。这样的话,我看着视频,然后来了短信,我就处理短信(也可以不处理),接着再看视频。
区别:
同步和异步的区别是同步是阻塞模式,异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
12.Css选择器有哪些?优先级是什么?哪些属性可以继承?
关于css属性选择器常用的有:
id选择器(#box),选择id为box的元素
类选择器(.one),选择类名为one的所有元素
标签选择器(div),选择标签为div的所有元素
后代选择器(#box div),选择id为box元素内部所有的div元素
子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素
相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素
群组选择器(div,p),选择div、p的所有元素
还有一些使用频率相对没那么多的选择器:
伪类选择器:
:link :选择未被访问的链接
:visited:选取已被访问的链接
:active:选择活动链接
:hover :鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素
伪元素选择器:
:first-letter :用于选取指定选择器的首字母
:first-line :选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
属性选择器:
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]:选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下:
层次选择器(p~ul),选择前面有p元素的每个ul元素
伪类选择器:
:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素,从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 元素的所有元素
属性选择器:
[attribute*=value]:选择attribute属性值包含value的所有元素
[attribute^=value]:选择attribute属性开头为value的所有元素
[attribute$=value]:选择attribute属性结尾为value的所有元素
优先级
内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层⾯,优先级是由 A 、B、C、D 的值来决定的,其中它们的值计算规则如下:
如果存在内联样式,那么 A = 1, 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
D 的值等于 标签选择器 和 伪元素 出现的总次数
#nav-global > ul > li > a.nav-link
套用上面的算法,依次求出 A B C D 的值:
因为没有内联样式 ,所以 A = 0
ID选择器总共出现了1次, B = 1
类选择器出现了1次, 属性选择器出现了0次,伪类选择器出现0次,所以 C = (1 + 0 + 0) = 1
标签选择器出现了3次, 伪元素出现了0次,所以 D = (3 + 0) = 3
上面算出的A 、 B、C、D 可以简记作:(0, 1, 1, 3)
知道了优先级是如何计算之后,就来看看比较规则:
从左往右依次进行比较 ,较大者优先级更高
如果相等,则继续往右移动一位进行比较
如果4位全部相等,则后面的会覆盖前面的
经过上面的优先级计算规则,我们知道内联样式的优先级最高,如果外部样式需要覆盖内联样式,就需要使用!Important
继承属性:
在css中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性
关于继承属性,可以分成:
字体系列属性
文本系列属性:
元素可见性
表格布局属性
列表属性
引用
光标属性
继承中比较特殊的几点:
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性:
display
文本属性:vertical-align、text-decoration
盒子模型的属性:宽度、高度、内外边距、边框等
背景属性:背景图片、颜色、位置等
定位属性:浮动、清除浮动、定位position等
生成内容属性:content、counter-reset、counter-increment
轮廓样式属性:outline-style、outline-width、outline-color、outline
页面样式属性:size、page-break-before、page-break-after
13.简单说一下什么是事件代理?
事件代理又叫事件委托,是在网页设计中的一种设计思想,即把一个或者一组元素(目标元素)的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素,⽽不是⽬标元素。
当事件响应到⽬标元素上时,会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上,然后在外层元素上去执⾏函数。
举个例子——疫情封寝的时候,一个寝室大家都要买饭,如果每个人都出去就很麻烦,这时就委托一个志愿者帮忙给寝室每个人带饭,然后把饭分给每个人,这个就是事件代理。
优点:
(1)降低性能的消耗,减少整个⻚⾯所需的内存,提升整体性能(减少冗余,节约资源)
(2)可以实现动态绑定,减少重复⼯作
局限性:
(1)有些事件(没有冒泡特性的)不可以用事件代理进行绑定,比如focus、blur
(2)mousemove 、 mouseout 这样的事件,虽然有事件冒泡,但是需要不断计算位置定位,对性能消耗高,也是不适合用事件代理的
(3)如果把所有事件都⽤事件代理,可能会出现事件误判,即本不该被触发的事件被绑定上了事件
主要解决的问题:
解决静态的事件绑定问题;解决业务相同,而性能消耗却更高的问题。
适合用事件代理的事件:
click、mousedown、mouseup、keydown、keyup、keypress
14.如何理解重回和回流?使用场景
一、什么是回流?
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流
下面这些操作会导致回流:
页面的首次渲染
浏览器的窗口大小发生变化
元素的内容发生变化
元素的尺寸或者位置发生变化
元素的字体大小发生变化
激活CSS伪类
查询某些属性或者调用某些方法
添加或者删除可见的DOM元素
在触发回流(重排)的时候,由于浏览器染页面是基于流式布局的,所以当触发回流时,会导致周围的DOM元素重新排列,它的影响范围有两种:
全局范围: 从根节点开始,对整个渲染树进行重新布局
局部范围:对渲染树的某部分或者一个渲染对象进行重新布局
二、什么是重绘?
当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这人过程就是重绘。
下面这些操作会导致重绘:
color、background 相关属性: background-color、background-image等。
outline 相关属性: outline-color、 outline-width 、text-decoration
border-radius、 visibility、 box-shadow
可以把页面理解为一个黑板,黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边,那我们要先确定好右边的具体位置,画好形状(回流),再画上它原有的颜色(重绘)
**注意: 当触发回流时,一定会触发重绘,但是重绘不一定会引发回流 (触发回流一定会触发重绘)
**
三、如何避免回流与重绘?
减少回流与重绘的措施:
操作DOM时,尽量在低层级的DOM节点进行操作 不要使用 table 布局,一个小的改动可能会使整人 table 进行重新布局
使用CSS的表达式 不要频繁操作元素的样式,对于静态页面,可以修改类名,而不是样式
使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素 避免频繁操作DOM,可以创建一个文档片段
documentFragment ,在它上面应用所有DOM操作,最后再把它添加到文档中 将元素先设置 display:
none操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
将DOM的多人读操作(或者写操作) 放在一起,而不是读写操作穿插着写。这得益干浏览器的渲染队列机制。
浏览器针对页面的回流与重绘,进行了自身的优化染队列
20.Javascript本地存储有哪些?区别和使用场景?
javaScript本地缓存的方法我们主要讲述以下四种:
cookie
sessionStorage
localStorage
indexedDB
Cookie,类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP无状态导致的问题
作为一段一般不超过 4KB 的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制
cookie有效期、安全性、使用范围的可选属性组成但是cookie在每次请求中都会被发送,如果不使用 HTTPS并对其加密,其保存的信息很容易被窃取,导致安全风险。举个例子,在一些使用
cookie保持登录态的网站上,如果 cookie被窃取,他人很容易利用你的 cookie来假扮成你登录网站
localStorage
HTML5新方法,IE8及以上浏览器都兼容
#特点
生命周期:持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
存储的信息在同一域中是共享的
当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件。
大小:5M(跟浏览器厂商有关系)
localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
受同源策略的限制
sessionStorage
sessionStorage和 localStorage使用方法基本一致,唯一不同的是生命周期,一旦页面(会话)关闭,sessionStorage 将会删除数据
#扩展的前端存储方式
indexedDB是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索
虽然 Web Storage对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB提供了一个解决方案
#优点:
储存量理论上没有上限
所有操作都是异步的,相比 LocalStorage 同步操作性能更高,尤其是数据量较大时
原生支持储存JS的对象
是个正经的数据库,意味着数据库能干的事它都能干
#缺点:
操作非常繁琐
本身有一定门槛
关于indexedDB的使用基本使用步骤如下:
打开数据库并且开始一个事务
创建一个 object store
构建一个请求来执行一些数据库操作,像增加或提取数据等。
通过监听正确类型的 DOM 事件以等待操作完成。
在操作结果上进行一些操作(可以在 request对象中找到)
关于使用indexdb的使用会比较繁琐,大家可以通过使用Godb.js库进行缓存,最大化的降低操作难度
#二、区别
关于cookie、sessionStorage、localStorage三者的区别主要如下:
存储大小:cookie数据大小不能超过4k,sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
有效时间:localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage数据在当前浏览器窗口关闭后自动删除;cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
数据与服务器之间的交互方式,cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端; sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
#三、应用场景
在了解了上述的前端的缓存方式后,我们可以看看针对不对场景的使用选择:
标记用户与跟踪用户行为的情况,推荐使用cookie
适合长期保存在本地的数据(令牌),推荐使用localStorage
敏感账号一次性登录,推荐使用sessionStorage
存储大量数据的情况、在线文档(富文本编辑器)保存编辑历史的情况,推荐使用indexedDB