Chuck
SSE 是 Server-Sent Events 的简称， 是一种服务器端到客户端(浏览器)的单项消息推送。对应的浏览器端实现 Event Source 接口被制定为HTML5 的一部分。不过现在IE不支持该技术。相比于 WebSocket，SSE 简单很多，服务器端和客户端工作量都要小很多、简单很多，同时实现的功能也要有局限。 ## 原理 如果 http 版本处于 2.0 以下，那么 http 是没办法做到服务器主动推送消息到客户端的。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。 也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。 SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。 ## 特点 和...
面试中面试官让手写一个缓存函数，然后自己其实没有怎么看过这方面知识，按照自己的认知利用闭包和 map 写了出来。其实我之前在看 vue 源码的时候有注意到计算属性是基于缓存函数实现的，但时间有点久了，后面搜了下有比较简洁的写法： ```js function memorize (func, context) { let cache = Object.create(null) context = context || this return (...key) => { if (!cache[key]) { cache[key] = func.apply(context,...
今天在修复一个 bug 时，看到 bug 描述是从课程列表页进入课程详情页后，来回切换左侧 tab 菜单，然后点击课程详情页返回按钮，预期是返回课程列表页，实际上返回的是上一个 tab 菜单页。 于是查了下资料：HTML 中的 History length 属性用于返回当前浏览器窗口历史列表中 URL 的计数。该属性返回的最小值是 1，因为当前页面是在此刻加载的，而可以显示的最大计数为 50。做了下测试，从打开一个浏览器窗口起，每打开一个页面，length 值就会加一，首次打开浏览器时会有默认页面，此时 length 为 1。 回到上述提到的 bug，我看下了源代码，发现里面所有的 tab 菜单页都监听了顶部导航栏里的返回按钮点击事件，有的处理逻辑是根据 history.length 是否大于 1 判定是否要回退到课程列表页的。
提到代理我们会想到 nginx 和 Charles，nginx 可以直接将特定目录下的资源代理到指定的目录，其既可以是服务器上的资源，也可以是本地启动 docker 将文件系统挂起后的本地资源；Charles 更多时候是用来抓包各种请求，它也可以像 nginx 那样批量代理，比如针对某个域名路径后接通配符来达到批量代理的目标。 1、nginx ```js location /statics/ { alias /project/statics/; } ``` 2、Charles 抓取到需要代理的请求后右击可以选择 map local，有时候如果想直接改线上代码，这种方式很合适。https://blog.csdn.net/Moonlight_16/article/details/118726585
和 img 元素表现类似，如果在 video 上添加背景色，会看到底部有多出来的空余部分。video 属于行内元素（[demo](https://codepen.io/inchill/pen/XWEmPpq)），img 也可以看做是行内元素，所以出现留白问题是 line-height 和 vertical-align 造成的，解决办法如下： 1. 自身设置 vertical-align: bottom； 2. 父元素设置 font-size: 0，当字体大小为 0 时也就不存在行高问题了； 3. 自身设置 display: block | flex 等块级布局。
### CommonJS Node 应用由模块组成，采用 CommonJS 模块规范。也就是说CommonJs是应用在node服务器端的，如果浏览器想使用CommonJs规范的话需要用 browserify 库来进行转化。 #### 1、module Node内部提供一个Module构建函数，所有模块都是Module的实例。 ```js function Module(id, parent) { this.id = id; this.exports = {}; this.parent = parent; // ... } ``` 每个模块内部，都有一个module对象，代表当前模块。它有以下属性。...
monorepo 发布仓库，本地还处于 alpha 调试版本阶段，准备发版时发现已经落后于主分支了，rebase 的时候会出现很多冲突，但其实基本是版本冲突，可以使用 vscode 的 accept all xxx 来快速解决，具体可以看看 https://stackoverflow.com/questions/52288120/how-can-i-accept-all-current-changes-in-vscode-at-once。
可参考张鑫旭的文章 https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
我目前的开发方式是通过 docker 启动一个 container，然后在把本机的工作目录挂载到 container 里，这样的话很方便，具体可以阅读 https://docs.docker.com/get-started/06_bind_mounts/。在一次开发调试时，发现 Chrome 预览没有生效，经过查看资源请求信息，发现很多资源不是 from memory cache 就是 from disk cache，而这就导致更改一直未生效。我于是把 Chrome 控制面板中的 Disable cache 勾选了，刷新页面加载到了最新的本地资源。本着好奇心，我接下来花了点时间探索了下 Chrome 的缓存策略。 memory cache 是从浏览器的内存空间（RAM）中访问缓存信息，所以读写速度更快，但它的生命周期更短；而 disk cache 是从磁盘访问的，读写速度较慢，它属于持久缓存。发现一个有意思的地方，就是 css...
1. innerHTML 设置或获取位于对象起始和结束标签内的 HTML； 2. outerHTML 设置或获取对象及其内容的HTML形式。 ```html test1 test2 ``` innerHTML 是 `test1 test2`；outerHTML 是整段 HTML。