前端作業01

weixin_37178278

已于 2022-02-23 18:35:07 修改

阅读量435

点赞数

文章标签：前端

于 2022-02-23 08:19:28 首次发布

本文链接：https://blog.csdn.net/weixin_37178278/article/details/123072294

版权

1.CSS选择器的优先级排序，怎么计算权值？

共分为5个等级：

第1等：提升指定样式规则的应用优先权，如：color:red !important，权值为10000（不建议使用）

第2等：代表内联样式，如: style="xxx"，权值为1000

第3等：代表ID选择器，如：#content，权值为100

第4等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10

第5等：代表元素选择器和伪元素选择器，如div，p，权值为1

通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0

1.1、元素被两个css样式选中，选择权重大的样式，如果权重一样，以css中后出现的为准

1.2、元素没有被css样式选中，要显示继承的样式时，使用就近原则

1.3、继承的样式权重为0（color、 text-开头的、line-开头的、font-开头的样式都可以继承）

2.CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)

3.CSS的引用方式有哪些？它们的区别？

3.1、内联引用CSS

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
这种方法优点：可灵巧应用样式於各标签中。方便于编写代码时的使用。
这种方法缺点：没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难。

3.2、内部引用CSS

将样式规则写在<STYLE>...</STYLE>标签之中。

<STYLE TYPE="text/CSS">

</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。
这种方法的优点：整篇文章有了统一性，只要是有声明的的元件即会套用该样式规则。
这种方法的缺点：个别元件的灵活度不足，整站的功能性较弱。

3.3、外部引用 link 标签引用CSS

将样式规则写在.css的样式文件中，再以<link>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入：

这样引入该css样式表文件以后，就可以直接套用该样式档案中所制定的样式了。通常是将link标签写在网页的<head></head>部份之中。
这种方法的优点：可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中，可以进行统一的修改，也便于整站的设置有统一的风格。一般css网页布局都使用此种方法。
这种方法的缺点：在个别文件或元素的灵活度不足。

3.4、外部引用 @import 引用CSS

跟link方法很像，但必须放在<STYLE>...</STYLE> 中：

4.如何解决页面内容加载缓慢的问题？

4.1、使用免费 cdn 加载第三方资源

所有网站都会用到第三方资源，对于第三方资源，如果选择让自己的服务器提供，那么对于小型站点，本就不大的带宽相当一部分还要被公共资源占用，无形之中压缩了服务器带宽，如果把这部分资源让第三方 cdn 提供，那么对于网站加载速度会有不小的提升。

bootstrap 中文站提供的 cdn 静态库，可以说 bootstrap 家的还是很良心的，更新及时，资源现在也很丰富，于是接下来就是搜索静态资源＋替换静态资源：

<script src="/s/js/jquery.min.js"></script>
改为
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

这里不要写协议头，让网页自动判断使用 http 还是 https

4.2、合并压缩js,css,减少请求次数以及减少流量的消耗

4.3、代码优化：

HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，JavaScript的引入放在页面尾

其次：

按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；
优化 cookie ，减少 cookie 体积；
避免 <img> 的 src 为空；
尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；
合理使用display属性：
(1).字体图标

(2).雪碧图

(3).图片地图

a.display:inline后不应该再使用width、height、margin、padding以及float
b.display:inline-block后不应该再使用float
c.display:block后不应该再使用vertical-align
d.display:table-*后不应该再使用margin或者float

不滥用Float 和 web 字体；
尽量使用CSS3动画；
使用 ajax 异步加载部分请求；

4.4、懒加载

对于一些图片，显示首屏的，后面scroll到的时候再加载

4.5、预加载

预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

5.是否熟悉使用开发者工具？有没有使用过断点调试？
6.说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie跟服务端进行数据交互。cookie是用来跟踪浏览器用户身份的会话方式

cookie机制：如果不在浏览器中设置过期事件，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件，cookie会被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

localStorage和sessionStorage的区别

1.生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2.存储大小

localStorage和sessionStorage的存储数据大小一般都是：5MB

3.存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

4.存储内容类型

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5.获取方式

localStorage：window.localStorage
sessionStorage：window.sessionStorage

6.应用场景

localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage：敏感账号一次性登录

WebStorage的优点

（1）存储空间更大：cookie为4KB，而WebStorage是5MB

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务端的交互，节省了网络流量

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便

（4）快速显示：有的数据存储在WebStorage上再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说会比较高一些，不会担心截获，但是仍然存在伪造问题

（6）WebStorage提供了一些方法，数据操作比cookie方便

setItem(key, value) —— 保存数据，以键值对的方式存储信息

getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值

removeItem(key) —— 删除单个数据，根据键值移除对应的信息

clear() —— 删除所有的数据 key(index) —— 获取某个索引的key

7.vue生命周期的理解

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

生命周期	发生了什么
beforeCreate	初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问
created	初始化界面后 : 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数,也就是不会更新视图，SSR可以放这里。
beforeMount	挂载前：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated
mounted	挂在完成：将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作
beforeUpdate	更新数据前：组件数据更新之前调用，数据都是新的,页面上数据都是旧的组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据，不会造成重渲染
updated	组件更新后： render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新
beforeDestroy	组件卸载前 : 实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器
destroyed	组件卸载后：组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
activited	keep-alive 专属 , 组件被激活时调用
deactivated	keep-alive 专属 , 组件被销毁时调用

8.v-if和v-show的作用相似，它们的区别？

相同点：

v-if和v-show都是控制元素的显示和隐藏
区别：

v-if是真正的条件渲染，当条件为true时，元素被渲染，为false时元素被销毁。切换开销较大
v-show不管为true还是false，元素都被渲染，是利用css属性display来控制元素的显示和隐藏，当为true时，display的值为block，为false时，dispaly的值为none。初始渲染开销比较大
最佳使用情况：

当元素需要频繁切换显隐时，应该使用v-show
当元素极少切换显隐时，应该使用v-if