1.innerHTML、innerText、 nodeValue 与 textContent之间的区别
title
内容
输出结果:
- innerHTML : 所有的html
- innerText : 所有文本节点的节点内容(渲染后的结果,不包括display:none里的内容)
- textContent : 所有文本节点的节点内容(包括display:none里的内容)
- nodeValue : 只能显示文本节点的内容(一般用childNodes[i]访问,标签元素无效null)
呈现一个wiki页面你会用到哪些语义化标签
:页面主题内容。
:h1~h6,分级标题, 与 协调有利于搜索引擎优化。
:无序列表。
- :有序列表。
:页眉通常包括网站标志、主导航、全站链接以及搜索框。
- 代码结构清晰,方便阅读,有利于团队合作开发。
- 方便其他阅读器,盲人设备根据语义渲染。
- 有利于SEO。
浏览器常用的对象
- dom文档对象模型
- 浏览器对象模型
- 浏览器API
图片懒加载的原理
- 标签传入的url地址临时保存在data-src属性,src指定默认图片
- 判断方法1:通过IntersectionObserver 判断是否图片在当前浏览器可视区域内
- 判断方法2:通过监听滚动事件,实时通过 getBoundingClientRect() 获取当前的top 与bottom判断是否在浏览器可视区域内
- 当在可视区域内,把data-src的url信息赋值给 真正显示的src,并且移除data-src 属性
Html5与Html4的不同
1.标签头不一样
html4
h5
- 语义化标签
- 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 来描述二维图形和绘图程序的语言
优势
- 支持放大缩小
- 支持事件处理
- 显示有痕迹,可以跟踪
- 跟html结合更好,样式设置容易
canvas画布
通过js动态绘制图形。使用标签包裹
优势
- 使用大数据量运算和显示,如城市地图
- 对于实时性要求高的 如游戏
- 输出是位图,可以导出图片
script放在body或header中会阻塞吗?
会
< Script>
标签默认是 阻塞同步执行的
可以通过设置属性 async和 defer 实现异步并行下载。
- async 只要下载完就执行,不分顺序。
- defer 在document解析完后执行,多脚本按html放的位置顺序执行,
简述一下浏览器渲染过程
- 先解析所有dom节点,生成dom树
- 同时解析sytle样式的节点,生成cssom树
- 把dom树和cssom树合并成一棵渲染树render tree
- 先layout布局:计算所有节点在ui上的距离
- 绘制内容:渲染树绘制成像素
-
显示输出:输出到屏幕
回流和重绘
回流也叫重排,当页面的元素位置发生变化,则发生
重绘:只在页面内容,位置没有变化
详细说一个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原理需要了解