html部分
对HTML语义化的理解
- 用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
- 适合搜索引擎的爬虫爬取有效信息，有利于SEO。
- 更容易让屏幕阅读器读出网页内容，去掉或样式丢失的时候能让页面呈现清晰的结构。
语义化标签：herader，nav，main，aside，footer等
html5 有那些新特性
- 新增语义化标签，progress 进度条标签
- 媒体标签 audio（音频） video（视频）
- 新增了表单类型，color，email，data，time，number，url等
- 新增表单属性：placeholder autofocus（自动获取焦点）等
- 新增了两种客户端存储数据的方式 localStorage和sessionStorage
- 拖放，画布（canvas），Geolocation（地理定位），websocket（通信协议）
localStorage和sessionStorage cooike的区别
cooike作用：
由于 HTTP 是无状态的协议，不能保存每一次请求的状态，所以需要给客户端增加 Cookie 来保存客 户端的状态。 Cookie 的作用主要用于 用户识别 和 状态管理 。（比如网页常见的记住密码）
html5 离线存储
在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。
iframe框架有那些优缺点？
优点：
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。 缺点：
- 不利于seo，搜索引擎的爬虫程序无法解读这种页面
- 会阻塞主页面的 onload 事件
- 会产生很多页面，不容易管理，增加服务器的http请求
css部分
常见设计图源文件的了解
PSD，Sketch，XD(常见设计稿源文件) 蓝湖，Pxcook(标注信息工具) imgcook(智能代码生成平台)
css 选择器和优先级
选择器
id（#id）
- 类选择器（.className）
- 属性选择器（ p[class="a"]）
- 伪类选择器（li:last-child）
- 元素选择器（div）
- 通配符选择器（*） 等
总结排序：
!important > 行内样式 > ID选择器 > 类选择器，属性，伪类 > 元素 > 通配符 > 继承 > 浏览器默认属性
注意事项
-
!important声明的样式的优先级最高；
-
如果优先级相同，则最后出现的样式生效；
-
继承得到的样式的优先级最低；
-
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
CSS中可继承与不可继承属性有哪些
不可继承属性
- 背景属性 background background-color等
- 定位属性 float position min-height、max-width z-index
- 盒子模型属性 width、height、margin 、margin-top、margin-right等
可继承属性
- 字体系列属性 font-family font-weight font-size font-style
- 文字系列属性 text-align line-height
- 其他 color cursor（光标形状等）
行内元素和块级元素
行内元素（设置为行内元素 display:'inline'）
- 与其他行内元素并排
- 不能设置宽高，默认的宽度就是文字的宽度 span a b i 等
块级元素（设置为行内元素 display:'block'）
- 霸占一行，不能与其他任何元素并列。
- 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 div p h1 li table等
行内快元素（设置为行内元素 display:'inline-block'）
- 可以与其他行内元素并排
- 可以设置宽高等 input img
隐藏元素的方法
display：none
不会渲染元素，不会在页面中占据位置
visibility：hidden
会渲染元素，元素在页面中仍占据空间，只是内容不可见。
opacity: 0
将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间
z-index：负值
来使其他元素遮盖住该元素，以此来实现隐藏。
伪元素和伪类
伪元素
在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
伪类
将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}
盒模型
css3中盒模型有以下两种：标准盒子模型、IE盒子模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
- 标准盒模型的width和height属性的范围只包含了content，
- IE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizeing: content-box表示标准盒模型（默认值）box-sizeing: border-box表示IE盒模型（怪异盒模型）
flex相关属性
display：flex
六个属性
flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- `row`（默认值）：主轴为水平方向，起点在左端。
- `row-reverse`：主轴为水平方向，起点在右端。
- `column`：主轴为垂直方向，起点在上沿。
- `column-reverse`：主轴为垂直方向，起点在下沿。
flex-wrap
是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
css3 有哪些新特性
-
圆角 （border-radius:8px）
-
多列布局 （multi-column layout）
-
阴影 （Shadoweflect）
-
文字特效 （text-shadow）
-
文字渲染 （Text-decoration）
-
线性渐变 （gradient）
-
旋转 （transform）
-
增加了旋转,缩放,定位,倾斜,动画,
margin重叠问题
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算原则
- 如果两者都是正数，那么就去最大者
- 如果是一正一负，就会正值减去负值的绝对值
- 两个都是负值时，用0减去两个中绝对值大的那个
清除浮动的方式
- 给父级div定义
height属性 - 浮动元素的父级标签添加
overflow:hidden - 使用:after伪元素
.clearfix:after{
content: "\200B";
display: table;
height: 0;
clear: both;
}
css优化和提高性能的方法
- css压缩：将写好的css进行打包压缩，可以减小文件体积。
- 减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
- 避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
- 慎重使用高性能属性：浮动、定位。
为什么要使用css预处理器
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题- 增加了
css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。 css更加的简洁，增加适应性以及可读性，可维护性等
网络和浏览器部分
http状态码
get和post的区别
-
get 请求参数放在url上，参数会保留在浏览器历史中，所以不安全，传输数据量有限（url长度限制），数据类型只支持ASCII 字符，可缓存。
-
post 安全性更高，参数不会显示在url上，传输数据量更大，数据类型没有限制，不可缓存。
浏览器输入google.com 按下回车发生了什么
- 1.Dns域名解析
- 2.与服务器简历tcp连接（tcp三次握手）
- 3.发送http请求
- 4.服务器处理请求
- 5.返回数据
- 6.关闭tcp连接（四次挥手）
- 7.渲染页面
浏览器渲染过程
- 1.html 解析出Dom Tree
- 2.css 解析出style Rules
- 3.两者关联生成Render Tree
- 4.Layout（布局）根据Render Tree 计算每个节点的信息
- 5.渲染整个页面
浏览器的同源策略以及解决办法
- 同源策略是一个重要的安全策略，为了安全，减少被攻击的媒介。
- 同源的定义：域名，协议，端口相同。任何一个不同，就不是同源
- 跨域问题其实就是浏览器的同源策略所导致的。 解决办法：
- 1.跨域资源共享([CORS]) node中的express中 主要是把Access-Control-Allow-Origin 设置为"*"
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' )
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PATCH, PUT, DELETE')
res.header('Allow', 'GET, POST, PATCH, OPTIONS, PUT, DELETE')
- 2.nginx 反向代理
- 3.react解决跨域问题 proxy代理配置和http-proxy-middleware
回流和重绘
回流：
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
重绘：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
区别
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变等
1.批量修改dom
http 协议与https协议的原理及区别
http 超文本传输协议
- 1.信息明文传输，不安全
- 2.连接很简单，是无状态的
- 3.默认端口80 https
- 1.需要ca证书，需要一定的费用
- 2.HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
- 3.默认端口443
各个浏览器的内核
IE Trident
chrome Blink
firfox Gecko
Safari webkit
强缓存和协商缓存，为什么需要浏览器缓存
强缓存：
使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。
协商缓存：
如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。 使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。
为什么需要浏览器缓存
对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。这就要用到浏览器的缓存策略了。
优点：
- 减少了服务器的负担，提高了网站的性能
- 加快了客户端网页的加载速度
- 减少了多余网络数据传输
简单说下webSocket
1.支持双向通信，实时性更强
2.没有同源策略的限制，客户端可以与任意服务器通信
3.性能开销小，通信高效
