清除浮动
BFC清除浮动
浮动的父级末尾插入块级元素清除浮动
BFC(Block Formatting Contexts)意为“块级格式化上下文”。就是页面上的一个渲染区域，容器内的子元素不会对外面的元素布局产生影响，反之亦然。如何生成BFC：
float的值不为none;
overflow的值不为visible;
position的值不为relative和static;
display的值为table-cell,table-caption何inline-block中的任何一个。
规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
IFC (Inline Formatting Contexts)意为“内联格式化上下文”,IFC中，盒子依次水平放置，从包含块的顶部开始。
GFC(GridLayout Formatting Contexts)意为“网格布局格式化上下文”当一个元素设置为display:grid的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。GFC和table的区别在于GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染。
FFC(Flex Formatting Contexts)意为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器，当前只有谷歌和火狐支持该属性，不过在移动端几乎没有障碍(移动端是chrome和Safari的天下)。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。
display:none与visibility: hidden;的区别
占位，
背景图是否加载，为什么？
display:none的节点之后的dom节点不会被渲染 所以不会加载背景图
display:none 的性能次于 visibility: hidden;
高性能动画
1.开启GPU渲染
2.动画开始时机
3.降频与丢帧（批量渲染）
4.layout与painting
渲染原理/过程
1.dom树的构建
2.css规则树的构建
3.渲染树的构建（display:none的节点之下是不会构建的）
4.Layout，gen
4.GPU渲染
5.repaint / reflow
高性能css
1.css层叠深度
2.选择器的使用
3.可维护性
4.css属性
html语义化理解
js部分相关知识
element.getElementsByClassName
element.getElementById
element.getElementsByTagName
获取 / 设置属性 attr
element.getAttribute('test');
element.setAttribute('test', '1');
element.hasAttribute('test');
获取 / 设置 data
element.dataset['test'];
element.dataset['test'] = '1';
next / prev
element.previousElementSibling;
element.nextElementSibling;
其他操作
element.appendChild
element.insertBefore
element.removeChild
element.innerHTML
element.textContent
CLASS
element.classList.remove('test');
element.classList.add('test');
// jquery
$element.hasClass('test');
// native
element.classList.contains('test');
element.classList.toggle('test');
事件监听
element.addEventListener('click', fn, false);
element.removeEventListener('click', fn);
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
element.dispatchEvent(event);
css3部分相关知识
html部分相关知识
css相关知识
构建工具相关
Less / Scss
canvas VS svg
经典题目，打开一个网页的过程
1.本地浏览器DNS缓存查找（chrome://net-internals/#dns ，chrome://chrome-urls/）
2.本地hosts匹配
3.DNS解析（在网络协议中属于传输层？）
ps:网络四层划分：数据链路层 传输层 网络层 应用层
七层划分：应用层，表示层，会话层；数据链路层，物理层
4.建立网络连接
三次握手相关
5.发起http请求（在网络协议中属于应用层）
并行下载，一边下载一边解析,js会造成阻塞，考虑defer async属性 及其区别
6.本地解析
dom树，css规则树，渲染树 布局 绘画 展示。这其中涉及到可以优化的点
PPS：中间可能涉及到的 缓存相关，出现在什么地方，以及浏览器缓存机制，服务器缓存机制。
网友评论