CSS盒模型
- 标准模型和IE盒子模型的区别？
- 标准盒模型：宽度和高度是指内容区。
- IE盒模型：宽度和高度包含border和padding以及内容区。
- CSS是如何设置标准模型和IE盒子模型？
- box-sizing:content-box; //标准模型
- box-sizing:border-box; //IE模型
- JS如何设置以及获取对应的盒模型宽和高？
- dom节点.style.width/height（只能获取内联样式）
- dom节点.currentStyle.width/height（渲染之后的宽度，只有IE支持）
- dom节点.getComputedStyle(dom节点).width/height（原理同上）
- dom节点.getBoundingClientRect().width/height（计算一个元素的绝对位置，基于左上角）
DOM事件类
-
DOM事件级别有哪些？
- DOM0：element.onclick=function(){} 或者标签内添加事件
- DOM1：DOM1标准没有涉及事件
- DOM2：element.addEventListener('click',function(){},false);
- DOM3：element.addEventListener('keyup',function(){},false);//DOM3新增了鼠标和键盘事件
-
DOM事件模型？
- 捕获：从上往下
- 冒泡：从下往上
-
DOM事件流？
- 捕获->目标阶段->冒泡
-
DOM事件捕获流程？
- 捕获流程：window->document->html->body...目标元素
- 冒泡流程：目标元素->body->html->document->window
-
Event对象的常见应用？
- event.preventDefault()//阻止默认行为
- event.stopPropagation()//阻止冒泡行为
- event.stoplmmediatePropagation()//阻止调用相同事件的其他侦听器。
- event.currentTarget//目标元素，当事件遍历DOM时，标识事件的当前目标。
- event.target//当前被点击的元素
HTTP协议类
-
HTTP协议的主要特点
- 简单快速：每个资源URI都是固定的(统一资源符)
- 灵活：每个http协议中有头部分数据类型，通过一个HTTP就可以完成不同的数据类型传输
- 无连接：连接一次就会断掉，不会保持连接
- 无状态：客户端和服务器端是两种身份，服务器不记录访问的状态
-
HTTP报文的组成部分
请求报文 请求行：http方法，页面地址，http协议，版本 请求头：key-value 空行：告诉服务器下方是请求体 请求体 响应报文 状态行：状态码，http协议，版本 响应头：key-value 空行：告诉客户端下方是响应体 响应体 复制代码 -
HTTP常用方法
- get：获取资源
- post：传输资源
- put：更新资源
- delete：删除资源
- head：获得报文首部
-
POST和GET区别
- get在浏览器回退时是无害的，而post会再次提交请求
- get产生的URL地址可以被收藏，而post不可以
- get请求会被浏览器主动缓存，而post不会，除非主动设置
- get请求只能进行URL编码，而post支持多种编码
- get请求参数会被完整的保留在历史记录，而post参数不会被保留
- get请求在URL中传送的参数有长度显示，post没有限制
- 对参数的数据类型，get只接受ascll字符，而post没有限制
- get比post更不安全，因为参数直接暴露在URL中，所以不能传递敏感信息
- get参数通过URL传递，post放在请求体中
-
HTTP常用状态码
- 200：客户端请求成功
- 206：客户端发送了一个带有范围头的get请求，服务器完成返回
- 301：所请求页面已经转移至新的URL
- 302：所请求的页面已经临时转移至新的URL
- 304：客户端有缓存的文档并发出了一个条件性的请求，服务器告诉客户端，原来的缓存还可以使用。
- 400：客户端请求有语法错误，不能被服务器所理解
- 401：请求未经授权
- 403：请求的页面禁止访问
- 404：资源不存在
- 500：服务器发生不可预期的错误，原来的缓存文档还可以继续使用
- 503：请求未完成，服务器宕机或临时过载，一段时间后恢复正常
-
什么是持久化连接(1.1版本支持，1.0之前都不支持)？
- HTTP协议采用“请求-应答”模式，当使用普通模式，即非keep-Alive模式时，每个请求/应答客户端和服务器端都要新建立一个连接，完成之后立即断开连接（HTTP协议为无连接协议）。
- 当使用keep-Alive模式(又称持久连接，连接重用)时，keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后续请求时，keep-Alive功能避免了建立或者重新建立连接。
-
什么是管线化？
-
管线化是指把所有的请求一次打包请求到服务器，服务器一次响应
在持久连接的情况下，某个连接上的消息类似于： 请求1->响应1->请求2->响应2->请求3->响应3 管线化的情况下，某个连接类似于： 请求1->请求2->请求3->响应1->响应2->响应3 复制代码 -
管线化机制通过持久连接完成，仅HTTP/1.1支持此技术
-
只有get和head请求可以进行管线化，而post则有所限制
-
初次创建连接时不应启动管线机制，因为(对方)服务器不一定支持HTTP/1.1版本的协议
-
管线化不会影响响应的顺序
-
HTTP/1.1要求服务器支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可。
-
开启管线化很可能并不会带来大幅度的性能提升，而很多服务器端和代理程序对管线化的支持并不好，因此chrome和Firefox默认并未开启管线化的支持。
-
渲染机制类
-
什么时候DOCTYPE以及作用？
- DTD告诉浏览器使用什么引擎去解析渲染，而DOCTYPE是用来声明文档类型以及规范。DOCTYPE告诉浏览器当前文档使用的是哪个文档类型。
- 写法html5
- html4.01包含两个版本严格模式（不包含展示性和废弃元素如标签）和非严格模式（包含展示性和废弃元素）
什么是重排Reflow？
-
DOM结构中的各个元素都有自己的盒子(模型)。这些都需要浏览器根据各种样式计算并根据计算结果将元素放到它该出现的位置，这个过程称之为重排Reflow。
触发Reflow： 增加、删除、修改DOM节点，会导致reflow或repaint 移动DOM或做动画 修改css样式 resize窗口（移动端没有这个问题）或者滚动 修改网页默认字体 复制代码
什么是重绘Repaint？
-
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为repaint。
触发repaint： DOM改动 CSS改动 复制代码
页面性能
- 提升页面性能的方法有哪些？
-
资源压缩合并，减少HTTP请求
-
非核心代码异步加载，异步加载的方式：动态脚本加载、defer、async
-
利用浏览器缓存
缓存的分类： 强缓存：Expires：value值表示服务器的绝对时间 Cache-Control：max-age=3600相对时间单位为秒，以客户端时间为准 协商缓存： 1.Last-Modified：服务器下发上次修改的时间 2.If-Modified-Since：使用服务器下发时间和服务器上次修改时间进行对比(缺点修改时间改变内容未改变) 3.Etag：哈希值，服务器发送资源会下发Etag值 4.If-Node-Match：客户端和服务器的Etag值进行对比 复制代码 -
使用CDN
-
预解析DNS
强制打开预解析：<meta http-equix="x-dns-prefetch-control" content="on">//页面中的A标签默认DNS预解析，如果是HTTPS是默认关闭的 DNS Prefetch使用方式:<link rel="dns-perfetch" href="//host_name_to_perfetch.com">复制代码
-