使用 redux-store-provider 简化 react 开发流程

, ,

介绍

仓库地址: https://github.com/sanonz/redux-store-provider
演示地址: https://sanonz.github.io/redux-store-provider/examples/

安装依赖

1
npm install react react-dom react-redux lodash redux-store-provider blueimp-md5 --save

创建 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Redux Store Provider Example</title>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css">
  <style>
    .content{margin-top:20px;}
  </style>
</head>
<body>
  <div id="root"></div>
</body>
</html>

阅读更多

浏览器 HTTP 并发请求规则探讨

并发请求介绍

由于端口数量和线程切换开销的考虑，浏览器不能无限量的并发请求，再者将所有请求一起发给服务器，也很可能会引发服务器的并发阈值控制而被 BAN，而另外一个控制的原因是 keep alive 技术的存在使得浏览器复用现有连接和服务器通信比创建新连接的性能要更好一些，出于客户端和服务端因素的综合考虑，因此衍生出来了并发限制。

以下为各大浏览器并发请求限制的数量（只在同一与域名下有效）

浏览器HTTP 1.1HTTP 1.0
IE 6, 724
IE 8, 966
Firefox 1366
Chrome 206?
Safari 5.1.76?
Opera 11.648?

阅读更多

JavaScript Event Loop、Micro Task、Macro Task

Event Loop

Event Loop：事件循环、Micro Task：微任务、Macro Task：宏任务

我们知道 JavaScript 是单线程语言，一心不能二用，也就是说它只能把一件事干完才能去干另一件事，但前端的一些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让它们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以为了保证使用流畅，浏览器采用了 Event Loop 事件循环系统来管理，把那些耗时的任务放入 task queues 栈中，等主程序执行完再执行 task queues 中的任务，通常使用回调函数监听 task queues 中的任务状态。

在其它语言中可以迟延执行，比如 C 语言的 sleep(3) 可以迟延 3 秒执行后边的逻辑，但是在 JavaScript 中是没有这样的操作（除了 alert、confrim、prompt 和异步 xhr，官方说这些是历史遗留的错误设计😂），只能使用异步方式去模拟，模拟的实际也不是真正意义上的 sleep 效果。

阅读更多

WebAssembly 从入门到吃鸡

,

WebAssembly 介绍

我们知道 JavaScript 是一门脚本语言，具有动态类型和灵活的表达力，我们知道脚本语言通常要解释运行，这也将要消耗一些性能开销，于是 Google 在 2009 年在 V8 中引入了 JIT(Just in time compiling) 技术，把 JavaScript 运行时的性能推到了顶峰，同年利用 V8 引擎诞生了 Node.js，打开了使用 JavaScript 写后端应用的大门。对于目前写网络应用而言 JavaScript 已经足够用了，加上 Google V8 引擎能帮我们解决掉大部分问题。但是当我们把 JavaScript 应用到诸如 3D 游戏、虚拟现实、增强现实、计算机视觉、图像/视频编辑以及大量的要求原生性能的其他领域的时候，就遇到了性能问题，尤其是移动平台进一步放大了这些性能瓶颈。

而 WebAssembly 的出现就是为了解决这个问题，它是一门低级的类汇编语言，可以运行在现代网络浏览器中的新型代码并且提供新的性能特性和效果。它设计的目的不是为了手写代码，而是为了诸如 C、C++ 和 Rust 等低级源语言提供一个高效的编译目标以便它们能够在网络上运行。对于网络平台而言，这具有巨大的意义——这为客户端 app 提供了一种在网络平台以接近本地速度的方式运行多种语言编写代码的方式；在这之前，客户端 app 是不可能做到的。

阅读更多

Let's Encrypt 使用教程，免费的 SSL 证书，让你的网站拥抱 HTTPS

,

Let’s Encrypt 简介

Let’s Encrypt 是国外一个公共的免费SSL项目，由 Linux 基金会托管，它的来头不小，由 Mozilla、思科、Akamai、IdenTrust 和 EFF 等组织发起，目的就是向网站自动签发和管理免费证书，以便加速互联网由 HTTP 过渡到 HTTPS，目前 Facebook 等大公司开始加入赞助行列。

Let’s Encrypt 已经得了 IdenTrust 的交叉签名，这意味着其证书现在已经可以被 Mozilla、Google、Microsoft 和 Apple 等主流的浏览器所信任，你只需要在 Web 服务器证书链中配置交叉签名，浏览器客户端会自动处理好其它的一切，Let’s Encrypt 安装简单，使用非常方便。

Certbot 简介

Certbot 为 Let’s Encrypt 项目发布了一个官方的客户端 Certbot ，利用它可以完全自动化的获取、部署和更新安全证书，并且 Certbot 是支持所有 Unix 内核的操作系统。

安装 Certbot 客户端

1
2
$ yum install certbot # centos
$ # apt install certbot # ubuntu

阅读更多

WebGL 三维教程 - 绘制矩形和点（二）

, , ,

Canvas 简介

在 HTML5 出现之前，如果想要在网页上显示图像，只能使用 HTML 提供的 <img> 标签。用这个标签虽然简单，但是只能显示静态的图片，不能进行实时绘制和渲染，所以后来出现了一些第三方的解决方案，比如 Flash Player 等。

Canvas 中文译为“画布”，作为画布我们可以使用 HTMLCanvasElement.getContext(contextType) 获取 Canvas 的上下文，然后使用上下文提供的 API 在画布区域绘制图案，接下来分别介绍怎么使用二维和三维的方法绘制矩形和点。

contextType 的取值如下：

  1. "2d" 建立一个 CanvasRenderingContext2D 对象，代表一个二维渲染上下文。
  2. "webgl" 或 "experimental-webgl" 这将创建一个 WebGLRenderingContext 代表三维渲染上下文对象 (OpenGL ES 2.0)。

阅读更多

WebGL 三维教程 - WebGL 介绍（一）

, , ,

WebGL 概述

WebGL 是一项在网页上绘制和渲染复杂三维图形（3D 图形），并允许用户与之进行交互的技术，在传统上只有高配置的计算机或专用的游戏机才能渲染三维图形，而现在随着个人计算机与浏览器的性能越来越强，使用便捷通用的 Web 技术创建和渲染三维图形已经成为可能。HTML5 作为目前最新的 HTML 标准，扩展了传统 HTML 的特征，如二维图形、网络传输、本地数据储存等，HTML5 时代的到来使浏览器正在迅速地从简单的展示工具转变为复杂的应用平台，人们希望网页不仅仅由二维图组成，所以 WebGL就顺着时代的召唤到来了。

WebGL 的起源

在个人计算机上使用最广泛的两种三维图形渲染技术使 Direct3D 和 OpenGL。Direct3D 是微软DirectX 技术的一部分，是一套由微软控制的编程接口（API），主要用在 Windows 平台；而 OpenGL 由于其开放和免费的特征，在多种平台上都有广泛地使用，后来 Windows 对 OpenGL 也提供了良好的支撑，开发者也可以使用它来代替 Direct3D。

OpenGL 最初是由 SGI（Silicon Graphics Inc）开发，并在 1992 年发布为开源标准。多年以来，OpenGL 发展了数个版本，并对三维图形开发、软件产品开发、甚至电影制作产生了深远的影响。虽然 WebGL 根植于 OpenGL，但它实际上是从 OpenGL 的一个特殊版本 OpenGL ES 派生出来的，OpenGL ES 主要专用于嵌入式计算机、智能手机、家用用洗等设备。OpenGL ES 于 2003～2004 年被首次提出，并在 2007 年（ES 2.0）进行了两次升级，WebGL 是基于 OpenGL ES 2.0 的。这几年采用 OpenGL ES 技术的电子设备的数量大幅度增长，尤其是移动端设备。OpenGL ES 成功被这些设备采用的部分原因是，它在添加新特性的同时从 OpenGL 中移除了许多陈旧的旧特性，这使它在保持轻量级的同时，仍具有足够的能力来渲染出精美的三维图形。

阅读更多

Hexo 搭建静态博客与 hexo-theme-concise 主题使用教程

, ,

什么是 Hexo？

Hexo 是一款基于Node.js的一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页，你可以把生成的静态网页上传到 Web 服务器上，这里我们选用的是 GitHub 做 Web 服务器，你没看错，全球最大的同性恋交友网站（🙈逃……），然后就可以访问到博客站点，因为每个页面都是静态的，所以访问速度是非常快的，用户体验非常好。

什么是 Markdown

Markdown 是一种用来写作的轻量级「标记语言」，后缀格式通常为：.md 或 .markdown，用简洁的语法来描述排版格式，可以让我们更专心的写作，因为 Markdown 是纯文本格式，所以可以实现跨平台，不管你切换到什么设备都可以查阅及写作，并且可以轻松的转换为HTML、PDF、电子书等。目前市场上还有大量在线编辑器，支持实时预览，让你充分享受 Markdown 带来的愉悦感。

阅读更多