DAY11刷面试题

小组项目进了一个大家都不讨论的组真的要命，害。自生自灭了，也不知道要怎么办。

什么是正向代理和反向代理

常说的代理一般指的是正向代理，正向代理隐藏了真实的请求，客户端服务端都不知道真实的客户端是谁，客户端请求的服务都被代理服务器代替来请求。

反向代理隐藏了真实的服务器，当我们请求一个网站的时候，背后可能会有很多台服务器为我们服务，但是具体哪台不知道，也不需要知道，只需要知道反向代理服务器是谁就可以了，反向代理服务器会帮我们把请求转发到真实的服务器去。
反向代理器一把用来实现负载均衡。

负载平衡实现的两种方式

1、反向代理，用户的请求都发送到反向代理服务上，然后由反向代理服务器来转发到真实的服务器上，实现集群的负载平衡。
2、DNS方式。DNS可以用于在冗余的服务器上实现负载均衡，一般大型网站使用多台服务器提供服务，因此一个域名可能所对应的服务器IP地址的集合，但在每个回答中，会循环这些IP地址的顺序，用户一般会选择排在最前面的地址发送请求，以此将用户的请求均衡的分配到不同的服务器上，以此实现负载均衡。缺点：由于DNS服务器中存在缓存，所以可能有一个服务器出现故障后，域名解析仍然返回的是那个IP地址，就会造成访问问题。

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex容器的属性

• flex-direction决定主轴的方向（项目排列方向）

  • .box {
    flex-direction: row | row-reverse | column | column-reverse;
    }
    列从下到上| 从上到下 |行从左到右 | 从右到左
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 如果一条轴线排不下就换行

  • .box{
    flex-wrap: nowrap | wrap | wrap-reverse;
    }
    （默认）不换行 | 换行，第一行在上方 | 换行，第一行在下方

• flex-flow属性是上面二者的结合

  • .box {
    flex-flow: <flex-direction> || <flex-wrap>;
    }
    默认值为row nowrap

• justify-content 定义项目在主轴上的对齐方式

  • .box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    以主轴从左到右为例：
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• align-items 定义项目在交叉轴如何对齐

  • .box {
    align-items: flex-start | flex-end | center | baseline | stretch;
    }
    以交叉轴从上到下为例：
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

zoom：1清楚浮动的原理

清除浮动，触发hasLayout。
zoom属性是IE浏览器的专有属性，可以设置或检索对象的缩放比例，解决ie下的一些bug，比如外边距margin的重叠，浮动清除，触发ie 的haslayout属性等。

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。

CSS优化、提高性能的方法

加载性能：
（1）CSS压缩：将写好的css进行打包压缩，可以减少体积。
（2）CSS单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行的效率更高。
（3）减少使用@import，使用link，因为link在页面加载的时候会一起加载，@import需要等到页面加载完成再加载。

选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为关键选择器，则不要为规则增加标签，过滤掉无关的规则，这样就不会多花时间去匹配他们了。
（3）避免使用通配规则，*{}计算次数惊人，只需要对用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面的回流、重绘。
（3）去除空规则。空规则的产生原因一般来说是为了预留样式，去除这些控规则可以减少css体积。
（4）属性值为0的时候不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中使用，提高css的可维护性。
（2）样式与内容分离，将css代码定义到外部css中。

什么是响应式设计？基本原理？

响应式网站设计是一个网站可以兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同设备的屏幕尺寸做处理。页面头部必须有meta申明的viewport。

text-indent 的特殊性

（1）text-indent仅对第一行内联盒子内容有效。

（2）非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inli
ne-table则会生效。

（3）<input>标签按钮text-indent值无效。

（4）<button>标签按钮text-indent值有效。

（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

letter-spacing与字间距

letter-spacing可以用来控制字符之间的间距，这里说的字符包括英文、汉字和空格等。
特性：
1、继承性。
2、默认值是normal不是0。正常情况下，normal的计算值就是0，但两者还是有差别的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。
3、支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。
4、和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
5、支持小数值，即使0.1px也是支持的。
6、暂不支持百分比值。

word-spacing单词间距

letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

如何实现单行／多行文本溢出的省略（…）？

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

常见的页面元素隐藏的方法

（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

DOCTYPE的作用是什么？

声明位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。

DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

HTML5 为什么只需要写 <!DOCTYPE HTML>，而不需要引入 DTD？

在 html5 之后不再需要指定 DTD 文档，因为 html5 以前的 html 文档都是基于 SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。
例如：HTML4.01 基于 SGML ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

SGML 、 HTML 、XML 和 XHTML 的区别？

SGML ：是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML ：是超文本标记语言，主要用于规定怎么显示网页。
XML ：是可扩展标记语言，是未来网页语言的发展方向，XML和HTML最大的区别在于XML的标签是可以自己创建的，数量无限多。而HTML的标签都是固定的而且数量有限。
XHTML ：是现在基本上所有网页都在用的标记语言，和HTML无本质区别，但是比HTML更严格，比如标签必须都用小写，标签都必须闭合等等。

DTD介绍

DTD是Document Type Definition 文档类型定义。
是一组机器可读的规则，他们定义XML或者HTML的特定版本中所有允许元素以及他们属性和层级关系的定义。在解析网页的时候，浏览器将使用这些规则来检查页面的有效性并采取相应的措施。
DTD是对HTML文档的声明，还会影响浏览器的渲染模式（工作模式）。

空元素定义

标签内没有内容的HTML标签被称为空元素。空元素是在开始标签中关闭的。
常见的空元素有：br hr img input link meta