1. 常见的HTTP的头部
可以将http首部分为通用首部，请求首部，响应首部，实体首部
通用首部表示一些通用信息，比如date表示报文创建时间，
请求首部就是请求报文中独有的，如cookie，和缓存相关的如if-Modified-Since
响应首部就是响应报文中独有的，如set-cookie，和重定向相关的location，
实体首部用来描述实体部分，如allow用来描述可执行的请求方法，content-type描述主题类型，content-Encoding描述主体的编码方式
2. HTTP2.0 的特性
内容安全
二进制格式
多路复用
3. cache-control的值有哪些
cache-control是一个通用消息头字段被用于HTTP请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。
4. 浏览器在生成页面的时候，会生成那两颗树？
构造两棵树，DOM树和CSSOM规则树
当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树，
CSSOM规则树由浏览器解析CSS文件生成，
5. csrf和xss的网络攻击及防范
CSRF：跨站请求伪造
防御方式的话：使用验证码，检查https头部的refer，使用token
XSS：跨站脚本攻击
防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤
6. 怎么看网站的性能如何
被动去测：就是在被检测的页面置入脚本或探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析
主动的搭建分布式受控环境，模拟用户发起页面访问请求
F12开发者工具有使用内存大小，访问资源所花费的时间
7. 介绍HTTP协议
高效快速。无连接。无状态。
8. 输入URL到页面加载显示完成发生了什么?
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
9. Cookie有哪些限制？
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
10. 知道304吗，什么时候用304？
304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。
11. 具体有哪些请求头是跟缓存相关的
缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
12. cookie有哪些编码方式？
encodeURI（）
13. 前端优化策略
减少请求
使用缓存
cdn
14. 200和304的区别
200 OK 请求成功。一般用于GET与POST请求
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
15. 说一下css盒模型
CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
box-sizing(有3个值哦)：border-box,padding-box,content-box.
在标准的盒子模型中，width指content部分的宽度
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
box-sizing:content-box;border-box;padding-box,
16. transition和animation的区别
transition 是过渡，是样式值的变化的过程，只有开始和结束两帧；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
17. 浮动元素的缺陷
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。
18. 说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度。
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。
19. 单、多行文本溢出显示省略号
/* 单行文本溢出显示省略号 */
.div1 p{
white-space: nowrap; /* 文本超过容器最大宽度不换行 */
overflow: hidden; /* 本文超出容器最大宽度的部分不显示 */
text-overflow: ellipsis; /* 文本超出容器最大宽度时显示三个点 */
}
/* 多行文本溢出显示省略符 */
.div2 p{
display:-webkit-box; /* 先让容器变成一个弹性伸缩盒子 */
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2; /* 最大显示的文本行数 */
-webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}
20. visibility=hidden, opacity=0，display:none
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
21. CSS选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
id 选择器 > class 选择器 > 标签选择器
内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
带有!important 标记的样式属性的优先级最高
越具体越优先。
22. 介绍一下盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
设置盒模型：box-sizing:border-box
23. css动画如何实现
nimation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。
transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。
24. CSS3中对溢出的处理
overflow
text-overflow：ellipsis
25. 三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响
三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应
两列定宽一列自适应：
1、使用float+margin：
给div设置float：left，left的div添加属性margin-right：left和center的间隔px,right的div添加属性margin-left：left和center的宽度之和加上间隔
2、使用float+overflow：
给div设置float：left，再给right的div设置overflow:hidden。这样子两个盒子浮动，另一个盒子触发bfc达到自适应
3、使用position：
父级div设置position：relative，三个子级div设置position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好，
4、使用table实现：
父级div设置display：table，设置border-spacing：10px//设置间距，取值随意,子级div设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦，
5、flex实现：
parent的div设置display：flex；left和center的div设置margin-right；然后right 的div设置flex：1；这样子right自适应，但是flex的兼容性不好
6、grid实现：
parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto，
对于两侧定宽中间自适应的布局，对于这种布局需要把center放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的grid，table，flex，position实现
26. 什么是BFC
Block Formatting Context
块级格式化上下文，这是一个独立的渲染区域，规定了内部的布局，并且里面的子元素不会影响到外面的元素
27. calc属性
css 动态计算长度值
28. 如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？
可以更改父元素的color
29. line-height和height的区别
line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度，
30. 设置一个元素的背景颜色，背景颜色会填充哪些区域？
background-color设置的背景颜色会填充元素的content、padding、border区域，