实习笔记——其他篇

JSON.stringify 修复 cyclic bug，通过增加一个替换器，参考链接
图片的懒加载和预加载。

懒加载：即加载可视区域内的图像，可视区域外的不加载。

预加载：即提前加载。
css的异步加载方案：
1. js 动态插入 link 标签再插入到dom中。
2. 将link元素的media属性设置为用户浏览器不匹配的媒体类型。
3. 通过rel属性将link元素标记为alternate，之后再改回去。
4. 相较而言较新的方法：rel=”preload”，浏览器不支持可以使用loadCSS
```
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
```
CSS in JS的解决方案（普通css不能获取状态）：

React原生：inline style，采用驼峰命名，不支持伪类，不支持媒体查询。样式书写采用对象的方式。

JSS：补充了原生的不支持的伪类和媒体查询。样式书写采用对象的方式。

styled-components：
1. 书写使用模板字符串
```
const Item = styled.li`
    font-size: 16px;
`;
```
2. 不用在标签上加上className，标签名就是样式名
```
//之前
<li className="item">这是一条普通的记录</li>
//现在
<Item>这是一条普通的记录</Item>
```
3. 样式的组合与继承，全局样式，动画，属性过滤（Prop filtering）
4. 不支持 less 和 sass 语法（但是由于是在js中，可以使用变量）
5. 由于是js，所以已经实现模块化。
Radium

Aphrodite

Emotion
观察者模式的demo。需要新建一个对象，对象需要订阅和取消订阅两个方法，订阅的过程是将方法加入到某个属性的数组中去，再需要一个方法用来发布，发布是将某个属性的数组里的方法全部执行。链接
心跳重连：websocket是一个长连接的协议，但是在前端异常断开浏览器的处理机制不一样，还有就是假如后端异常断开，前端都不能正确调用onclose方法。所以采用心跳重连的方式，隔一段时间向后台发送一次心跳信息，如果超时未回复就调用onclose方法。

具体实现为，需要两个定时器，当调用onopen和onmessage的时候先清除上一次的心跳定时器和计时定时器，然后新建新的心跳定时器（时长为自定义的心跳间隔）。这个心跳定时器的回调是：发送心跳信息到后台，然后再新建一个计时定时器。这个计时定时器的回调是：执行onclose方法（onclose方法会调用重连的方法）。
服务器集群负载均衡原理
1. HTTP重定向
2. DNS负载均衡
3. 反向代理负载均衡（七层负载均衡）
4. IP负载均衡（四层负载均衡）
5. 直接路由
6. IP隧道
webpack：

生成和控制index.html：HtmlWebpackPlugin， html-webpack-template

清理/dist文件夹：clean-webpack-plugin

自动编译代码：webpack's Watch Mode，webpack-dev-server，webpack-dev-middleware

模块热替换（HMR）

tree shaking：删除未使用的dead-code
Iconfont

字体图标是一种矢量图标，拥有放大缩小都不会失真的优点（由于矢量图的实现是通过一系列的计算机指令来实现，本质就是数学公式画图）。图片还能一套复用，不用各种尺寸。这样还减小了包的体积。

缺点是只支持单色的图标。图片内容会比较简单。

实习笔记：其他篇

这是笔者在实习中所学习到的和了解的。

实习笔记——其他篇

CATALOG

FEATURED TAGS

FRIENDS