day01： innerHTML、 nodeValue与 textContent之间的区别
一个节点的 innerHTML，它代表的是一个字符串，就是这个节点所包含的HTML字符串。你可以修改一个节点的 innerHTML，然后界面也会发生变化。
一个节点的textContent，它代表的是这个节点内的HTML字符串中的文本部分。而且这个文本部分，它包含了display 为 none的节点里面的文本，以及style标签 / script标签里面的文本。
一个节点的nodeValue的话，不同类型的节点 nodeValue 是不一样的，如果是文本节点，nodeValue 就是代表这个节点的文本值，如果是属性节点，nodeValue 就代表属性的值。
day02：呈现一个wiki页面你会用到哪些语义化标签
语义化标签，对于开发人员，对于搜索引擎，对于视障者，对阅读模式都是更加友好的一种方式。
像 wiki 这种文档型的页面用它特别合适。比如说比较大块的语义化标签，有 header，footer，main，aside这种。我们就可以用他们把页面的大体结构分出来。
然后具体去看细节的话，我们是可以再用 nav 做导航，然后在main里面我们可以用 article 做文章的主体，用 section 做文章的段落。
如果文章中出现了一些强调，我们可以用 strong 。
如果文章中出现了一些修改，我们可以用 ins 表示增，用 del 表示减 。
如果文章中出现了一些引用，包括图片的引用，代码的引用，表格的引用，都可以用 figure 表示。
day03：Day23 - window外的常用子对象
window上的对象分为两类，一类是BOM对象，有history，location，navigation，screen。
location 最简单，他返回了 url 的所有信息，比如说 url 里面的协议，主机名，端口号，在 location 里面都能分门别类地查到。
然后 history 他也蛮简单，它就是提供了一个接口，让你能够对历史访问的页面做前进或者后退，这样的页面跳转的操作。
navigation 对象，它能提供一些关于浏览器或者设备硬件自身的一些信息。比如浏览器的版本，或者它支不支持GPS之类的信息。
然后 screen 对象能提供一些和屏幕有关的，比如分辨率，颜色的深度，横屏竖屏的这种信息。
另一类对象就是 webAPI 了，代表的有fetch，console，localStorge。
day04: Day24 - 图片懒加载的原理
图片懒加载就是控制图片的加载，让图片加载变得有序有规则。
其实一个网站上有大量图片，如果不加控制的，同时加载，是会拖慢首屏时间，影响用户体验的。
所以，人们设计了一种只加载用户浏览到区域图片的技术，这样子的话，对于后端来说，能减少他们的流量，对于前端来说，能够缩短首屏时间。
具体原理，在于把握下载照片的时机，一般的做法就是通过scroll事件，去对比图片所在的高度是否达到用户滚轮的高度。
<!DOCTYPE html>
<html>
<style>
@charset "UTF-8";
.imglist{
width: 500px;
height: 500px;
display: block;
}
</style>
<head></head>
<body>
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<img class="imglist"
data-src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
</body>
<script>
window.onload = function () {
(function () {
let imgList = document.querySelectorAll(".imglist"),
options = {
rootMargin: '0px',
threshold: 0
};
let observer = new IntersectionObserver(imgAction, options);
function listenImg(target) {
observer.observe(target);
}
function imgAction(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) { //达到阈值
let node = entry.target;
node.src = node.dataset.src;
node.removeAttribute('data-src');
// 解除观察
observer.unobserve(entry.target)
}
});
}
imgList.forEach((img) => {
listenImg(img);
})
})()
}
</script>
</html>
day05：Html5与Html4的不同
HTML5 比 HTML4 首当其冲增加了很多语义化的标签，让代码增强了语义性，对 SEO 和盲人也都有好处。然后，它增强了多媒体的功能，像 video 标签和 audio 标签，还增加了canvas 和 svg，有了更丰富的页面绘图方式。
它还增加了webWorker，增强了前端多线程的能力。也增加了webSocket，实现了双向通讯的能力。然后还增加了webStorage，包括 localStorage 和 sessionStorage。
最后 ，form表单标签的提升也很大。
day06：SVG和CANVAS的区别？
canvas 在HTML里面的确是有这样一种节点，这种节点占据一块页面区域，称之为画布，在这个画布上要进行任何的绘制都必须通过 JS 来完成，而且画出来的是位图，也就是说，他不会因为这块儿绘图区域的大小缩放而导致浏览器的重新绘制，那么因此他就不会有相应的性能问题。所以，可以通过 canvas 进行大数据量的绘画，正因为如此，它的使用场景会可以允许做像地图，像游戏这样的东西。
而 SVG 的话正相反，它不需要使用 JS 来绘图，他只要用 SVG 类型的节点嵌套去描绘所要绘制的图形，并且，在这些节点上面也可以像其他的普通DOM元素一样去触发事件，而且绘制出来的图片它是矢量图，意味着区域缩放的时候他会动态重新绘制，这两点意味着它的交互性会更好。因此，他会用来做一些小图标，做一些小规模的可视化。
day07：Day27 - Script放在body或header中会阻塞吗?
要说这个问题，就必须讲清楚什么是 script ，什么是 body，他们的关系是什么。
script 是什么？它的核心职责是修改 DOM，他出现就是为了这个。想想前端三件套HTML/CSS/script，相当于 HTML 和 CSS 都是静态的被操作对象，那么 script 就是用来操作他们的。
body 代表的是什么？body 里面除了 script 标签全都是 HTML 和 CSS 都是初始化 DOM 的，那么 body 代表的是生成 DOM，script 是来修改 DOM 的。
所以在现实场景中，他们俩就做成很简单的模型，就是我在生成 DOM 的时候，你不要来修改 DOM，然后我修改 DOM 的时候，你不要去生成 DOM。生成 DOM 和 修改 DOM 是互斥的，这样很简单嘛，大家排队来做，不要穿插着做。
然后，一般总归是先生成对象再去修改它的，所以 script 标签我们都是放在 HTML 报文最后。所见即所得，script 放在最后就是最后执行，这是一开始最简单的规范版本。
后面，规范版本里面加了defer async锦上添花的东西。但他也把事情搞复杂了，原来我们就是所见即所得，你看到 script 标签在哪里，他就在那里执行，现在不一样了，现在只要打上 defer 属性，不管这个 script 标签在哪里，它都是最后执行的。
那么 async 就更复杂了，你完全不知道它在什么时候会被执行，只要它下载好了，它就有可能被执行。唯一知道的是它一定是在 DOMContentLoaded 之前被执行掉的。
day08：简述一下浏览器渲染过程
浏览器的渲染过程大致可以分成几个关键的阶段：
首先就是浏览器会利用HTML文档字符串去生成 DOM 树和 CSS 树，随后，通过这两棵树去生成一棵 render 树，然后用这颗 render 树去确定界面上每一个盒子的尺寸大小以及它们的外观，然后确定出来的这些尺寸大小、外观信息就交给 GPU 做界面上的最终显示，这就是一个大致的过程。
day09：回流和重绘
HTML 规范中对于界面的展现是基于盒模型的机制。
一个盒子，它的大小和尺寸会导致会影响他内部盒子的位置，会影响他兄弟盒子，甚至能影响到他父亲盒子的尺寸和位置，因此，在绘制界面之前，就需要计算出所有这些的位置布局信息，然后再结合样式去做界面的展现，所以这个过程中就出现了回流和重绘的概念。
所谓的回流，就是对所有的节点计算他们的布局信息。
所谓的重绘就是根据布局信息以及样式信息对界面做展示，做渲染。
减少回流的手段有：DOM 元素 display 属性设置为 absolute 或 fixed 缩小回流区域的范围。利用 会触发 GPU 加速的 CSS3 的属性诸如 transforms 或 transitions。其他的手段还有像 DOM操作的读写分离，DOM 操作的离线操作
