JJ Jiang

``` // 函数离开调用栈，以下简称：出栈 asyncMgt(function* () { try { const ninjas = yield getJSON("data/ninjas.json");// 请求发出后，生成器出栈 const missions = yield getJSON(ninjas[0].missionsUrl); const missionDescription = yield getJSON(missions[0].detailsUrl); //Study the mission details } catch...

window上的对象分为两类，一类是BOM对象，有history，location，navigation，screen。 location 最简单，他返回了 url 的所有信息，比如说 url 里面的协议，主机名，端口号，在 location 里面都能分门别类地查到。 然后 history 他也蛮简单，它就是提供了一个接口，让你能够对历史访问的页面做前进或者后退，这样的页面跳转的操作。 navigation 对象，它能提供一些关于浏览器或者设备硬件自身的一些信息。比如浏览器的版本，或者它支不支持GPS之类的信息。 然后 screen 对象能提供一些和屏幕有关的，比如分辨率，颜色的深度，横屏竖屏的这种信息。 另一类对象就是 webAPI 了，代表的有fetch，console，localStorge。

浏览器的渲染过程大致可以分成几个关键的阶段： 首先就是浏览器会利用HTML文档字符串去生成 DOM 树和 CSS 树，随后，通过这两棵树去生成一棵 render 树，然后用这颗 render 树去确定界面上每一个盒子的尺寸大小以及它们的外观，然后确定出来的这些尺寸大小、外观信息就交给 GPU 做界面上的最终显示，这就是一个大致的过程。

canvas 在HTML里面的确是有这样一种节点，这种节点占据一块页面区域，称之为画布，在这个画布上要进行任何的绘制都必须通过 JS 来完成，而且画出来的是位图，也就是说，他不会因为这块儿绘图区域的大小缩放而导致浏览器的重新绘制，那么因此他就不会有相应的性能问题。所以，可以通过 canvas 进行大数据量的绘画，正因为如此，它的使用场景会可以允许做像地图，像游戏这样的东西。 而 SVG 的话正相反，它不需要使用 JS 来绘图，他只要用 SVG 类型的节点嵌套去描绘所要绘制的图形，并且，在这些节点上面也可以像其他的普通DOM元素一样去触发事件，而且绘制出来的图片它是矢量图，意味着区域缩放的时候他会动态重新绘制，这两点意味着它的交互性会更好。因此，他会用来做一些小图标，做一些小规模的可视化。

HTML 规范中对于界面的展现是基于盒模型的机制。 一个盒子，它的大小和尺寸会导致会影响他内部盒子的位置，会影响他兄弟盒子，甚至能影响到他父亲盒子的尺寸和位置，因此，在绘制界面之前，就需要计算出所有这些的位置布局信息，然后再结合样式去做界面的展现，所以这个过程中就出现了回流和重绘的概念。 所谓的回流，就是对所有的节点计算他们的布局信息。 所谓的重绘就是根据布局信息以及样式信息对界面做展示，做渲染。

图片懒加载就是图片的按需加载。 其实一个网站上有大量图片，如果不加控制的，同时加载，是会拖慢首屏时间，影响用户体验的。 所以，人们设计了一种只加载用户浏览到区域图片的技术，这样子的话，对于后端来说，能减少他们的流量，对于前端来说，能够缩短首屏时间。 具体原理，在于把握下载照片的时机，一般的做法就是通过scroll事件，去对比图片所在的高度是否达到用户滚轮的高度。

一个节点的 innerHTML，它代表的是一个字符串，就是这个节点所包含的HTML字符串。你可以修改一个节点的 innerHTML，然后界面也会发生变化。 一个节点的textContent，它代表的是这个节点内的HTML字符串中的文本部分。而且这个文本部分，它包含了display 为 none的节点里面的文本，以及style标签 / script标签里面的文本。 一个节点的nodeValue的话，不同类型的节点 nodeValue 是不一样的，如果是文本节点，nodeValue 就是代表这个节点的文本值，如果是属性节点，nodeValue 就代表属性的值。

React 的事件绑定说的其实就是我们定义了一个函数，然后传给 React 的框架，然后当事件发生的时候呢，React的框架就会调用这个函数。 那么这个函数的 this 指向，正常情况下，其实是由 React 的框架来决定的。React 框架它如果以构造函数的方式去调用这个函数，或者是以方法的方式去调用这个函数，或者以普通函数的方式去调用这个函数，都会有不同的 this 指向的情况发生。 在现实中呢，React 其实就是以 call(undefined) 的方式去调用了我们传给他的这个函数，也就是说this会指向 undefined。 所以，如果我们真的需要在这个回调函数里面使用 this 的话。如果我们真的需要在这个回调函数里面拥有一个符合我们自己需求的 this 的话。我们作为函数的定义者，其实是有权利以更高的优先级去指定 this 的，那么手段有两个，一个就是通过箭头函数，另外一个就是通过 bind。

语义化标签，对于开发人员，对于搜索引擎，对于视障者，对阅读模式都是更加友好的一种方式。 像 wiki 这种文档型的页面用它特别合适。比如说比较大块的语义化标签，有 header，footer，main，aside这种。我们就可以用他们把页面的大体结构分出来。 然后具体去看细节的话，我们是可以再用 nav 做导航，然后在main里面我们可以用 article 做文章的主体，用 section 做文章的段落。 如果文章中出现了一些强调，我们可以用 strong 。 如果文章中出现了一些修改，我们可以用 ins 表示增，用 del 表示减 。 如果文章中出现了一些引用，包括图片的引用，代码的引用，表格的引用，都可以用 figure 表示

要说这个问题，就必须讲清楚什么是 script ，什么是 body，他们的关系是什么。 script 是什么？它的核心职责是修改 DOM，他出现就是为了这个。想想前端三件套HTML/CSS/script，相当于 HTML 和 CSS 都是静态的被操作对象，那么 script 就是用来操作他们的。 body 代表的是什么？body 里面除了 script 标签全都是 HTML 和 CSS 都是初始化 DOM 的，那么 body 代表的是生成 DOM，script 是来修改 DOM 的。...