• 重排(回流)reflow与重绘repaint

  重排，当DOM元素位置或大小变化时，浏览器需要重新计算元素的几何属性，将元素放到正常的位置，这个过程就是重排。

  重绘，当DOM元素的外观发生变化，但没有改变其布局，重新绘制元素外观的过程，叫做重绘。

  重排与重绘次数过多会影响页面性能

  减少次数方法，将同一元素的布局操作进行一次性改变。如：JS去操作元素top,left，此时就会产生2次。（尽量不要把读操作和写操作放在一个语句里，这样会产生2次或多次的重排重绘)。

  对于有动画的元素，使用POSITION的ABSOLUTE或FIXED将其脱离文档,在实现动画时将不会影响到其他元素。

关于HEXO中插入图片,原来一直使用图床，由于免费的图床服务会停掉，导致文章图片会丢失,现决定使用本地嵌入图片的方式，虽然慢一点，但图片还在。

HEXO嵌入本地图片需要做如下操作：

代理服务器概述

代理服务器（Proxy Server）的功能是代理网络用户去取得网络信息。形象地说，它是网络信息的中转站，是个人网络和Internet服务商之间的中间代理机构，负责转发合法的网络信息，对转发进行控制和登记。

代理服务器作为连接Internet与Intranet的桥梁，在实际应用中发挥着极其重要的作用，它可用于多个目的，最基本的功能是连接，此外还包括安全性、缓存、内容过滤、访问控制管理等功能。更重要的是，代理服务器是Internet链路级网关所提供的一种重要的安全功能，它的工作主要在开放系统互联（OSI）模型的对话层

本次利用Go语言实现一个简单的HTTP代理服务器，主要分为以下几个部分完成：

• 实现简单的Web服务器

• 实现简单的代理服务器

  • 手动实现
    • 通过ini文件配置代理WEB对象
    • 根据访问路径实现基本的代理服务器
    • 实现代理服务器基本的Basic认证
    • 使用go内置代理函数实现
  • 实现代理服务器负载均衡
    • 简单的随机负载
    • IP_HASH负载
    • 负载加权随机
    • 轮询负载
      • 轮询加权
      • 平滑轮询加权
  • 负载均衡HTTPSERVER健康检查
    • 简易健康检查
    • 实现简单FailOver

本次框架封装主要是针对微软域控活动目录的基本操作。C#原先以提供活动目录的基本操作，但由域控本身概念较多，开发人员需要对其比较了解，为了降低这方面的学习成本，对其进行二次封装。

框架主要是针对如下两个方面进行封装：

• LDAP查询语句自动的生成
• 活动目录实体对象的操作

在阐述前，先来让我们简单了解关于域控的基本知识。

域控服务器

域控服务器是用语言软件集中管理的器件，能安全集中管理域中账户密码、管理策略等构成数据库，统一安全策略。

域服务器的作用是：

• 安全集中管理，统一安全策略。
• 软件集中管理，按照公司要求限定所有机器只能运行必需的办公软件。
• 环境集中管理，利用AD可以统一客户端桌面,IE,TCP/IP等设置
• 活动目录是企业基础架构的根本，为公司整体统一管理做基础。其它ISA,Exchange,防病毒服务器，补丁分发服务器，文件服务器等服务依赖于域服务器。

环境准备 - 编译ES6

ES6特性不是所有的浏览器都支持，所以需要通过对ES6语法的编译。
JAVASCRIPT打包处理方式有很多,Grunt,Gulp,Webpack,Rollup,这些都是针对于现在前端模块化开发而产生的。

Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.

ES6的编译采用WEBPACK+BABEL LOADER进行.
在BABEL中可以使用BABEL PRESETS来控制编译后的浏览器支持。

• Babel Presets

  optsions: targets、targets.browsers、targets.browsers: ‘last 2 version’、target.browsers: ‘> 1%’
  这些浏览器的控制在browserslist或Can i use 网站可以查找。

• 环境准备步骤如下：

1. install nodejs
2. npm init -y
3. npm install webpack -g
4. npm install webpack babel-loader babel-core babel-preset-evn –save-dev
5. add webpack.config.js
6. webpack || package.json定义npm scripts命令

基本语法

变量和常量

• let

允许声明在范围内的变量，使用其上使用的块、语句或表达式。不同于var关键字，定义全局变量或者局部定义，而不考虑块范围。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

• const

const是块范围内定义的变量。通过定义分配一个常量不能改变值，且不能重定义,常量必须初始化.

1
2
3
4
5
6
7
8
9
10
11

const number = 42;
try {
  number = 99;
} catch(err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}
console.log(number);

认识KafKa

什么是KafKa

kafka是一种高吞吐量的分布式发布订阅消息系统，有如下特性：

• 通过O(1)的磁盘数据结构提供消息的持久化，这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能。
• 高吞吐量：即使是非常普通的硬件kafka也可以支持每秒数十万的消息。
• 支持通过kafka服务器和消费机集群来分区消息。
• 支持Hadoop并行数据加载。

程序员使用markdown进行编写api或其他文档，是常用的事。
在windows上markdown客户端工具“markdown pad2“应该是首选了，功能比较完善，但在导出文档为HTML时，工具确不支持目录导出。
还好此工具为我们提供了自定义Html样式操作(也就是在生成的HTML文档的Head中添加自定义代码)，可以利用这一点进行导出自己想要的目录。

从未通过录制视频撰写博客，抱着试试看的态度录制了下面的视频（第一次录制，说得不好，请观看海涵）：

观看地址

文件上传已是老生常谈了。
文件上传，原始的方法有：

• form表单提交。
• 通过iframe+form表单进行模拟异步上传。

由于Http协议的限制，在处理大文件上传会存在超时的现象。在旧的浏览器中是无法读取文件二进制数据。无法将文件以分片的方式进行上传。

最近由于产品需求，在不安装插件的情况下上传大文件（百度webuploader开源项目做得已经很不错了，但在秒传和低版本浏览器上使用flash不太符合要求）。
于是重新撸了一把html大文件上传（整个项目是spring boot搭建)。