1. display:none; 和visibility:hidden;的区别

display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。
visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。

2.CSS 选择器权重如何计算

就近原则：直接选中的，一定比继承的权重大。
一样近，比权重：
id是100，class是10，标签是1，
总数权重一样谁写在下面听谁的。
行内 > 内嵌 = 外联 > 导入
!important能够提升权限，但是不能提升继承的
class=“a b c” 和挂载顺序无关，看写的顺序

3.web 前端开发，如何提高页面性能优化

数据懒加载：不显示的东西不加载，需要显示了才加载。
小图标用精灵图，合并成一张字库用gb2312不要utf-8，一个汉字少一个字节。
图片用base64
路由懒加载、组件不用不加载
使用gulp、grunt、webpack等工具压缩html、js、css代码

4.什么叫优雅降级和渐进渐强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器
进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行
兼容。

5.如何垂直水平居中一个元素

.parent{
display:flex;
justify‐content: center;
align‐items: center;
}

6.如何实现6px大小的字

font‐size:12px;
transform: scale(.5)

7.对单位px、em、rem、vh、vw的理解

px物理像素，绝对值；
em相对于父级的大小，相对值；
rem相对于html的大小，相对值；
vh相对于屏幕的高度，相对值；
vw相对于屏幕的宽度，相对值

8.什么是重绘和回流？（浏览器绘制过程）

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
（1）添加或者删除可见的 DOM 元素；
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）内容变化，比如用户在 input 框中输入文字
（4）浏览器窗口尺寸改变——resize 事件发生时
（5）计算 offsetWidth 和 offsetHeight 属性
（6）设置 style 属性的值
（7）当你修改网页的默认字体时。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节
点里的子节点很可能会导致父节点的一系列回流。

9.如何减少重绘和回流

通过className或cssText一次性修改样式, 而非一个一个改
离线模式: 克隆要操作的结点, 操作后再与原始结点交换, 类似于虚拟DOM
避免频繁直接访问计算后的样式, 而是先将信息保存下来
绝对布局的DOM, 不会造成大量reflow
div不要嵌套太深, 不要超过六层

10.浏览器的渲染原理

（1）首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
（2）然后对 CSS 进行解析，生成 CSSOM 规则树。
（3）根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形o，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
（4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
（5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

11.常见的浏览器端的存储技术有哪些？

浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB。
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

12.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时
候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不
是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

13.如何让一个未知高度的div垂直居中

在这里插入图片描述

14.定位有哪几种？分别简述其特点

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成固定定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中。

15.一次完整的http事务是怎样的一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

16.简述一下src和href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
17.清除浮动的几种方式
1、【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置
3、伪类after清浮动：
【.clr:after{content:“”;clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。
4、使用【display:table】。【display:flex·】
5、使用overflow除visible，类似于激发haslayout。
6、使用浮动父元素清浮动。

18.CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。