关于javascript:htmlcssjavascript

html css

css 的盒模型：
CSS 盒模型实质上是一个盒子，封装四周的 HTML 元素，它包含：外边距（margin）、边框（border）、内边距（padding）、理论内容（content）四个属性。
CSS 盒模型：规范模型 + IE 模型
规范盒模型：width/height 只是内容高度，不蕴含 padding 和 border 值。
IE 盒子模型(怪异盒模型)：width/height 蕴含了 padding 和 border 值。

css
box-sizing: content-box; (浏览器默认设置)
box-sizing: border-box;

JS 如何获取盒模型对应的宽和高
（1）dom.style.width/height 只能取到行内款式的宽和高，style 标签中和 link 外链的款式取不到。
（2）dom.currentStyle.width/height（只有 IE 兼容）取到的是最终渲染后的宽和高
（3）window.getComputedStyle(dom).width/height 同（2）然而多浏览器反对，IE9 以上反对。
（4）dom.getBoundingClientRect().width/height 也是失去渲染后的宽和高，大多浏览器反对。IE9 以上反对，除此外还能够取到绝对于视窗的上下左右的间隔。
（6）dom.offsetWidth/offsetHeight 包含高度（宽度）、内边距和边框，不包含外边距。最罕用，兼容性最好。

BFC（边距重叠解决方案）
BFC: 块级格式化上下文
BFC 基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，外面的元素不会影响到内部的元素。父子元素和兄弟元素边距重叠，重叠准则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

BFC 原理（渲染规定 | 布局规定）：
（1）外部的 Box 会在垂直方向，从顶部开始一个接着一个地搁置；
（2）Box 垂直方向的间隔由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠；
（3）每个元素的 margin Box 的右边，与蕴含块 border Box 的右边相接触，（对于从左到右的格式化，否则相同）。即便存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，里面的元素不会影响外面的元素，反之亦然。文字盘绕成果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参加计算。
CSS 在什么状况下会创立出 BFC（即脱离文档流）
0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（float 的值不为 none）
2、相对定位元素（position 的值为 absolute 或 fixed）
3、行内块（display 为 inline-block）
4、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相干的属性 )
5、弹性盒（display 为 flex 或 inline-flex）
6、默认值。内容不会被修剪，会出现在元素框之外（overflow 不为 visible）

BFC 作用（应用场景）
1、自适应两（三）栏布局（防止多列布局因为宽度计算四舍五入而主动换行）
2、防止元素被浮动元素笼罩 3、能够让父元素的高度蕴含子浮动元素，革除外部浮动（原理：触发父 div 的 BFC 属性，使上面的子 div 都处在父 div 的同一个 BFC 区域之内）
4、去除边距重叠景象，分属于不同的 BFC 时，能够阻止 margin 重叠

IFC 基本概念 IFC:
行内格式化上下文 IFC
IFC 原理（渲染规定 | 布局规定）：
（1）外部的 Box 会在程度方向，从含块的顶部开始一个接着一个地搁置；
（2）这些 Box 之间的程度方向的 margin，border 和 padding 都无效；
（3）Box 垂直对齐形式：以它们的底部、顶部对齐，或以它们外面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth 与 vertical-align。

标签语义化了解，和 h5 新个性，storage/cookie
标签语义化

1. 搜索引擎敌对。
2. 更容易让屏幕阅读器读出网页内容。
3. 去掉或款式失落的时候能让页面出现清晰的构造。
4. 便于团队开发和保护。

h5 新个性
css 边框 border-radious，border-image text-shadow box-shadowcss
背景 background-clip，background-origin，background-sizecss
蒙版 -webkit-mask:url(“04.png”) 40px 55px no-repeat;
css transform 属性
transform: translate，
transform: rotate，transform: scale,
transform: skewcss
过渡 transition: all 0.5s ease-in 0.1s ;
css 动画 -webkit-animation: changeText 0.3s ease-out;
css flex 布局

storage/cookie
cookie：只能存储 4KB 每次操作会随着 HTTP 申请发送给服务器 操作数据很繁琐，没有不便的 API 有可能被用户禁用
Flash：须要装置 Flash 插件
挪动端无奈遍及 HTML5 本地存储的长处：最小 5MB，能够申请更大的空间 不会随 HTTP 申请发送给服务器 有不便的 API 操作 挪动端遍及高
有 localStorage 与 sessionStorage 两种
localStorage 为永久性保留数据，不会随着浏览器的敞开而隐没，能够在同域名跨页拜访，无奈跨域。按域名进行存储，不会和其余域名抵触 键值对存储：key/value . 增加键值对：window.localStorage.setItem(key , value)获取键值：window.localStorage.getItem(key); 删除键值对: window.localStorage.removeItem(key); 革除键值对: window.localStorage.clear(); 属性 length

sessionStoragesessionStorage 为临时性保留数据，当页面敞开就会隐没。
其余设置根本与 localStorage 一样 sessionStorage 不能跨页面拜访，也不会触发跨标签页的 storage 事件。它只局限在以后的标签页，如果心愿存储在本地，能够间接调用 JSON.stringify() 将 json 对象转为 json 字符串，读取进去后调用 JSON.parse() 将 json 字符串转为 json 对象格局。
离线存储离线浏览 – 用户可在利用离线时应用它们 速度 – 已缓存资源加载得更快 缩小服务器压力 – 浏览器只从服务器下载更改的资源反对度：IE 不反对 应用办法页面头部像上面一样退出一个 manifest 的属性就能够了。

多线程单线程
JS 运行在浏览器中，是单线程的，每个 window 一个 JS 线程，浏览器是事件驱动的，浏览器中很多行为是异步的，例如：鼠标点击、进入、移出事件、定时器触发事件、ajax 申请实现回调等。当一个异步事件产生的时候，它就进入事件队列。
浏览器有一个外部大音讯循环，Event Loop（事件循环），会轮询大的事件队列并处理事件，当线程中没有执行任何同步代码的前提下才会执行异步代码。
通过应用 Web Worker，咱们能够在浏览器后盾运行 Javascript，而不占用浏览器本身线程。Web Worker 能够进步利用的总体性能，并且晋升用户体验 创立后盾过程，这些过程不会卡死用户界面，更适宜用来进行纯数据、与 UI 无关、较消耗 CPU 的计算。支持性检测 if(typeof(Worker)!==”undefined”){alert(‘ 反对多线程 ’); }else{alert(‘ 不反对多线程 ’); }

DOM 和 css 如何解析，如何渲染出元素？

DOM 和 CSSOM 的渲染过程是并行的。
通过 DOM 树和 CSS 规定树，浏览器就能够通过它两构建渲染树了。
浏览器会先从 DOM 树的根节点开始遍历每个可见节点，而后对每个可见节点找到适配的 CSS 款式规定并利用。渲染树生成后，还是没有方法渲染到屏幕上，渲染到屏幕须要失去各个节点的地位信息，这就须要布局的解决了。

布局阶段会从渲染树的根节点开始遍历，因为渲染树的每个节点都是一个 Render Object 对象，蕴含宽高，地位，背景色等款式信息。所以浏览器就能够通过这些款式信息来确定每个节点对象在页面上的确切大小和地位，布局阶段的输入就是咱们常说的盒子模型，它会准确地捕捉每个元素在屏幕内的确切地位与大小。
当浏览器通过网络或者本地文件系统加载一个 HTML 文件，并对它进行解析结束后，内核就会生成它最重要的数据结构 - DOM 树。

DOM 树上每一个节点都对应着网页外面的每一个元素，并且网页也能够通过 JavaScript 操作这棵 DOM 树，动静扭转它的构造。然而 DOM 树自身并不能间接用于排版和渲染，内核还会生成另外一棵树 - Render 树，Render 树上的每一个节点 - RenderObject，跟 DOM 树上的节点简直是一一对应的，当一个可见的 DOM 节点被增加到 DOM 树上时，内核就会为它生成对应的 RenderOject 增加到 Render 树上。

回流和重排怎么优化？
reflow（回流）

当浏览器发现布局产生了变动，这个时候就须要倒回去从新渲染，这个回退的过程叫 reflow。reflow 会从 html 这个 root frame 开始递归往下，顺次计算所有的结点几何尺寸和地位，以确认是渲染树的一部分发生变化还是整个渲染树。reflow 简直是无奈防止的，因为只有用户进行交互操作，就势必会产生页面的一部分的从新渲染，且通常咱们也无奈预估浏览器到底会 reflow 哪一部分的代码，因为他们会相互影响。

repaint（重绘）

repaint 则是当咱们扭转某个元素的背景色、文字色彩、边框色彩等等不影响它四周或外部布局的属性时，屏幕的一部分要重画，然而元素的几何尺寸和地位没有产生扭转。

须要留神的是，display:none 会触发 reflow，而 visibility: hidden 属性则并不算是不可见属性，它的语义是暗藏元素，但元素依然占据着布局空间，它会被渲染成一个空框。所以 visibility:hidden 只会触发 repaint，因为没有产生地位变动。

另外有些状况下，比方批改了元素的款式，浏览器并不会立即 reflow 或 repaint 一次，而是会把这样的操作积攒一批，而后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。然而在有些状况下，比方 resize 窗口，扭转了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
优化：
用 transform 做形变和位移能够缩小 reflow

防止一一批改节点款式，尽量一次性批改

应用 DocumentFragment 将须要屡次批改的 DOM 元素缓存，最初一次性 append 到实在 DOM 中渲染

能够将须要屡次批改的 DOM 元素设置 display:none，操作完再显示。（因为暗藏元素不在 render 树内，因而批改暗藏元素不会触发回流重绘）

防止屡次读取某些属性

通过相对位移将简单的节点元素脱离文档流，造成新的 Render Layer，升高回流老本

js 为什么须要放在 body(更好的答复其实是浏览器的渲染引擎和 js 解析引擎的抵触，当然答复 js 是单线程执行也没问题, 如何优化)？

浏览器解析网页时会同时进行 dom tree 和 style tree 的解析工作，只有 dom tree 和 style tree 解析实现时，才会构建 render tree，网页才会被 painting。而 js 在没有在 defer 或者 sync 属性时浏览器会阻塞以后 dom 构建期待 js 加载和执行结束之后才持续。但浏览器的 painting 不是只有一次的，当 style tree 解析实现时，如果遇到阻塞（js 加载或者执行）则浏览器会 painting 已构建完的 dom tree。所以当 js 放在头部时 js 的加载和执行会阻塞 js 脚本加载地位之后的 dom 的 painting，而放 body 最初时即便加载很慢，浏览器也会渲染 body 的内容。所以放 head 和放 body 的区别是放 body 能够更快的渲染出脚本加载地位之前的 dom tree。

操作 DOM 为什么是低廉的？
reflow（回流）
重排属于一项用户阻塞操作，它意味着如果在执行重排时有太多工作执行，那么你的 UI 可能会升高帧速率、呈现解冻，最差的状况甚至是 crash

js 如何执行(even Loop/ 宏工作、微工作，事件队列，promise,async/await)？

JS 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很简单的同步问题。
主线程齐全能够不论 IO 设施，挂起处于期待中的工作，先运行排在前面的工作。等到 IO 设施返回了后果，再回过头，把挂起的工作继续执行上来。这就有了之后的同步工作和异步工作于是，所有工作能够分成两种，一种是同步工作（synchronous），另一种是异步工作（asynchronous）。同步工作指的是，在主线程上排队执行的工作，只有前一个工作执行结束，能力执行后一个工作；异步工作指的是，不进入主线程、而进入”工作队列”（task queue）的工作，只有”工作队列”告诉主线程，某个异步工作能够执行了，该工作才会进入主线程执行。
单线程的呈现，才引发了同步和异步的呈现
同步工作就是按程序执行，从上往下。那么，异步工作也是有它的执行程序的，它也是从上往下，然而，异步工作里，对于异步类型还有进一步的划分，那就是接下来咱们要讲的微工作和宏工作，切记微工作比宏工作先执行
微工作（micro-task）process.nextTick、Promise、MutationObserver 等
宏工作（macro-task）setTimeout、setInterval、setImmediate、script（整体代码）、I/O 操作等
Promise 是有一点特殊性的，因为 Promise 构造函数中函数体的代码都是立刻执行的 , 而 Promise.then() 和 Promise.catch() 属于微工作，也就是 resolve() 和 reject()
new Promise(function (resolve) {
console.log(1)
})
下面这段实例代码的 1，是间接输入的，属于同步工作，尽管它的确在 Promise 中

调用栈这是最初要介绍的一个角色，也就是真正执行代码，执行工作的中央

Event Loop

初始状态下，调用栈空。微工作队列空，宏工作队列里有且只有一个 script 脚本（整体代码）。这时首先执行并出队的就是 整体代码 整体代码作为宏工作进入调用栈，进行同步工作和异步工作的辨别 同步工作间接执行并且在执行完之后出栈，异步工作进行微工作与宏工作的划分，别离被推入进入微工作队列和宏工作队列 等同步工作执行完了（调用栈为空）当前，再解决微工作队列，将微工作队列压入调用栈 当调用栈中的微工作队列被解决完了（调用栈为空）之后，再将宏工作队列压入调用栈，直至调用栈再一次为空，一次轮回完结 整体的运行流程能够查看下图，红色箭头为次要的执行流程，整体代码(宏工作) => 同步工作 => 微工作队列 => 宏工作队列尽管整体代码的确是一开始作为宏工作执行的，然而，心愿大家还是要切记，微工作队列比宏工作队列先执行(不便记忆)

js 的作用域？
闭包的了解 (防抖和节流)？
(通过一些题进行考查)，根底类型以及如何判断类型？
事件机制以及如何实现一个事件队列？
oop 编程和原型链？
最优的继承形式，es6 super 的作用（进阶），this 指向问题和 new 的过程 (bind 函数 &&new 函数手写)？
js 深拷贝？（JSON 办法实现拷贝有什么问题？）
把握如上根本能够横行了，如何王道呢，那就是框架和打包工具的应用和原理常识了~~~ 后续详解