衬着机制
什么是doctype及作用
必须按范例来讲
浏览器衬着历程
dom + cssom -> reder tree -> layout
重排reflow
定义：DOM构造中的各个元素都有本身的盒子(模子)，这些都须要浏览器依据种种款式来盘算并依据盘算结果将元素放到它该涌现的位置，这个位置称之为reflow。
触发：
当你增添、删除、修正DOM结点时，会致使reflow或repaint.
当你挪动DOM的位置，或搞个动画的时刻
修正CSS款式的时刻
当调解窗口大小，或许转动的时刻有能够会触发。
重绘repaint
定义：
当种种盒子的位置、大小以及其他属性，比方色彩、字体大小都肯定下来后，浏览器因而把这些元素都根据各自的特征绘制一遍，因而页面的内容涌现了。只需页面显现的发作了变化都是repaint。
触发repaint：
DOM修改
CSS修改
防止发作repaint：
把一切的DOM都增加到document fragment内里。
规划layout
*js运转机制
……有机遇还须要继续相识
问题一：
console.log(1);
setTimeout(function(){
console.log(2);
},0);
console.log(3);
//1，3，2
//setTimeout是异步使命，所以不会和console.log同步实行。所以当实行完console.log(2)后再实行setTimeout,0秒后输出3.
//末了的打印递次是什么？这道题须要相识js运转机制
js是单线程：所谓单线程就是同一时候只能做一件事，
使命行列：
同步使命和异步使命：
setTimeout、 setInterver是异步使命，而console.log是同步使命。
问题二：
console.log('A');
while(true){
}
console.log('B');
//输出A
//由于while会不停轮回致使console.log(B)没法实行。问题三：
console.log('A');
setTimeout(function(){
console.log(B);
},0);
while(1){
}
//1是true,0是false.问题四：
for(var i=0;i<4;i++){
setTimeout(function(){
console.log(i);
},1000);
}
//4，4，4，4
//异步行列实行时候
//异步使命的放入时候和实行时候
//和上面几题是两个观点怎样明白js单线程
在一个时候内只醒目一件事
什么是使命行列
使命行列有同步使命和异步使命.
什么是Event Loop(事宜轮回)
什么时刻会开启异步使命：
setTimeout和setInterval
DOM事宜：须要用到addEventlistener,当触发某个事宜，放入异步使命行列中
ES6中的promise
明白哪些语句加入到异步行列
*明白语句放入异步行列的机遇
页面机能
提拔页面机能的要领有哪些
- 资本紧缩兼并，削减HTTP要求.(把资本文件变小)
- 非中心代码异步加载->异步加载的体式格局->异步加载的区分
- *应用浏览器缓存->缓存的分类->缓存道理
- 运用CDN(属于收集优化)
- 预剖析DNS
<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”>
注：当一次翻开时，浏览器缓存起不到任何作用，然则运用CDN能够起到作用。
2)异步加载
异步加载的体式格局：
- 动态剧本加载(动态建立结点)
- defer
- async
异步加载的区分:
- defer在HTML剖析以后才会实行，如果是多个，根据加载递次顺次实行。
- async是在加载完以后马上实行，如果是多个，实行递次和加载递次无关。
3)浏览器缓存
浏览器缓存的分类
强缓存：
协商缓存：
毛病监控
前端毛病的分类：
- 立即运转毛病：代码毛病
- 资本加载毛病
每种毛病的捕捉体式格局
立即毛病的捕捉体式格局：
- try…catch
- window.onerror
资本加载毛病：
- object.onerror
- performance.getEntries()
- Error事宜捕捉
延长：跨域的js运转毛病能够捕捉吗，毛病提醒什么，应当怎样处置惩罚？
- 在script标签增加crossorigin属性
- 设置js资本相应头Access-Control-Allow-Origin:*
上报毛病的基本道理
- 采纳Ajax通讯的体式格局上报
- 应用Image对象上报
