0519面试题扩展

月夜狼群

于 2021-05-19 20:04:29 发布

阅读量50

点赞数

本文链接：https://blog.csdn.net/waojscs/article/details/117044317

版权

https协议

HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

HTTP 与 HTTPS 的区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变

background-image: linear-gradient(方向, 颜色1, 颜色2, ...);

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

颜色允许使用透明度rgba颜色

从上到下
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右
#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

左上到右下
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}
使用角度
#grad {
  height: 200px;
  background-image: linear-gradient(-90deg, red, yellow);
}

径向渐变

background-image: radial-gradient(形状, 颜色1, 颜色2);

形状circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

颜色节点不均匀分布

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

定位

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

重复渐变(丑的一匹)

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

first-child和first-of-type的区别

<div>
    <p>1</p>
    <h1>2</h1>
    <span>3</span>
</div>

first-child

p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；

h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；

span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；

first-of-type

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；

h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；

span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

前端性能优化方案 - DOM

减少DOM数量

在HTML生成DOM树的时候，DOM数量越少，HTML渲染速度越快

减少DOM操作

每次操作DOM，都会带来repaint和refolw

批量处理DOM操作：

将元素移除DOM Tree，修改完后再放回去，因此只会调用一次repaint或者reflow

批量修改样式

改变classname，或者用css()，原理和批量处理js一样

尽量不要使用tabel布局

tabel中某个元素改变了，整个tabel就会reflow.

如果非用不可，可以设置tabel-layout:auto或者tabel-layout：fixed,让tabel一行一行的渲染，限制渲染范围

尽量不要使用css表达式

这个是ie5以后版本支持在css中使用expression(),用来把css属性和js脚本关联起来,每计算一次就会触发reflow一次

string用数组join连接

在js中使用“+”来拼接字符串效率比较低，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接的字符串赋值给新变量。使用数组的话效率就高一点

css选择符优化

因为css是从右向左解析的，根据这个规则，尽量使右边的样式唯一

css选择符优化

样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其它选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

 #toc > li {
      font-weight:bold;
 }

我们普遍认为浏览器会这样工作：找到唯一的id为toc的元素，然后继续寻找这个元素的直系子元素LI，把样式应用到LI上。我们知道只有一个id为toc的元素，并且它只有几个LI子元素，所以这个CSS选择符应该相当高效。然鹅，浏览器并没有按照我们的套路走，事实上，CSS选择符是按照从右到左的顺序进行匹配的。了解这个特性后，我们知道这个之前看似高效的规则实际上开销相当高，浏览器必须遍历页面上每个LI元素并确定其父元素的id是否为toc。

后代选择符的效率更糟：

#toc  a{
     color:#fff;
}

在这个选择符中，浏览器会检查整个文档中的每个链接，然而，浏览器并不仅仅检查每个链接的父元素，甚至还要遍历文档树去查找id为toc的祖先元素。如果被检查的链接不是toc元素的后代，那么浏览器就要向上一级遍历直到文档的根节点。

div div div p a.class0007{
    color:red;
}

一眼看上去，这似乎是一个开销很高的选择符，它是一个要匹配5级祖先元素的后代选择符，然而浏览器会从右到左进行匹配，所以这个后代选择符的速度和一个更简单的类选择符差不多。最右边的参数也叫关键选择符，它对浏览器执行的工作量起主要影响。在本例中，关键选择符是a.class0007，页面中只有一个元素匹配这个关键选择符，所以这个选择符的匹配时间是极少的。

理解了选择符的右边优先原则，我们就可以从另一个角度看CSS选择符，并将其调整得更高效。下面是一些编写高效选择符的指南：

避免使用通配规则
除了传统意义上的通配选择符之外，Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到“通配规则”分类下。他推荐仅使用ID、类和标签选择符。

不要限定ID选择符
在页面中一个指定ID只能对应一个元素，所以没有必要添加额外的限定符。例如：

div#toc 是没有必要的，应该简化为#toc。

不要限定类选择符
不要用具体的标签限定类选择符，而是根据实际情况对类型进行扩展。例如：

把li.chapter 改成 .li-chapter。

让规则越具体越好
不要试图编写像ol li a这样的长选择符，最好是创建一个像.list-anchor一样的类，并把它添加到适当的元素上。

避免使用后代选择符
处理后代选择符的开销是最高的，而通常使用子选择符也可以得到想要的结果，并且更高效。遵循下一条指南就更好了，这样连子选择符也可以避免使用了。

避免使用标签—子选择符
如果有像#toc > li > a 这样的基于标签的子选择符，那么应该使用一个类来关联每个标签元素，比如.toc-anchor。

依靠继承
了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。