【21】HTTP支持的方法

序号	方法	描述
1	GET	发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。另外get支持快取、缓存、可保留书签等。幂等
2	POST	和get一样很常见，向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对原有资源的修改。提交的资源放在请求体中。不支持快取。非幂等
3	HEAD	本质和get一样，但是响应中没有呈现数据，而是http的头信息，主要用来检查资源或超链接的有效性或是否可以可达、检查网页是否被串改或更新，获取头信息等，特别适用在有限的速度和带宽下。
4	PUT	和post类似，html表单不支持，发送资源与服务器，并存储在服务器指定位置，要求客户端事先知道该位置；比如post是在一个集合上（/province），而put是具体某一个资源上（/province/123）。所以put是安全的，无论请求多少次，都是在123上更改，而post可能请求几次创建了几次资源。幂等
5	DELETE	请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心。幂等
6	CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。就是把服务器作为跳板，去访问其他网页然后把数据返回回来，连接成功后，就可以正常的get、post了。
7	OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。一般禁用，防止被恶意攻击或盗取信息。

【22】http的header

• 参考链接

【23】HTML5新增的元素

• 更好地语义化，增加了header，footer, nav等语义化标签
• 在表单方面，为了增强表单，为input增加了color,data,range等类型
• 在存储方面，提供了WebStorage和离线存储
• 在多媒体方面增加了音频和视频元素audio，vedio,
• 地理定位canvas画布，拖放，多线程编程的web worker和websocket协议

【24】HTTP2.0 的特性

• 内容安全，应为http2.0是基于https的，天然具有安全特性，通过http2.0的特性可以避免单纯使用https的性能下降

• 二进制格式，http1.X的解析是基于文本的，http2.0将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令

基于这种考虑http2.0的协议解析决定采用二进制格式，实现方便且健壮，但是不好调试

• 头部压缩

  • 假定一个页面有100个资源需要加载（这个数量对于今天的Web而言还是挺保守的）, 而每一次请求都有1kb的消息头（这同样也并不少见，因为Cookie和引用等东西的存在）, 则至少需要多消耗100kb来获取这些消息头。HTTP2.0可以维护一个字典，差量更新HTTP头部，大大降低因头部传输产生的流量

  差量更新：对于小部分的修改，没有必要更新全部的

  • 使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
  • HTTP1.X的头部越来越膨胀，很多都是重复且多余的，HTTP2.0可以压缩头部的大小，并且避免了重复的传输，可以大大降低延迟

• 服务端推送（多运用于静态资源）

  • 服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。正因为没有发起请求，建立连接等操作，所以静态资源通过服务端推送的方式可以极大地提升速度

• 多路复用，这个功能相当于是长连接的增强，每个request请求可以随机的混杂在一起，接收方可以根据request的id将request再归属到各自不同的服务端请求里面

• 多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输

【25】HTTP2.0的多路复用解决了HTTP1.X中的长连接复用的什么痛点？

• HTTP/1.* 一次请求-响应，建立一个连接，用完关闭；每一个请求都要建立一个连接；
• HTTP/1.1 Pipeling解决方式为，若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞

长连接：虽然server目前无资源，但是请求不会结束，而是等待server有资源之后在返回给client，也就是说，HTTP1.1尽管减少了TCP连接的消耗，但是本身仍然是串行执行。

• 多路复用的优势：
  • HTTP2.0多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行；
  • HTTP性能优化的关键并不在于高带宽，而是低延迟。TCP 连接会随着时间进行自我「调谐」，起初会限制连接的最大速度，如果数据成功传输，会随着时间的推移提高传输的速度。这种调谐则被称为** TCP 慢启动**。由于这种原因，让原本就具有突发性和短时性的 HTTP 连接变的十分低效。
  • HTTP/2 通过让所有数据流共用同一个连接，可以更有效地使用 TCP 连接，让高带宽也能真正的服务于 HTTP 的性能提升

【26】画一条0.5px的线

1、采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

• 这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px

要记得viewport只针对于移动端，只在移动端上才能看到效果

2、采用transform: scale()的方式

transform: scale(0.5,0.5);

• 改变的不是元素的宽高，改变的是xy轴的刻度（0.5说明较原先缩短成一半）

【27】BFC

1、BFC 定义

• BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　　

2、BFC的生成

• 上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

  • 根元素

  • float的值不为none

  • overflow的值不为visible

  • display的值为inline-block、table-cell、table-caption

  display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

• position的值为absolute或fixed

3、BFC的约束规则

• 内部的box会在垂直方向上一个接一个的放置

• 垂直方向上的距离由margin决定（属于同一个BFC的两个相邻box的margin会发生重叠（塌陷），与方向无关）

• 每个元素的左外边距与包含块的左边界相接触*（从左到右），即使浮动元素也是如此

  • 这说明BFC中子元素不会超出他的包含块
  • 而position为absolute的元素可以超出他的包含块边界，xy为负数

• BFC的区域不会与float的元素区域重叠

• 计算BFC的高度时，浮动子元素也会参与计算

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

【28】BFC解决的问题

• margin重合（兄弟），两个块之间的距离为margin最大值->两个放进不同的bfc中
• margin坍塌（父子），子块的margin-top会影响父亲的位置（本来应该是孩子在父亲里向下移动，父亲位置不变）->父亲开启bfc
• 高度塌陷：父子块，孩子float，父亲没有高度了（这时，如果父亲下面有块元素，因为父亲的高度为0，会导致该块元素被孩子遮住）->父亲开启bfc
• bfc的区域不会与float的元素区域重叠：
  • 消除文字环绕（不开bfa的话，就会出现文字环绕）
  • 自适应的两栏布局（一边bfc，一边随着屏幕大小的变化）

【29】负数margin和relative移动元素的区别

• 相对定位
  • 相对定位主要运用在大方面的布局，结构定位上，而且比较多和absolute搭配使用；
  • 相对定位只是视觉上使元素发生偏移，在文档流中的位置不改变，对其他元素位置无影响；
• margin:
  • 平常的小边距之类的用margin来得方便，margin定位较多和float搭配使用;
  • 通过负margin偏移的元素在文档流中的位置发生改变，后面的其它元素就会“流”过来填充，所以它们位置发生了变化

【30】垂直居中

1、方式一 flex

<div class="box">
     <section class="inner"></section>
</div>

.box {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        width: 1000px;
        height: 600px;
        border: 1px solid red;
    }
    .inner {
        width: 300px;
        height: 200px;
        background-color: red;
    }

2、方式二 margin

position: absolute;
top: 50%;
left: 50%;
transform：translateX(-50%)和transform：translateY(-50%)

3、方式三 auto

    margin:auto

【31】复合线程 compositor thread

• 复合线程是关键渲染路径中的最后一步，浏览器为了提高渲染的效率才有了复合，复合就是把页面拆解成不同的图层（类似Photoshop），当页面发生视觉变化时，可能只是影响了某一个图层其它图层不需要受到影响，此时我们可以把需要变化的元素单独创建一个图层。

• 复合线程主要做的是：

  • 将页面拆分多个图层进行绘制再进行复合
  • 默认情况下如何拆分图层是由浏览器决定的，浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层，它主要分析元素相互之间的影响，如果某个元素对其它元素影响非常的多，那这个元素就会被单独抽出成图层，这样这个元素发生变化后就仅对它单独进行重绘
  • 当然我们也可以主动将某个元素提取出图层，这样让它的变化更加独立些

【32】js和css实现动画区别

首先，xian

1、js

• js动画是逐帧动画
  • 几乎可以完成您想要的任何动画形式。
  • 因为内容不同会增加生产负担，并且资源占用相对较大
  • 但是它的优点也很明显：非常适合执行非常精致的动画

  例如3D效果，人物或动物的急转弯等。 但是，如果帧速率太低，则从一个帧到另一个帧的过渡很可能是不自然且不一致的。

• js缺点
  • js在浏览器的主线程中运行，还有其他js脚本、样式计算、布局、绘图任务需要在主线程中运行。干扰它们可能导致线程阻塞，从而导致帧丢失。
  • 代码复杂度高于CSS动画
• js优点
  • js动画控制能力很强，可以控制动画在播放过程中：开始、暂停、播放、终止、取消都可以完成
  • 动画效果比CSS3动画更丰富，一些动画效果，如曲线运动、冲击闪烁、视差滚动等效果，只有js动画才能完成。
  • CSS3有兼容性问题，而JS大多数时候没有兼容性问题

2、css

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。当实现一些简单的滑动，翻转和其他特殊效果时，Css3非常方便，但是当你想要实现一些很酷的效果时，它的操作通常比js操作具有更多的冗余。在css3中制作动画时，浏览器可以进行一些优化，这将比js使用更少的cpu资源

• css优点

  • 浏览器可以优化动画。

  • 代码相对简单，并且性能调整方向是固定的。

  • 对于帧速率性能较差的低版本浏览器，CSS3可以自然降级，而JS需要编写其他代码。

• css缺点

  • 运行过程的控制较弱，不可能附加事件绑定回调函数。
  • CSS动画只能暂停，无法在动画中找到特定的时间点，不能中途反转动画，无法更改时间比例，无法添加回调函数或将播放事件绑定到特定位置，并且没有进度报告
  • 代码冗长。 如果您想使用CSS来实现稍微复杂一点的动画，那么CSS代码最终将变得非常繁琐

3、总结

• 如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。

• 如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控

• 渲染线程分为main thread（主线程）和compositor thread(复合线程)，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后触发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout/paint的

样式计算、布局、绘图在主线程中执行

【33】块元素、行元素、行内块元素

参考链接

1、行元素

• 行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体b和i标签，还有sub和sup这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

还有p q img

• 行内元素特征：
  • 设置宽高无效
  • 对margin仅设置左右方向有效，上下无效；
  • padding设置上下左右都有效，即会撑大空间
  • 不会自动进行换行

2、块元素

• 块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
• 块状元素特征：
  • 能够识别宽高
  • margin和padding的上下左右均对其有效
  • 可以自动换行
  • 多个块状元素标签写在一起，默认排列方式为从上至下

3、行内块状元素

• 综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
• 行内块状元素特征：
  • 不自动换行
  • 能够识别宽高
  • 默认排列方式为从左到右

【34】position属性 比较

1、固定定位fixed：

• 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间

2、相对定位relative：

• 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

只是视觉效果移动了，而不改变原有的位置

3、绝对定位absolute：

• 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body
• absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

4、粘性定位sticky：

• 参考链接
• 元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

5、默认定位Static：

• 默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

6、inherit:

• 规定应该从父元素继承position 属性的值

【35】css3新特性

• 开放题。CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等

【36】 clear

• 参考链接
• float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响

【37】浮动导致父亲高度塌陷，清除浮动的方法

• 参考链接

1、方式一

• clear:both+空标签

2、方式二 （BFC）

• 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

3、方法三

• 使用CSS的:after伪元素

after向该元素继续添加css属性

• 代码

.clearfix:after {
    content:"."; //是啥都可以，反正高度为0，并且看不见
    height:0; 
    visibility:hidden; 
    
    display:block; //clear只用于block
    
    clear:both; //下一行
}

.clearfix { *zoom:1; } //IE

注意，为元素不可以浮动，否者尽管会换行，但是任然撑不起来父亲高度

【38】介绍一下盒模型

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• 标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

• 怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）

【39】css动画如何实现(transition、animation)

• 参考链接

• 创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节

但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分

• transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果,他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧,就两个keyframe。

• animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画

【40】为什么少用table布局？

• table比其它html标记占更多的字节。（造成下载时间延迟，占用服务器更多流量资源）

• table会阻挡浏览器渲染引擎的渲染顺序。（会延迟页面的生成速度，让用户等待更久的时间）

  • table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
  • 对用户的体验度更好，很多时候如果页面过大，而table又位于页面的第一屏，就需要考虑用div来模拟table了，总之，如果非要用table,一定不能让table出现在前两屏的范围，要让table神不知鬼不觉的加载，不能放到让用户一眼就能看到的地方，那样用户只会看到一片空白

• table里显示图片时需要你把单个、有逻辑性的图片切成多个图。（增加设计的复杂度，增加页面加载时间，增加http会话数）

• 在某些浏览器中，table里的文字的拷贝会出现问题。（会让用户不悦）

• table会影响其内部的某些布局属性的生效（比如里的元素的height:100%) （限制页面设计的自由性）

• 一旦学了CSS的知识，你会发现使用table做页面布局会变得更麻烦。（先花时间学一些CSS知识，会省去你以后大量的时间）

• ‘table对’对于页面布局来说，从语义上看是不正确的。（它描述的是表现，而不是内容）

• table代码会让阅读者抓狂。（不但无法利用CSS，而且会不知所云，尤其在进行页面改版或内容抽取的时候）

• table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

【41】了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档分开文档流有某种方法？

重绘 ( redraw 或 repaint ) 与重排 ( reflow )

浏览器的运行机制：layout：布局；

1、过程

• 构建DOM树（parse）： 渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；

• 构建渲染树（construct）： 解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；

• 布局渲染树 （reflow/layout） ： 从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；

• 绘制渲染树 （paint/repaint） ： 遍历渲染树，使用UI后端层来绘制每个节点。

2、重绘 【绘制】

• 重绘（repaint或redraw） ：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

• 触发重绘的条件：改变元素外观属性。如：color，background-color等。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

3、重排 【构建渲染树】

• 重排（重构/回流/reflow） ：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

• 触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如：

  • 页面渲染初始化；(无法避免)

  • 添加或删除可见的DOM元素；

  • 元素位置的改变，或者使用动画；

  • 元素尺寸的改变——大小，外边距，边框；

  • 浏览器窗口尺寸的变化（resize事件发生时）；

  • 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；

  • 读取某些元素属性：（ offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE) )

4、两者关系

• 重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

• 所以，重排必定会引发重绘，但重绘不一定会引发重排。

 

5、重绘重排的代价：耗时，导致浏览器卡慢，优化

• 浏览器自己的优化：

  • 浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘

• 我们要注意的优化：我们要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。（即读写样式。注意，读取样式时，虽然没有更改，但是根据浏览器自己的优化策略，会flush队列，任然有一定的消耗）

  • 直接改变元素的className

  • display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排（首次绘制none和绘制block）；

  • 不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；

  • 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

  • 将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；

  • 尽量不要使用table布局

  • 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；

    
  var li = document.createElement('li');
  li.innerHTML = 'apple';
  fragment.appendChild(li);
    
  var li = document.createElement('li');
  li.innerHTML = 'watermelon';
  fragment.appendChild(li);
    
  document.getElementById('fruit').appendChild(fragment);