技术知识点整理

清除浮动

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语义化理解

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

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：中间可能涉及到的 缓存相关，出现在什么地方，以及浏览器缓存机制，服务器缓存机制。