什么是 doctype 及作用
dtd(document type definition, 文档类型定义) 是一系列的语法规则, 用来定义 xml 或者 (x)html 的文件类型. 浏览器会使用它来判断文档类型, 决定使用何种协议来解析, 以及切换浏览器模式
doctype 是用来声明文档类型和 dtd 规范的, 一个主要的用途是文件的合法性验证, 如果文件不合法, 那浏览器解析会出错
就是告诉浏览器什么是 dtd
常见的 doctype 有哪些
- h5
- <!DOCTYPE HTML>
HTML4.01 Strict 严格模式
该 dtd 包含所有 HTML 元素和属性, 但不包括展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> http://www.w3.org/TR/html4/strict.dtd%22%3E ;
HTML4.01 Transitional 传统
该 dtd 包含所有 HTML 元素和属性, 包括展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> http://www.w3.org/TR/html4/loose.dtd%22%3E ;
浏览器渲染过程
domtree+CSStree=tender tree 交给浏览器描绘出来 (渲染树)
什么是 reflow
dom 结构中的各个元素都有自己的盒子, 这些需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置, 这过程称为 reflow
触发 reflow
当你增加, 删除, 修改 dom 节点, 会导致 reflow 或者 repaint
当移动 DOM 位置, 或者弄个动画
修改 CSS 样式
resize 窗口的时候 (移动端没有这个问题), 或是滚动时候
修改网页默认字体时候
如何避免 reflow
重排 reflow
重绘 repaint
什么是 repaint
当各种盒子的位置, 大小以及其他属性, 例如颜色, 字体大小, 等确定下来后, 浏览器于是便把这些元素都按照各自的特性绘制了一遍, 于是页面的内容出现了, 这个过程称为 repaint
触发 repaint
dom 改动
CSS 改动
如何减少 repaint 频率
创建较少的 dom 节点
布局 layout
JS 运行机制
JS 是单线程, 同一时间只能做一件事
先同步, 从上到下, 后异步,
- console.log('a') while (true) {}
- console.log('b')
就输出 a, 之后 while 一直未 true, 所以 b 永远不会被执行到, while 为 true 一直执行会死循环, 页面一直运行
- for (var i = 0; i < 4; i++) {
- setTimeout(function() {
- console.log(i);
- },
- 1000);
- }
4(4) 执行 4 次 4
异步任务的放入时间和执行时间
如何理解 JS 的单线程?
什么是任务队列?
同步, 异步
什么是 EVENT LOOP?
事件循环
异步任务
setTimeout 和 setInterval
DOM 事件
es6 中的 Promise
理解单线程概念
理解任务队列
列举 event loop
理解哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机
页面性能
来源: http://www.qdfuns.com/article/50984/6841f6cf49b5264e275e5c5b862ccda5.html