html面试问题
浏览器渲染过程（背）
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树；
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)；
Layout(回流)：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）；Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素；Display：将像素发送给GPU，展示在页面上；
学习浏览器渲染原理更多的是为了解决性能上的问题；并且渲染原理在面试中答得好，也是一个能与其他候选人拉开差距的一点，在JS中有一个JS引擎，执行渲染也有一个渲染引擎，渲染引擎在不同的浏览器也都是不同的，内核不一样，主要关注webkit的渲染引擎；
生成渲染树的过程
- 从dom树的根节点开始遍历每个可见的节点
- 对于每个可见的节点，找到cssom树中对应的规则，并应用它们；
- 根据每个可见的节点以及其对应的样式，组合生成渲染树；
渲染树只包含可见的节点：script、meta、link等，包含display:none都是不可见的节点；visiblity为可见的；
回流和重绘
回流和重绘会很大程度影响性能；
回流：布局或者几何属性需要改变就叫回流；
生成构造渲染树，将可以的DOM节点以及对应的样式结合起来，计算它们在设备视口内的确切位置和大小，这个过程就是回流；
重绘：当节点需要更改外观而不会影响布局的，叫作重绘；
在知道了每个节点的具体几何信息，将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫重绘；
何时发生回流重绘
回流这一阶段主要是计算节点的位置和几何信息；
- 改变window大小
- 改变字体
- 添加或删除样式
- 文字改变
- 定位或者浮动
- 盒模型
回流一定会触发重绘，而重绘不一定会回流
浏览器优化
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程；浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列；但是，当获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者方法时：
offsetTop/left/width/heightscrollTop/left/width/heightclientTop/left/width/heightgetComputedStylegetBoundingClientRect
上面的属性和方法都需要返回最新的布局信息，因此浏览器必须清空队列，触发回流重绘来计算正确的值，因此在修改样式时最好避免使用上面的属性，他们都会刷新渲染队列；
减少重绘与回流
- 使用
translate替代top，在移动元素绝对定位时，使用translate而不是top、left； - 使用
visibility替换display:none，因为前者只引起重绘，而后者直接回流； - 把dom离线后修改，比如：先把DOM给display:none，有一次回流，然后修改100次，然后再把它显示出来；
- 不要把DOM结点的属性值放在一个循环里当成循环里的变量；
- 不要使用table布局，可能很小的一个小改动会造成整个table的重新布局；
- 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用
requestAnimationFrame - CSS选择符从右往左匹配查找，避免DOM深度过深
- 将频繁运行的动画变成图层，图层能够阻止该节点回流影响别的元素，比如对于video标签，浏览器会自动将该节点变成图层；
优雅降级和渐进增强
优雅降级：解决用户使用的是低版本浏览器的问题，针对不同的浏览器的ie的hack级别，为那些不支持功能的浏览器增加候选方案；
渐进增强：从兼容低版本浏览器开始，逐渐兼容高版本浏览器；
iframe有哪些缺点
页面样式调试麻烦，出现多个滚动条；
（2）浏览器的后退按钮失效；
（3）过多会增加服务器的HTTP请求；
（4）小型的移动设备无法完全显示框架；
（5）产生多个页面，不易管理；
（6）不容易打印；
（7）代码复杂，无法被一些搜索引擎解读。
浏览器解析css选择器
从上到下，从右到左
.li a{} 先找所有的a标签，再找a标签上面的li标签；
页面重构怎么操作
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前提保持一到的行为；（ 在不改变ui的情况下，对网站进行优化， 在扩展的同时保持一致的uI）
为什么要重置浏览器默认样式
因为不同的浏览器对有些标签的默认值是不同的，如果没有初始化浏览器默认样式，会出现不同浏览器页面有不同的差异；
常见问题
- 大盒子小盒子，大：宽500 高600 背景红；小：宽200 高300 背景黄，小盒子垂直水平居中（两中方法）
- 插入一张背景图片，不平铺，把背景图片放在距离上50px 左100（复合写法和分开写法）
- Margin遇到的两个问题以及解决方法
- 随便写个三角形，css写width:0px bordere-width:100px;border-style:solid;border-color:#000 transparent transparent
- 如何生成BFC?
- (根标签html，float，overflow：hidden auto scroll。Display：inline-block，position：fixed或absolute)
- BFC能解决什么问题？
- 外边距重叠、自适应两栏或三栏布局，防止字体环绕，清除浮动，margin值塌陷问题
- 宽500，高300，放在浏览器最中间？
- Position:fixed;left:50%;top:50%;margin-left:-250px;margin-top:-150px;
- 大盒子小盒子父子关系，大盒子宽高未知，小盒子宽100 高200 把小盒子放在大盒子最中间的位置。
- 如何引入外部样式表
- 处理图片小空白（三种方法）；
- Ie里边小高度问题（给元素设置 font-size:0;line-height:0;overflow：hidden);
- Ie8里边a标签包的图片边框处理（给图片设置border：none）
- Ie浮动双边距问题：_display:inline
- 写出一种三栏的等高布局
- 写出双飞翼布局
- 设置透明度，两种方法，区别？
- 精灵图的优缺点
- Bfc的中文名字叫什么？
- 用css设置三角形，ie6里面透明边框显示黑色，解决方法？
- Doctype是什么，是干什么用的
- H5新增了哪些特性。
- Css3新增了哪些特性。
- 选中input type类型为text的文本框。
- Css3新增选择器（三个）。
- 弹性盒布局，改变主轴方向。设置主轴方向居中对齐。交叉轴末端对齐。自动换行。
- 选择器选中偶数个
- 选中所有a标签中含有href属性并且属性值以a结束的
- Html新增标签低版本浏览器不兼容 使用两种方法使他兼容
- 插入视频文件，两种播放格式，自动播放 循环播放 静音播放
- 表单元素 数字 最大10 最小1 步长2 设置必填项
- border-radius 四个值表示什么
- box-sizing：border-box
- 多列布局 设置5列
- 设置弹性盒，主轴方向是垂直方向的
- 设置盒子阴影
- 设置用户在水平方向上拖拽一个元素
- 设置一个文本框，自动获取焦点
- 单选框，默认选中
- 选择已经被选中的表单元素
- Less两种注释方式，哪种可以编译，哪种不可以编译
- Less 混入
- 移动端布局 几种方式
- 单行文本溢出变点状
- 清除浮动的办法（五种）
- 语义化的好处是什么
- 如何把表格的边框合并成一条线
- 宽500高300 一行文字，文字水平和垂直居中
- 用css实现三角形
- 有一个宽500高300的盒子，始终显示在浏览器最中间的位置。
- 如何生成BFC，bfc可以解决什么问题
- Ie6小高度问题，如何解决 line-height：0；font-size：0；overflow：hidden
- 在ie6里，浮动元素的双边距问题，如何解决（_display:inline）
- 设置title小图标
- 让鼠标变手型
- Display:none和 visibility：hidden的区别
- 文本框点击时，蓝色的线如何去掉 outline：none
- 大的banner图如何布局
- 用精灵图的优缺点
- 给网页设置关键字如何设置
- 页面上使用非安全字体，如何实现
- Html5新增标签，低版本浏览器不兼容，如何解决（两种办法）
- 写两个单选框，点击文字可以把单选框选中，默认选中男
- 设置一个文本框是必填项
- Css样式选中偶数个
- Checked的input的框，改变宽高（状态伪类选择器）
- 让每个段落里的第一个字字号变成50px；
- div+p选择器表示什么；
- box-sizing：border-box；
- 当屏幕的宽度大于1000px引入1.css。大于1000<1200引入2.css
- 设置过渡效果，经过1s，宽度由100px变200px 匀速，延迟2s。
- 写移动端有几种方案
- 给span设置position：abslute/fixed/relative可以设置宽高吗