1.innerHTML、innerText、 nodeValue 与 textContent之间的区别
<div id="app">
<h1>title</h1>
<p>内容</p>
</div>
<script>
//获取或设置eLement内部所有Html（包括注释）
console.log(document.getElementById("app").innerHTML)
//用来获取或设置文本节点的节点内容(渲染后的，不包含display:none)
console.log(document.getElementById("app").innerText)
//用来获取或设置element节点内的所有文本节点的节点内容
console.log(document.getElementById("app").textContent)
//用来获取或设置文本节点的节点内容
console.log(document.getElementById("app").nodeValue) //这里为null
console.log(document.getElementById("app").childNodes[0].nodeValue)//只能从文本节点调用nodeValue
</script>
输出结果：
- innerHTML : 所有的html
- innerText : 所有文本节点的节点内容(渲染后的结果，不包括display:none里的内容)
- textContent : 所有文本节点的节点内容(包括display:none里的内容)
- nodeValue : 只能显示文本节点的内容（一般用childNodes[i]访问，标签元素无效null）
呈现一个wiki页面你会用到哪些语义化标签
<title>：页面主题内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。
- 代码结构清晰，方便阅读，有利于团队合作开发。
- 方便其他阅读器，盲人设备根据语义渲染。
- 有利于SEO。
浏览器常用的对象
- dom文档对象模型
- 浏览器对象模型
- 浏览器API
图片懒加载的原理
- 标签传入的url地址临时保存在data-src属性，src指定默认图片
- 判断方法1:通过IntersectionObserver 判断是否图片在当前浏览器可视区域内
- 判断方法2:通过监听滚动事件，实时通过 getBoundingClientRect() 获取当前的top 与bottom判断是否在浏览器可视区域内
- 当在可视区域内，把data-src的url信息赋值给 真正显示的src，并且移除data-src 属性
Html5与Html4的不同
1.标签头不一样
html4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
h5
<!DOCTYPE html">
- 语义化标签
- Drag 和 Drop
- Local Storage
- Web Worker
- 地理定位
- datalist 下拉推荐集合
- Canvas+ SVG
- 全局属性
- contentEdittable属性:(true/false 有继承性) 允许用户编辑属性中的内容
- designMode属性:(on/off 只能在js中修改编辑)用来指定整个页面是否可编辑
- hidden属性:(true/false 页面装载后页面允许js进行修改)通知浏览器不渲染该元素
- spellcheck属性: 针对input、textare文本输入框的新属性，进行拼写和语法检查
- tabindex属性:(默认情况下只有链接元素/表单元素按tab键获取到焦点，可直接在其他标签上加tabindex属性进行使用)当不断敲击tab键，让窗口或页面中的控件获得焦点，对窗口或页面中的所有元素进行遍历，每个控件的tabindex表示是第几个被访问到的
SVG和 canvas 的区别？
SVG
SVG 可伸缩矢量图形 Scalable Vector Graphics。
SVG 是使用 XML 来描述二维图形和绘图程序的语言
<svg width="100" height="110">
<rect width="150" height="75" style="fill: rgb(255, 251, 0); stroke-width: 3; stroke: rgb(0, 0, 0)" />
</svg>
优势
- 支持放大缩小
- 支持事件处理
- 显示有痕迹，可以跟踪
- 跟html结合更好，样式设置容易
canvas画布
通过js动态绘制图形。使用<canvas>标签包裹
<canvas id="canvasId" width="100" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById("canvasId");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0, 0, 50, 50);
</script>
优势
- 使用大数据量运算和显示，如城市地图
- 对于实时性要求高的 如游戏
- 输出是位图,可以导出图片
script放在body或header中会阻塞吗?
会
< Script>标签默认是 阻塞同步执行的
可以通过设置属性 async和 defer 实现异步并行下载。
- async 只要下载完就执行，不分顺序。
- defer 在document解析完后执行，多脚本按html放的位置顺序执行，
简述一下浏览器渲染过程
- 先解析所有dom节点，生成dom树
- 同时解析sytle样式的节点，生成cssom树
- 把dom树和cssom树合并成一棵渲染树render tree
- 先layout布局：计算所有节点在ui上的距离
- 绘制内容：渲染树绘制成像素
-
显示输出：输出到屏幕
image.png
回流和重绘
回流也叫重排，当页面的元素位置发生变化，则发生
重绘：只在页面内容，位置没有变化
详细说一个ServiceWorker的应用
ServiceWorker 也是一种特殊的webworker ，是独立的进程
多个页面可以共享，用于实现如请求借口时候，做代理缓存的处理。
一般搭配window.caches(CacheStorage) 数据缓存 和 indexDB实现图片缓存。
防抖和节流
网络：
计算机网络连接最少需要两根导线，一条发送，一条接受。 每一条通过高低频率，实现0110000111的二进制效果。
当只有两台计算机的时候，是没有问题。当超过几台计算机互相通讯， A电脑同时接受B，C，无法区分是B的数据和C的数据。可以通过使用退避算法 实现区分发送源。
事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
事件流
- 事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
- 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
- 事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。
委托
事件委托的原理：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。 例如： 给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li ，然后事件冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
CDN
CDN 全称 Content Delivery Network ，即内容分发⽹络。其基本思路是尽可能避开互联⽹上有可能影响数据 传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
CDN运作原理
本地缓存的数据，通过 key-value 的形式，将url 和本地缓存进⾏映射,存储结构与 Map 相似，采⽤ hash+链表形
式 进⾏缓存。
CDN命中率
衡量我们CDN服务质量的⼀个核⼼标准，当⽤户访问的资源恰好在缓存系统⾥，可以直接返回给⽤户，说明CDN命
中；如果CDN缓存中，没有命中资源，那么会触发 回源 动作
重要概念
CDN回源
⼀级缓存 访问 ⼆级缓存 是否有相关数据，如果有，返回⼀级缓存。
⼆级缓存 Miss，触发 ⼆级缓存 回源请求，请求源站对应数据。获取结果后，缓存到本地缓存，返回数据到⼀
级缓存。
⼀级缓存 获取数据，缓存本地后，返回给⽤户
CDN预热数据
上⾯说的访问模式，都是基于 Pull模式 ，由⽤户决策哪部分热点数据会最终存留在CDN缓存中；对于⼤促场景，
我们往往需要预先将活动相关资源 预热 到 边缘节点（L1） ,避免⼤促开启后，⼤量⽤户访问，造成源站压⼒过⼤。
这时候采⽤的是 Push模式 。
RPC 远程过程调⽤
概念 RPC：Remote Procedure Call，远程过程调⽤。是指计算机程序使过程在不同的地址空间（通常在共享⽹络的另 ⼀台计算机上）执⾏时，其编码⽅式就像是正常的（本地）过程调⽤，⽽⽆需程序员明确为远程交互编码细节。 RPC是⼀种服务器-客户端（Client/Server）模式，经典实现是⼀个通过发送请求-接受回应进⾏信息交互的系统。
HTTP的缺点也很快暴露：
- 有⽤信息占⽐少，HTTP在OSI的第七层，包含了⼤量的HTTP头等信息
- 效率低，因为第七层的缘故，中间有很多层传递
- HTTP协议调⽤远程⽅法复杂，需要封装各种参数名和参数值以及加密通讯等
所以RPC好在哪？
- 都是有⽤信息
- 效率⾼
- 调⽤简单
- ⽆需关⼼⽹络传输或者通讯问题
HTTP和RPC其实有联系
http也是rpc实现的⼀种⽅式。
vpn技术
vpn 全程是Virtual private network，它通过公共⽹络提供了专⽤⽹络。使得⽤户的设备可以像在私有⽹络⼀样通 过公共⽹络来发送和接收数据，所以叫做虚拟专⽤⽹络。
Http2（优化的时候讲）
多路复⽤ - 雪碧图、多域名CDN、接⼝合并
官⽅演示 - https://http2.akamai.com/demo
多路复⽤允许同时通过单⼀的 HTTP/2 连接发起多重的请求-响应消息；⽽HTTP/1.1协议中，浏览器客户
端在同⼀时间，针对同⼀域名下的请求有⼀定数量限制。超过限制数⽬的请求会被阻塞**
⾸部压缩
http/1.x 的 header 由于 cookie 和 user agent很容易膨胀，⽽且每次都要重复发送。http/2使⽤
encoder 来减少需要传输的 header ⼤⼩，通讯双⽅各⾃ cache⼀份 header fields 表，既避免了重复
header 的传输，⼜减⼩了需要传输的⼤⼩。⾼效的压缩算法可以很⼤的压缩 header，减少发送包的数
量从⽽降低延迟
服务端推送
在 HTTP/2 中，服务器可以对客户端的⼀个请求发送多个响应。举个例⼦，如果⼀个请求请求的是
index.html，服务器很可能会同时响应index.html、logo.jpg 以及 css 和 js ⽂件，因为它知道客户端会
⽤到这些东⻄。这相当于在⼀个 HTML ⽂档内集合了所有的资源
HTTP3.0
之所以要有HTTP3主要原因还在于上⽂提到的HTTP2存在的问题，这些问题的根源是底层⽀撑的TCP协议造成的。 Google意识到这些问题之后，于是就提出了基于UDP协议的QUIC协议，让HTTP跑在QUIC上，⽽不是TCP上，这 就是HTTP3，HTTP3解决了HTTP2存在的队头阻塞问题。
异步加载、
图⽚懒加载、
强/协商缓存
管线化技术与keepalive
Thunk、Generator、Co、Promise、Async/Await
VPN与⽹络隧道技术Tunnel
BFF 与 中台
VPN与⽹络隧道技术、暗⽹ (后续B栈代码演示)
新技术展望 HTTP2、HTTP3
Websocket
GraphQL
- Webpack的核⼼概念
entry: ⼊⼝，webpack 构建第⼀步；
output: 输出
loader: 模块转换器，⽤于将模块的原内容按照需求转换成新内容；
plugin: 扩展插件,在 webpack 构建过程的特定时机注⼊扩展逻辑，⽤来改变或优化构建结果；
mode: 控制打包环境
通过选择 development, production 或 none 之中的⼀个，来设置 mode 参数，你可以启⽤ webpack 内置
在相应环境下的优化。其默认值为 production。
环境
devserver: 是⼀个⼩型的 node.js Express 服务器，使⽤ webpack-dev-middleware 中间件来为通过
Webpack基础
https://juejin.cn/post/6994068283758493704
Webpack进阶
https://juejin.cn/post/6994246693159960583
sourcemap
异常监控系统
https://juejin.cn/post/6844904119136698381
⽂件指纹技术
摘要算法⼜称哈希算法、散列算法。摘要也称哈希值，表示输⼊任意⻓度的数据，都会输出固定⻓度的数据。通过
摘要算法（⽐如MDS和SHA-1）就可以得到该哈希值。
哈希算法
- 不定⻓输⼊转定⻓摘要
- 满⾜雪崩效应
- 单项不可逆
Webpack与⽂件指纹
版本管理： 在发布版本时，通过⽂件指纹来区分 修改的⽂件 和 未修改的⽂件。
使⽤缓存： 未修改的⽂件，⽂件指纹保持不变，浏览器继续使⽤缓存访问。
⽂件指纹设置
我们在配置⽂件（ webpack.config.js ）中，通过占位符设置⽂件指纹。
// webpack.config.js
module.exports = {
// ...
entry: {
app: "./src/app.js",
index: "./src/index.js",
},
output: {
filename: "[name][chunkhash:8].js",
// ...path
},
};
Babel与AST
Treeshaking树摇
优化篇
构建速度
提⾼⻚⾯性能
Webpack 源码实现
https://juejin.cn/post/7003278292430094366
plugin 插件
扩展插件，在 webpack 构建过程的特定时机注⼊扩展逻辑，⽤来改变或优化构建结果；
loader原理
loader是链式传递的，对⽂件资源从上⼀个loader传递到下⼀个，⽽loader的处理也遵循着从下到上的顺序，我们
简单了解⼀下loader的开发原则：
- 单⼀原则: 每个Loader只做⼀件事，简单易⽤，便于维护；
- 链式调⽤: Webpack 会按顺序链式调⽤每个Loader；
- 统⼀原则: 遵循 Webpack 制定的设计规则和结构，输⼊与输出均为字符串，各个 Loader 完全独⽴，即插即
⽤； - ⽆状态原则：在转换不同模块时，不应该在loader中保留状态；
因此我们就来尝试写⼀个 less-loader 和 style-loader ，将 less⽂件 处理后通过style标签的⽅式渲染到
⻚⾯上去。
展望篇
monorepo⻛格 项目管理方式： 多个项目放到一个git上，推荐使用 lerna 管理
Vite与Bundleless
Bundleless 说到底，就是指⽆打包构建，与我们当下流⾏的打包构建相对，⽽打包器则是我们前端开发者⽤于将 JS 模块打包成单⼀的、可在浏览器内运⾏的⽂件的⼯具。 Vite原理需要了解
