浏览器渲染原理
一:
计算机的核心 - CPU 和 GPU
绿色的是计算单元,橙红色的是存储单元,橙黄色的是控制单元。
CPU 是通用计算,而 GPU 是专用计算
显卡
由 GPU、显存、电路板,还有 BIOS 固件组成 1: 独立显卡主要由 GPU、显存和接口电路构成 2: 集成显卡没有独立显存而是使用主板上的内存
DRAM 存储器(cpu/gpu 与存储器是两个不同的芯片)1:主存储器 ———— 内存 2:辅助存储器
速度来讲,就是:Register > Cache > 内存 > 硬盘。越上层,速度就越快、价格越高、容量越低。
CPU
中央处理器(Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心和控制核心。它的功能主要是解释计算机指令以及处理计算机软件中的数据
串行地一件接着一件处理交给它的任务在 CPU 上快速在多个任务间切换,对于使用者来说,就像并发(Concurrent)地执行了多个任务一样
GPUNVIDIA 公司在 1999 年发布 Geforce256 图形处理芯片时首先提出 GPU 的概念。从此 NVIDIA 显卡的芯就用 GPU 来称呼。 ...
WebRender 如何摆脱 jank
丢弃的帧是指系统没有在帧预算内完成其工作。在浏览器完成填充之前,显示器会尝试从帧缓冲区中获取新帧。在这种情况下,显示屏将再次显示旧版本的帧。
一个掉下来的相框就像你从翻页书上撕下一页。这会使动画看起来结巴或跳跃,因为你错过了上一页和下一页之间的过渡。
因此,我们要确保在显示器再次检查之前,将所有这些像素放入帧缓冲区。让我们看看浏览器历史上是如何做到这一点的,以及这一点是如何随着时间的推移而改变的。然后我们就可以看看怎样才能更快。
GPU 硬件加速
GPU Accelerated Compositing in Chrome
注: 某些类名可能已更改(例如,RenderObject 到 LayoutObject,RenderLayer 到 PaintLayer)。
摘要本文提供了在 Chrome 中实现硬件加速合成的背景和细节。
简介:为什么要进行硬件合成?
传统上,web 浏览器完全依赖 CPU 来呈现网页内容。现在,即使是最小的设备,也有能力的 gpu 成为不可或缺的一部分,人们的注意力已经转向寻找更有效地使用这种底层硬件的方法,以实现更好的性能和节能。使用 GPU 合成网页的内容可以大大提高速度。
硬件合成的好处有三种:
在涉及大量像素的绘图和合成操作中,在 GPU 上合成页面层可以获得比 CPU 更好的效率(无论是在速度还是功耗方面)。硬件是专门为这些类型的工作负载设计的。
GPU 上已有的内容(如加速视频、Canvas2D 或 WebGL)不需要昂贵的回读。
CPU 与 GPU 之间的并行性,可以同时运行,创建高效的图形流水线。
最后,在我们开始之前,有一个很大的免责声明:Chrome 图形堆栈在过去几年中已经有了实质性的发展。本文档将重 ...
浏览器周期
背景应用程序生命周期是现代操作系统管理资源的关键方式。在 Android、iOS 和最新的 Windows 版本上,操作系统可以随时启动和停止应用程序。这使得这些平台能够将资源优化并重新分配到最有利于用户的地方。
在 web 端,历史上没有这样的生命周期,应用程序可以一直保持激活。随着大量网页的运行,内存、CPU、电池和网络等关键系统资源可能会被过度订阅,从而导致终端用户体验差。
虽然 web 平台早就有了与生命周期状态相关的事件,比如 load, unload, and visibilitychange,但这些事件只允许开发人员响应用户行为的生命周期状态更改。为了让 web 在低功耗设备上可靠地工作(并且在所有平台上都能展示更多资源),浏览器需要一种主动回收和重新分配系统资源的方法。
事实上,如今的浏览器已经采取了积极的措施来节省后台选项卡中页面的资源,许多浏览器(尤其是 Chrome 浏览器)都想做更多的工作,以减少它们的总体资源占用。
问题是,目前开发者还没法干预这些系统启动,即使知道它们正在启动,这就意味着,浏览器需要采用保守的策略或者冒着页面出错的风险。
页面生命周期 API 试图通过以下方式解决此问题 ...
CSS Masking Module Level 1
CSS Masking Module Level 1—-W3C 候选人推荐,2014 年 8 月 26 日
此版本:
http://www.w3.org/TR/2014/CR-css-masking-1-20140826/
最新版本:
http://www.w3.org/TR/css-masking-1
编辑草案:
http://dev.w3.org/fxtf/css-masking-1/
先前版本:
http://www.w3.org/TR/2014/WD-css-masking-1 -20140522
反馈:
public-fx@w3.org with subject line “[css-masking] … message topic …”(archives)
测试套件:
http://test.csswg.org/suites/css-masking/nightly-unstable/
编辑:
Dirk Schulze(Adobe S ...
Media Source Extensions
Media Source Extensions™—-W3C 编辑的草案 2016 年 11 月 8 日
http://w3c.github.io/media-source/
最新发布的版本:
https://www.w3.org/TR/media-source/
最新编辑的草稿:
http://w3c.github.io/media-source/
实施报告:
http://tidoust.github.io/media-source-testcoverage/
编辑:
Matthew Wolenetz,Google Inc.; Jerry Smith,微软公司;Mark Watson,Netflix Inc.; Aaron Colwell(2015 年 4 月),Google Inc.; Adrian Bateman(2015 年 4 月),Microsoft Corporation
Repository:
We are on GitHub
File a bug
Commit history
Mailing list:
public-html-media@w3.org
Implementation:
...
H.264 视频的 RTP 有效负载格式
H.264 视频的 RTP 有效负载格式 Version 10.1
备忘
该文件为因特网社区规定了因特网标准跟踪协议,并提出了改进建议和讨论。Please refer to the current edition of the “Internet official Protocol standards”(STD 1)for the standardization state and status of this Protocol. 这个 MEMO 的分布是无限的。
Copyright Notice
Copyright (C) The Internet Society (2005).
摘要
本备忘录描述了 ITU-T 建议 H.264 视频编解码器的 RTP 有效载荷格式和技术上相同的 ISO/IEC 国际标准 14496-10 视频编解码器。RTP 有效负载格式允许对每个 RTP 有效负载中由 H.264 视频编码器生成的一个或多个网络抽象层单元(NALU)进行打包。有效载荷格式具有广泛的适用性,因为它支持从简单的低比特率会话使用,到 Internet 视频流与交错传输,到高比特率视频点播的应用。
1. 介绍
1.1. H.264 编解 ...
f4v 文件格式
Adobe Flash Video File Format Specification Version 10.1
Introduction
Flash® 是 Web 上动态媒体的事实标准,支持多种媒体格式,包括两种用于提供同步音频和视频流的核心容器格式:
F4V, for H.264/AAC–based content, and
FLV, for other supported codecs such as Sorensen Spark and On2 VP6.
本文档提供 Adobe® 产品支持的 F4V 和 FLV 视频文件格式的技术格式信息。Adobe 认真考虑所有对视频文件格式规范的反馈。 通过 flashformat@adobe.com 将规范中任何不清楚或可能错误的信息通过电子邮件发送给 Adobe。 所有此类电子邮件提交均应遵守使用条款中的提交材料指南,网址为 www.ado ...
设计模式
设计模式设计模式(Design pattern)代表了最佳的实践,是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。
单例模式
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在 JavaScript 里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
应用场景:
创建唯一的浮窗 (闭包)
const getSingle = function ( fn ){ const result; return function (){ return result || ( result = fn .apply (this, arguments ) ); } };const createLoginLayer = function (){ const div = document.createElement ( &#x ...
Web 框架本质 - Django
Web 框架本质 web 系统概念
1. Http,无状态,短连接 2. 浏览器(socket 客户端)、网站(socket 服务端)
web 框架本质
import socket def handle_request (client): buf = client.recv (1024) client.send ("HTTP/1.1 200 OK\r\n\r\n") client.send ("Hello, Seven") def main (): sock = socket.socket (socket.AF_INET, socket.SOCK_STREAM) sock.bind (('localhost',8000)) sock.listen (5) while True: connection, address = sock.accept () handle_request (connection) connection.close () if __name__ == '__main__': main ()
自定义 Web 框架
a ...
Gitlab CI/CD 管道配置参考
Gitlab CI/CD 管道配置参考在每个项目中,使用名为.gitlab-ci.yml 的 yaml 文件配置 Gitlab CI/CD 管道。
.gitlab-ci.yml 文件定义了管道的结构和顺序,并确定:
使用 Gitlab Runner 执行什么。
遇到特殊情况时要做什么决定?例如,当一个进程成功或失败时。
本主题介绍 CI/CD 管道配置。有关其他 CI/CD 配置信息,请参阅:
Gitlab CI/CD 变量,用于配置管道运行的环境。
Gitlab Runner 高级配置,用于配置 Gitlab Runner。
我们有配置管道的完整示例:
要快速介绍 Gitlab CI,请遵循我们的快速入门指南。
有关示例的集合,请参见 Gitlab CI/CD 示例。
要查看企业中使用的大型.gitlab-ci.yml 文件,请参见 gitlab ce 的.gitlab-ci.yml 文件。
如果你有一个镜像存储库,其中有 gitlab,你可能需要在项目的 Settings > Repository > Pull from a remote repository > Trigger 镜像更新管道。
1. 介绍
...
django2.2 版本中 pymysql 报错
我们从浏览器发出一个请求 Request,得到一个响应后的内容 HttpResponse ,这个请求传递到 Django 的过程如下:
也就是说,每一个请求都是先通过中间件中的 process_request 函数,这个函数返回 None 或者 HttpResponse 对象,如果返回前者,继续处理其它中间件,如果返回一个 HttpResponse,就处理中止,返回到网页上。
中间件不用继承自任何类(可以继承 object ),下面一个中间件大概的样子:
class CommonMiddleware (object): def process_request (self, request): return None def process_response (self, request, response): return response
还有 process_view, process_exception 和 process_template_response 函数。
一,比如我们要做一个 拦截器,发现有恶意访问网站的人,就拦截他!假如我们通过 ...
python 中的装饰器
函数外可以访问函数内的变量写个简单的装饰器 def get_result (func): def warp (*args, **kwargs): print ('haha warp') result = func (*args, **kwargs) print ('result:', result) return result return warp@get_resultdef add (a, b): print ('func add:', a + b) return a + bif __name__ == '__main__': add (1, 2)
执行结果:
haha warpfunc add: 3result: 3
解释:
add 会作为参数 func 传给 get_result 函数,然后 get_result 返回 warp 函数。
执行 add.__name__会输出 wrap
其实这是 python 解释器在背后吧 warp 赋值给了 add,然 ...
Django 配置 Ajax 跨域调用 / 设置 Cookie
django-cors-headers 一、跨域调用首先下载这个插件
pip install django-cors-headers
然后在你的 Django 项目中的 settings.py 中做如下配置 (install app 和 middleware):
INSTALLED_APPS = ( ... 'corsheaders', ...) MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ...]
要注意的是,CorsMiddleware 最好放的尽可能的往上,比如要 在 CommonMiddleware 和 WhiteNoiseMiddleware 的上边,要不然设置的跨域响应头可能起不了什么作用。
最后配置一下你允许的跨域请求主机
允许所有主机请求 ...
django2.2 版本中 pymysql 报错
ImproperlyConfigured: mysqlclient 1.3.13 or newer is required
1、问题背景:已经安装好了 pymysql,但是在命令行执行 python3 manage.py migrate 进行数据迁移时报如下错误:(当然,你也可能是在执行其它操作时遇到类似错误)
...... File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/importlib/__init__.py", line 127, in import_module return _bootstrap._gcd_import (name [level:], package, level) File "/Library/Frameworks/Python.framework/Versions/3.7/lib& ...
webpack 编写一个 plugin
创建插件比创建 loader 更加高级,因为你将需要理解一些 webpack 底层的内部特性来实现相应的钩子,所以做好阅读一些源码的准备!
编写一个插件
一个插件由以下构成
一个具名 JavaScript 函数。
在它的原型上定义 apply 方法。
指定一个触及到 webpack 本身的 事件钩子。
操作 webpack 内部的实例特定数据。
在实现功能后调用 webpack 提供的 callback。
// 一个 JavaScript classclass MyExampleWebpackPlugin {// 将 `apply` 定义为其原型方法,此方法以 compiler 作为参数 apply (compiler) { // 指定要附加到的事件钩子函数 compiler.hooks.emit.tapAsync ( 'MyExampleWebpackPlugin', (compilation, callback) => { console. ...
webpack 4 Code Splitting 的 splitChunks
webpack 4 废弃了之前的不怎么好用的 CommonsChunk,取而代之的是 SplitChunks
Code Splitting 首先 webpack 总共提供了三种办法来实现 Code Splitting,如下:入口配置:entry 入口使用多个入口文件;抽取公有代码:使用 SplitChunks 抽取公有代码;动态加载 :动态加载一些代码。
SplitChunks 首先我们所说的 SplitChunks 是由 webpack 4 内置的 SplitChunksPlugin 插件提供的能力,可直接在 optimization 选项中配置,其默认配置如下:
module.exports = { //... optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxA ...
Github + Webhooks 自动化部署流程(vue-ssr
一、先说明下最终要实现的效果
1、服务器监听 GitHub,push 代码后,拉取最新代码
2、安装依赖,打包代码
3、把打包的文件(dist/*)移动到发布目录,并命名(next
4、把正在运行的目录(dist)重命名(pre),(next)重命名(dist)
5、重启服务二、GitHub 的 webhooks
三、创建 webhook 服务后端 webhook.js
<span style="font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;">const http = require ("http");</span>const createHandler = require ("github-webhook-handler");const handler = createHandler ({ path: "/", secre ...
git 的 commit 规范及强制校验
commitlint 配合 husky 在 git push 代码之前检测 commit messages
https://github.com/typicode/husky
https://commitlint.js.org/#/
Commit message 和 Change log 编写指南
一:安装 commitlintnpm install -D @commitlint/cli @commitlint/config-conventional
生成配置文件:> commitlint.config.js
module.exports = {extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [2, 'always', [ "feat", "fix", "docs", "style", "refacto ...
terser-webpack-plugin
github
Getting StartedTo begin, you’ll need to install terser-webpack-plugin:
$ npm install terser-webpack-plugin --save-dev
Then add the plugin to your webpack config. For example:
webpack.config.js
const TerserPlugin = require ('terser-webpack-plugin');module.exports = { optimization: { minimizer: [new TerserPlugin ()], },};
参数:
test:Type: String|RegExp|Array<String|RegExp> Default: /\.m?js (\?.*)?$/i
include/exclude:
Type: String|RegExp|Arr ...
webpack 打包结构
window[ "YYJ" ] =( function ( modules ) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__ ( moduleId ) { // Check if module is in cache if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // Create a new module (and put it into the cache) var module = installedModules[moduleId] ...
webpack 编写一个 loader
loader 就是一个 node 模块,它输出了一个函数。
当某种资源需要用这个 loader 转换时,这个函数会被调用。并且,这个函数可以通过提供给它的 this 上下文访问 Loader API。reverse-txt-loader 定义
module.exports = function (src) { //src 是原文件内容(abcde),下面对内容进行处理,这里是反转 var result = src.split ('').reverse ().join (''); // 返回 JavaScript 源码,必须是 String 或者 Buffer return `module.exports = '${result}'`;}
// 使用
{ test: /\\.txt$/, use: [ { './path/reverse-txt-loader' } ]}
lo ...
移动端知识的一些总结
一.css 部分 1.meta 标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移动端加上这个标签才是真正的自适应,不加的话,假如你把一个 980px 宽度 (手机端常规是 980) 的 PC 网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px 是相对于手机像素的,我的是超过 1000px 多一些就出现滚动条了,这个没具体研究)。关于 initial-scale=1 ,这个参照 iphone5 的尺寸 320568,如果你页面按照 6401136 做的话,scale 就设为 0.5
<!-- IOS 中 safari 允许全屏浏览 --><meta content="yes" name="apple-mobile-web-app-capable"> <!-- IOS 中 Safari 顶端状态条样式 -->& ...
Babel 原理及其使用
Babel 的包构成核心包 babel-core:babel 转译器本身,提供了 babel 的转译 API,如 babel.transform 等,用于对代码进行转译。像 webpack 的 babel-loader 就是调用这些 API 来完成转译过程的。babylon:js 的词法解析器 babel-traverse:用于对 AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给 plugin 用 babel-generator:根据 AST 生成代码
功能包 babel-types:用于检验、构建和改变 AST 树的节点 babel-template:辅助函数,用于从字符串形式的代码来构建 AST 树节点 babel-helpers:一系列预制的 babel-template 函数,用于提供给一些 plugins 使用 babel-code-frames:用于生成错误信息,打印出错误点源代码帧以及指出出错位置 babel-plugin-xxx:babel 转译过程中使用到的插件,其中 babel-plugin-transform-xxx 是 transform 步骤使用的 babel-preset-xxx:transform 阶段使用到的一系列的 pl ...
npm 包开发调试
开发 NPM 模块的时候,有时我们会希望,边开发边试用,比如本地调试的时候,
require ('myModule')
会自动加载本机开发中的模块。Node 规定,使用一个模块时,需要将其安装到全局的或项目的 node_modules 目录之中。对于开发中的模块,解决方法就是在全局的 node_modules 目录之中,生成一个符号链接,指向模块的本地目录。
npm link 就能起到这个作用,会自动建立这个符号链接。
请设想这样一个场景,你开发了一个模块 myModule ,目录为 src/myModule ,你自己的项目 myProject 要用到这个模块,项目目录为 src/myProject
第一步
在模块目录( src/myModule )下运行 # src/myModule$ npm link npm link
会在 NPM 的全局模块目录内,生成一个符号链接文件,该文件的名字就是 package.json 文件中指定的模块名
/path/to/global/node_modules/myModule -> src/myModule
...
红小豆语录
一、术语 1、音名:
C D E F GA B
2、唱名:
1 2 3 4 5 6 7 do re mi fasol la si
注:若是 C 调,则是 1(do)对应这 C,若是 D 调,则是 1(do)对应这 D;(一脸无辜,这是什么啊?
3、吉他常用音阶模式图(吉他中相邻品格为半音关系,也就是,E 与 F、B 和 C 之间只差半音,其他都是全音)
注: 这咋那么多啊(外面下雪了,可大了 o (╥﹏╥) o
4、十二平均律:
将 do、re、mi、sol、la、si、do 这个八度音程平均分成 12 份(可以看做对应吉他的 0 到 12 品,12 品的 E 正好比空弦升一个八度
用钢琴的键比较易懂一点(正好一个八度十二个键,相邻键为半音关系(不知道能不能这么解释?
以下为钢琴 88 键从左到右对应的绝对中心频率:(中央 C 对应: 261.626,摘自维基百科
12 键 CC#D D#E F F#G G# AA# B 大字二组 27.5000 29.1352 30.8677 大字一组 32.7032 34.6478 36.7081 38.8909 41.203443.6535 46.2493 48.99 ...
《Java 工程师修炼之道》
什么是最左前缀原则?MySQL 中的索引可以以一定顺序引用多列,这种索引叫作联合索引。如 User 表的 name 和 city 加联合索引就是 (name,city),而最左前缀原则指的是,如果查询的时候查询条件精确匹配索引的左边连续一列或几列,则此列就可以被用到。如下:
select * from user where name=xx and city=xx ; //可以命中索引 select * from user where name=xx ; // 可以命中索引 select * from user where city=xx ; // 无法命中索引
这里需要注意的是,查询的时候如果两个条件都用上了,但是顺序不同,如 city= xx and name =xx,那么现在的查询引擎会自动优化为匹配联合索引的顺序,这样是能够命中索引的。
由于最左前缀原则,在创建联合索引时,索引字段的顺序需要考虑字段值去重之后的个数,较多的放前面。ORDER BY 子句也遵循此规则。
注意避免冗余索引冗余索引指的是索引的功能相同,能够命中就肯定能命中 ,那么 就是冗余索引如(name,city )和 ...
JSON Web Token
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准((RFC 7519). 该 token 被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。
一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。
1、用户向服务器发送用户名和密码。
2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。
3、服务器向用户返回一个 session_id,写入用户的 Cookie。
4、用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器。
5、服务器收到 session_id,找到前期保存的数据,由此得知用户的身份。
这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session。
举例来说,A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现?
一种解决 ...
Nodejs 定时任务(node-schedule)
定时导出某些数据、定时发送消息或邮件给用户、定时备份什么类型的文件等等
安装 npm install node-schedule --save 或者 yarn add node-schedule
用法 1、Cron 风格定时器 const schedule = require ('node-schedule');const scheduleCronstyle = ()=>{ // 每分钟的第 30 秒定时执行一次: schedule.scheduleJob ('30 * * * * *',()=>{ console.log ('scheduleCronstyle:' + new Date ()); }); } scheduleCronstyle ();
schedule.scheduleJob 的回调函数中写入要执行的任务代码,一个定时器就完成了!
规则参数讲解 * 代表通配符 * * * * * *┬ ┬ ┬ ┬ ┬ ┬│ │ │ │ │ |│ ...
node ws 模块
认识 TCP
TCP 协议可以总结几个特点:有状态的长连接:客户端发起连接请求,服务端响应并建立连接,连接会一直保持直到一方主动断开。主动性:建立起与客户端的连接后,服务端可主动向客户端发起调用。信息安全性:同样可以使用 SSL 证书进行信息加密,访问时用 WSS 。跨域:默认支持跨域。
编写聊天室源码 ws-with-koa
服务端 API 安装第三方模块 ws:npm install ws 开启一个 WebSocket 的服务器,端口为 8080
var socketServer = require ('ws').Server;var wss = new socketServer ({ port: 8080});
也可以利用 Express 来开启 WebSocket 的服务器
var app = require ('express')();var server = require ('http').Server (app);var socketServer = require ('ws') ...
基于 Node.js 的 WebSocket 通信
假如 A,B,C,D 用户均通过客户端连接到 Websocket 服务,其中每个人发的消息都需要将其通过 Websocket 转发给其他人,此场景类似于服务端将 A 的消息广播给组内其他用户。
服务端实现首先来看服务端程序,具体的工作流程分以下几步:创建一个 WebSocketServer 的服务,同时监听 8080 端口的连接请求。每当有新的客户端连接该 WebSocket 成功时,便将该连接 push 到连接池的数组中。监听 message 事件,当该事件发生时,遍历连接池,以连接为单位将该消息转发到对应的客户端监听 close 事件,当该事件发生时,将该连接移出连接池
# 服务端代码 var WebSocketServer = require ('ws').Server,wss = new WebSocketServer ({port: 8080});// 连接池 var clients = [];wss.on ('connection', function (ws) { // 将该连接加入连接池 clients.push (ws ...
npm 包发布流程
【npm】利用 npm 安装 / 删除 / 发布 / 更新 / 撤销发布包
npm adduser 用于在 npmjs.com 注册一个用户。
已注册 npm login
npm publish
注意:登录时报错:e409 Conflict
Registry returned 409 for PUT on http://registry.npm.taobao.org/-/user/org.couchdb.user:666: conflict
出现这个错误最大的可能性是我们把 registry 选项替换成了淘宝的镜像
登录前确保 npm 源为官方源:
nrm lsnrm use npm
npm config set registry https://registry.npmjs.org/
解决方案 npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org
细节:
发布一个 beta 版,默认为 latest
npm publish --tag beta
如果想废弃某个版本的 ...
使用 Node 开发命令行程序
一、可执行脚本 1.demo 文件头添加这一行
#!/usr/bin/env nodeconsole.log (hello world)
在 package.json 中添加 "bin": { "hello": "./demo.js",},
在命令行执行:(下篇文章介绍)npm link
然后就可以执行 hello 命令 运行 demo 里面的内容。
二、yargs 模块 npm i -save yargs
const argv = require ('yargs').option ('v', { alias : 'version', demand: true, // 后面的参数是否可以省略 default: '0.0.0', describe: ' 版本号 ', type: string, boolean:true, // 是否强制转换成布尔值} ...
Express 中间件
Express 是一个路由和中间件 Web 框架,其自身只具有最低程度的功能:Express 应用程序基本上是一系列中间件函数调用。
中间件函数能够访问请求对象 (req)、响应对象 (res) 以及应用程序的请求 / 响应循环中的下一个中间件函数。下一个中间件函数通常由名为 next 的变量来表示。
中间件函数可以执行以下任务:< 执行任何代码。< 对请求和响应对象进行更改。< 结束请求 / 响应循环。< 调用堆栈中的下一个中间件函数。如果当前中间件函数没有结束请求 / 响应循环,那么它必须调用 next (),以将控制权传递给下一个中间件函数。否则,请求将保持挂起状态。
Express 应用程序可以使用以下类型的中间件:应用层中间件路由器层中间件错误处理中间件内置中间件第三方中间件
应用层中间件:此示例显示没有安装路径的中间件函数。应用程序每次收到请求时执行该函数。
var app = express ();app.use (function (req, res, next) { console.log ('Time:', Date.now ()) ...
WebSocket
WebSocket 是 HTML5 新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。
WebSocket 协议 WebSocket 并不是全新的协议,而是利用了 HTTP 协议来建立连接。我们来看看 WebSocket 连接是如何创建的。
首先,WebSocket 连接必须由浏览器发起,因为请求协议是一个标准的 HTTP 请求,格式如下:
GET ws://localhost:3000/ws/chat HTTP/1.1Host: localhostUpgrade: websocketConnection: UpgradeOrigin: http://localhost:3000Sec-WebSocket-Key: client-random-stringSec-WebSocket-Version: 13
该请求和普通的 HTTP 请求有几点不同:GET 请求的地址不是类似 /path/,而是以 ws:// 开头的地址;请求头 Upgrade: websocket 和 Connection: Upgrade 表示这个连接将要被转换为 WebSocket 连接; ...
XHR 获取 arraybuffer
ArrayBuffer 对象代表原始的二进制数据,TypedArray 视图用来读写简单类型的二进制数据,DataView 视图用来读写复杂类型的二进制数据。
1. 文件格式 (mask file layout) 1.0 综述 (overview)-----------------------------------| mask file header |-----------------------------------| mask frame indexing table |-----------------------------------| ... ... || ... ... |-----------------------------------| mask frames data segment |----------------------------------- 图 1.0 总体而言,文件的格式为:文件头 + 帧索引表 + 若干帧数据段,这三部分数据紧邻地存放于 mask 文件中,位置关系如图 1.0 所示.1.1 文件头 (mask file head ...
http 连接优化与浏览器允许的并发请求资源数
前端技术的逐渐成熟,还衍生了 domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand 等等技术。这些技术的出现和大量使用都和并发资源数有关
原文地址 1、按照普通设计,当网站 cookie 信息有 1 KB、网站首页共 150 个资源时,用户在请求过程中需要发送 150 KB 的 cookie 信息,在 512 Kbps 的常见上行带宽下,需要长达 3 秒左右才能全部发送完毕。 尽管这个过程可以和页面下载不同资源的时间并发,但毕竟对速度造成了影响。 而且这些信息在 js/css/images/flash 等静态资源上,几乎是没有任何必要的。 解决方案是启用和主站不同的域名来放置静态资源,也就是 cookie free。
2、将 css 放置在页面最上方应该是很自然的习惯,但第一个 css 内引入的图片下载是有可能堵塞后续的其他 js 的下载的。而在目前普遍过百的整页请求数的前提下,浏览器提供的仅仅数个并发,对于进行了良好优化甚至是前面有 CDN 的系统而言,是极大的性能瓶颈。 这也就衍生了 dom ...
从浏览器地址栏输入 url 到显示页面的步骤 (以 HTTP 为例)
主要过程是:
浏览器解析 -> 查询缓存 ->dns 查询
-> 建立链接 -> 服务器处理请求 -> 服务器发送响应 -> 客户端收到页面
-> 解析 HTML-> 构建渲染树 -> 开始显示内容 (白屏时间)-> 首屏内容加载完成 (首屏时间)
-> 用户可交户 (DOMContentLoaded)-> 加载完成 (load)
1、在浏览器地址栏输入 URL
2、浏览器查看 缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
如果资源未缓存,发起新请求
如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
检验新鲜通常有两个 HTTP 头进行控制 Expires 和 Cache-Control:
HTTP1.0 提供 Expires,值为一个绝对时间表示缓存新鲜日期
HTTP1.1 增加了 Cache-Control: max-age=, 值为以秒为单位的最大新鲜时间
3、浏览器解析 URL 获取协议,主机,端口,path
4、浏览器组装一个 HTTP(GET)请求报文
5、浏览器获取主机 ip 地址,过程如下:
浏览器缓存
本机缓存
...
对称加密、非对称加密、RSA (总结)
对称加密算法 (Symmetric-key algorithm) 和非对称加密算法 (asymmetric key encryption algorithm) 只不过就是密码学 (cryptography) 中的两种加密算法
对称加密(英语:Symmetric-key algorithm)又称为对称加密、私钥加密、共享密钥加密,是密码学中的一类加密算法。这类算法在加密和解密时使用相同的密钥,或是使用两个可以简单地相互推算的密钥。实务上,这组密钥成为在两个或多个成员间的共同秘密,以便维持专属的通讯联系。与公开密钥加密相比,要求双方取得相同的密钥是对称密钥加密的主要缺点之一
常见的对称加密算法有 DES、3DES、AES、Blowfish、IDEA、RC5、RC6。
公开密钥加密(英语:public-key cryptography,又译为公开密钥加密),也称为非对称加密(asymmetric cryptography)
一种密码学算法类型,在这种密码学方法中,需要一对密钥,一个是私人密钥,另一个则是公开密钥。这两个密钥是数学相关,用某用户密钥加密后所得的信息,只能用该用户的解密密钥才能解密。如果知 ...
TCP 详解
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。
首先来看看 OSI 的七层模型:
我们需要知道:
一:TCP 工作在网络 OSI 的七层模型中的第四层 ——Transport 层,第四层的数据叫 Segment。
二:IP 在第三层 ——Network 层,在第三层上的数据叫 Packet。
三:ARP 在第二层 ——Data Link 层;在第二层上的数据,我们把它叫 Frame。
同时,我们需要简单的知道,数据从应用层发下来,会在每一层都会加上头部信息,进行封装,然后再发送到数据接收端。这个基本的流程你需要知道,就是每个数据都会经过数据的封装和解封装的过程。
TCP 头部其中 ACK SYN 序号 这三个部分在以下会用到,它们的介绍也在下面。
上面就是 TCP 协议头部的格式,由于它太重要了,是理解其它内容的基础,下面就将每个字段的信息都详细的说明一下。
1、Source Port 和 Destination Port: 分别占用 16 位,表示源端口号和目的端口号;用于区别主机中的不同进程,而 IP 地址是用来区分不同的主机的,源端口号 ...
HTTP 请求方法:GET 和 POST
GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据。
GET 方法请注意,查询字符串(名称 / 值对)是在 GET 请求的 URL 中发送的:
/test/demo_form.php?name1=value1&name2=value2 有关 GET 请求的其他一些注释:GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回数据
POST 方法请注意,查询字符串(名称 / 值对)是在 POST 请求的 HTTP 消息主体中发送的:
POST /test/demo_form.php HTTP/1.1
Host: w3cschool.cn
name1=value1&name2=value2
有关 POST 请求的其他一些注释:
POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求
比较 GET 与 POST 下面的表格比较了两种 HTTP ...
HTTP 与 HTTPS
HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议)是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信,但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。
HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法,被用于在 Web 浏览器和网站服务器之间传递信息。
HTTP 默认工作在 TCP 协议 80 端口,用户访问网站 http:// 打头的都是标准 HTTP 服务。
HTTP 协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了 Web 浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP 协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。
HTTPS 默认工作在 TCP 协议 443 端口,它的工作流程一般如以下方式:
1、TCP 三次同步握手 2、客户端验证 ...
HTTP 的神秘面纱
OSI(Open System Interconnect),即开放式系统互联。 一般都叫 OSI 参考模型,是 ISO(国际标准化组织)组织在 1985 年研究的网络互连模型。
各层的作用
1. 物理层:
主要定义物理设备标准,如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流(就是由 1、0 转化为电流强弱来进行传输,到达目的地后在转化为 1、0,也就是我们常说的数模转换与模数转换)。这一层的数据叫做比特。
2. 数据链路层:
定义了如何让格式化数据以进行传输,以及如何让控制对物理介质的访问。这一层通常还提供错误检测和纠正,以确保数据的可靠传输。
3. 网络层:
在位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择。Internet 的发展使得从世界各站点访问信息的用户数大大增加,而网络层正是管理这种连接的层。
4. 传输层:
定义了一些传输数据的协议和端口号(WWW 端口 80 等),如:
TCP(transmission control protocol –传输控制协议,传输效率低,可靠性强,用于传输可靠性要求高,数据量大的数据)UDP(us ...
HTTP 简介
HTTP 协议是 Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。
W3CHTTP 工作原理 HTTP 协议工作于客户端 - 服务端架构为上。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。Web 服务器有:Apache 服务器,IIS 服务器(Internet Information Services)等。Web 服务器根据接收到的请求后,向客户端发送响应信息。HTTP 默认端口号为 80,但是你也可以改为 8080 或者其他端口。
HTTP 三点注意事项:
HTTP 是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
HTTP 是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过 HTTP 发送。客户端以及服务器指定使用适合的 MIME-type 内容类型。
HTTP 是无状态:HTTP 协议是无状态协议。无状态是指协议对于事务处理没 ...
HTTP 状态消息
以 Chrome 浏览器为例:(访问: www.google.com
1、 Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存(缓存时间比较短,大概只有 1 分钟,且只能容纳 1000 条缓存),看自身的缓存中是否有 www.google.com 对应的条目,而且没有过期,如果有且没有过期则解析到此结束。
注:我们怎么查看 Chrome 自身的缓存?可以使用 chrome://net-internals/#dns 来进行查看
2、如果浏览器自身的缓存里面没有找到对应的条目,那么 Chrome 会搜索操作系统自身的 DNS 缓存,如果找到且没有过期则停止搜索解析到此结束.
注:怎么查看操作系统自身的 DNS 缓存,以 Windows 系统为例,可以在命令行下使用 ipconfig /displaydns 来进行查看
3、如果在 Windows 系统的 DNS 缓存也没有找到,那么尝试读取 hosts 文件(位于 C:\Windows\System32\drivers\etc),看看这里面有没有该域名对应的 IP 地址,如果有则解析成功。
4、如果在 hosts 文件中也没有找到对应的条 ...
Http 206 文件断点续传下载原理
断点续传下载需要重视 2 对头信息 Accept-Ranges/Range 与 If-Range/tag
断点续传检测服务器端是否支持范围请求假如在响应中存在 Accept-Ranges 首部(并且它的值不为 “none”),那么表示该服务器支持范围请求。例如,你可以使用 cURL 发送一个 HEAD 请求来进行检测。
curl -I http://i.imgur.com/z4d4kWk.jpgHTTP/1.1 200 OK...Accept-Ranges: bytesContent-Length: 146515
在上面的响应中, Accept-Ranges: bytes 表示界定范围的单位是 bytes 。这里 Content-Length 也是有效信息,因为它提供了要检索的图片的完整大小。
如果站点未发送 Accept-Ranges 首部,那么它们有可能不支持范围请求。一些站点会明确将其值设置为 “none”,以此来表明不支持。在这种情况下,某些应用的下载管理器会将暂停按钮禁用。
curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpAH ...
HTTP 状态消息
1xx: 信息该状态码属于临时响应类型,代表请求已被接受,需要继续处理。
该类状态码只包含状态行和某些可选的响应头信息,并以空行结束。
消息:描述:100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。103 Checkpoint 用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。
2xx: 成功该类型的状态码,表示请求已成功被服务器接收、理解、并接受。
消息:描述:200 OK 请求成功(这是对 HTTP 请求成功的标准应答。)201 Created 请求被创建完成,同时新的资源被创建。202 Accepted 供处理的请求已被接受,但是处理未完成。203 Non-Authoritative Information 请求已经被成功处理,但是一些应答头可能不正确,因为使用的是其他文档的拷贝。204 No Content 请求已经被成功处理,但是没有返回新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而 Servlet 可以 ...
跨域资源共享 CORS 详解
CORS 是一个 W3C 标准,全称是” 跨域资源共享”(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。
一、简介 CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE 浏览器不能低于 IE10。整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。
二、两种请求浏览器将 CORS 请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件,就属于简单请求。(1) 请求方法是以下三种方法之一:HEADGETPOST(2)HTTP 的头信息不超出以下几种字段:AcceptAccept-LanguageContent-Lang ...
HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
一、HTTP 的基本优化
影响一个 HTTP 网络请求的因素主要有两个:带宽和延迟。
带宽:忽略。
延迟:
浏览器阻塞(HOL blocking):浏览器会因为一些原因阻塞请求。浏览器对于同一个域名,同时只能有 4 个连接(这个根据浏览器内核不同可能会有所差异),超过浏览器最大连接数限制,后续请求就会被阻塞。
DNS 查询(DNS Lookup):浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用 DNS 缓存结果来达到减少这个时间的目的。
建立连接(Initial connection):HTTP 是基于 TCP 协议的,浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文,达到真正的建立连接,但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显,慢启动则对文件类大请求影响较大。
二、HTTP1.0 和 HTTP1.1 的一些区别缓存处理:HTTP1.0 中主要使用 header 里的 If-Modified-Since,Expires 来做为缓存判断的标准,HTTP1.1 则引入了更多的缓存 ...
正向代理与反向代理的区别
正向代理代理的对象是客户端,反向代理代理的对象是服务端
1. 概念正向代理是一个位于客户端和目标服务器之间的代理服务器 (中间服务器)。为了从原始服务器取得内容,客户端向代理服务器发送一个请求,并且指定目标服务器,之后代理向目标服务器转交并且将获得的内容返回给客户端。正向代理的情况下客户端必须要进行一些特别的设置才能使用。
反向代理正好相反。对于客户端来说,反向代理就好像目标服务器。并且客户端不需要进行任何设置。客户端向反向代理发送请求,接着反向代理判断请求走向何处,并将请求转交给客户端,使得这些内容就好似他自己一样,一次客户端并不会感知到反向代理后面的服务,也因此不需要客户端做任何设置,只需要把反向代理服务器当成真正的服务器就好了。
2. 区别 正向代理需要你主动设置代理服务器 ip 或者域名进行访问,由设置的服务器 ip 或者域名去获取访问内容并返回;而反向代理不需要你做任何设置,直接访问服务器真实 ip 或者域名,但是服务器内部会自动根据访问内容进行跳转及内容返回,你不知道它最终访问的是哪些机器。
正向代理是代理客户端,为客户端收发请求,使真实客户端对服务器不可见;而反向代理是代理 ...
Linux vi/vim
Vim 是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。
原文地址
vi/vim 共分为三种模式,分别是命令模式(Command mode),输入模式(Insert mode)和底线命令模式(Last line mode)。 这三种模式的作用分别是:
命令模式:用户刚刚启动 vi/vim,便进入了命令模式。此状态下敲击键盘动作会被 Vim 识别为命令,而非输入字符。比如我们此时按下 i,并不会输入一个字符,i 被当作了一个命令。以下是常用的几个命令:
i 切换到输入模式,以输入字符。
x 删除当前光标所在处的字符。
: 切换到底线命令模式,以在最底一行输入命令。
若想要编辑文本:启动 Vim,进入了命令模式,按下 i,切换到输入模式。命令模式只有一些最基本的命令,因此仍要依靠底线命令模式输入更多命令。
输入模式在命令模式下按下 i 就进入了输入模式。在输入模式中,可以使用以下按键:
字符按键以及 Shift 组合,输入字符
ENTER,回车键,换行
BACK SPACE,退格键,删除光标前一个字符
DEL, ...
linux 下安装软件 --yum 命令
在安装 yum 的时候,yum 会建立它的软件仓库,可以通过 yum repolist 来查看有哪些,yum 库的定义目录为 /etc/yum.repos.d, 一般情况下,这些预装的库能满足我们的需要,如果自己添加 repository 需要相应 URL 和密钥。
1. 准备:centos7 修改 yum 源为阿里源,某下网络下速度比较快 首先是到 yum 源设置文件夹里
cd /etc/yum.repos.d
接着备份旧的配置文件 sudo mv CentOS-Base.repo CentOS-Base.repo.bak 下载阿里源的文件,也可以是其他的源如(修改 CentOS 默认 yum 源为国内 yum 镜像源)
sudo wget -O CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
清理缓存
yum clean all
重新生成缓存
yum makecache
2. 列出已经安装的软件包 yum list installed 列出所有已经安装的软件包 yum list packageName 在线查看软件包 yum list install ...
cookie-parser 和 express-session
cookie-parser 在用 express 生成器构建项目时自动安装的,它的作用就是设置,获取和删除 cookie。express-session 依赖于它。
cookie-parser1. 引入 var cookieParser = require ('cookie-parser'); #引入模块 app.use (cookieParser ()); #挂载中间件,可以理解为实例化
这两行代码默认在 app.js 中写好了,表示现在可以直接使用 cookie 了。
2. 创建 cookieres.cookie (name, value [, options]);
name 是 cookie 名,value 是 cookie 值,可以是 json 对象或字符串。options 是选项,详细请阅这里,常用选项有:
{ 'maxAge': 90000, # 有效时长,即 90000 毫秒后过期,String 'signed': false # 默认为 false,表示是否签名,Boolean& ...
cookie 和 session
HTTP 是一个无状态协议,所以客户端每次发出请求时,下一次请求无法得知上一次请求所包含的状态数据
cookie 首先产生了 cookie 这门技术来解决这个问题,cookie 是 http 协议的一部分,它的处理分为如下几步:1、服务器向客户端发送 cookie。通常使用 HTTP 协议规定的 set-cookie 头操作。规范规定 cookie 的格式为 name = value 格式,且必须包含这部分。2、浏览器将 cookie 保存。3、每次请求浏览器都会将 cookie 发向服务器。其他可选的 cookie 参数会影响将 cookie 发送给服务器端的过程,主要有以下几种:path:表示 cookie 影响到的路径,匹配该路径才发送这个 cookie。expires 和 maxAge:告诉浏览器这个 cookie 什么时候过期,expires 是 UTC 格式时间,maxAge 是 cookie 多久后过期的相对时间 (单位:s)。当不设置这两个选项时,会产生 session cookie,session cookie 是 transient 的,当用户关闭浏览器时,就被清除 ...
前端开发者必备的 Nginx 知识
nginx 是一个高性能的 HTTP 和反向代理服务器,也是一个通用的 TCP/UDP 代理服务器,最初由俄罗斯人 Igor Sysoev 编写
nginx 在应用程序中的作用解决跨域请求过滤配置 gzip 负载均衡静态资源服务器…
nginx 现在几乎是众多大型网站的必用技术,大多数情况下,我们不需要亲自去配置它,但是了解它在应用程序中所担任的角色,以及如何解决这些问题是非常必要的。
下面我将从 nginx 在企业中的真实应用来解释 nginx 在应用程序中起到的作用。
为了便于理解,首先先来了解一下一些基础知识,nginx 是一个高性能的反向代理服务器那么什么是反向代理呢?正反向代理看这
基本配置配置结构下面是一个 nginx 配置文件的基本结构:
events {} http { server { location path { ...} location path { ... } ...
Nginx 反向代理与负载均衡
nginx 负载均衡的 5 种策略 Nginx 入门 Nginx 配置反向代理服务器
用户访问网站的时候首先会访问 nginx 服务器,然后 nginx 服务器再从服务器集群中选择压力较小的服务器,将该访问请求引向该服务器
nginx 配置下面修改配置方面我就从 mac 系统下来进行简单的演示,如何安装的话也暂以 mac 为主了,windows 系统直接去 Nginx 官网下载安装即可
安装 nginx 1 - 进到 homebrew 官网,然后复制命令,预安装需要的东西 2-brew install nginx 安装 nginx 3-nginx -v 显示版本号进入 nginx cd /usr/local/etc/nginx
nginx 常用命令
一、启动 nginx
nginx
访问 localhost:8080 (默认) 即可
二、关闭 nginx
如果出现下图情况,不要惊慌,是因为之前 nginx 被启动过了
只需 nginx -s stop,停止 nginx 服务
然后再次启动 nginx 即可
三、重启 nginx
nginx -s reload
每次修改完.conf 文件就需要重启 nginx
四、检查配置
检 ...
详解 root 和 alias 指令
配置 nginx 的静态文件有两个指令,一个 root 和一个 alias
静态文件 Nginx 以其高性能著称,常用与做前端反向代理服务器。同时 nginx 也是一个高性能的静态文件服务器。通常都会把应用的静态文件使用 nginx 处理。
对于这两个指令,是否需要在路径的后面加上斜杠,经常容易让人犯晕,本文通过尝试不同的匹配规则,归纳了一个比较通用的配置方式。
基本配置与简明 Nginx Location Url 配置笔记一文关于 location url 配置的实验一样,本文也使用 vagrant 虚拟机里的 nginx。其基本配置如下:
# /etc/nginx/sites-enabled/pro.confserver { listen 80 default_server; server_name localhost; access_log /var/log/nginx/pro/access.log; error_log /var/log/nginx/pro/error.log; error_page 404 /404.html; root /vagrant/pro; ...
Nginx 代理 ssl 转发 https 和 wss 请求
使用场景什么情况下需要这种操作?
比如,后台多台服务器做反向代理;
比如,微信小程序,建立微信小程序的 websocket 连接,必须要使用 wss,但是目前不支持自定义端口,在调用的时候会使用默认端口,这个时候就需要做个代理。
实现 Nginx 配置
server { listen 443; #https 和 wss 协议默认端口 # ssl 的相关配置 ssl on; ssl_certificate /usr/local/a.pem; //ssl pem 文件 ssl_certificate_key /usr/local/a.key; //ssl key 文件 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; ssl_prefer_server_ciphers on; ssl_buffer_size 1400; ...
基本的 WebSocket 的 Nginx 配置
nginx and WebSockets
先用 ws 模块写一个简单的 WebSocket 服务器:
Server = require ('ws').Serverwss = new Server port: 3000wss.on ('connection', (ws) =>{ console.log 'a connection' ws.send'started'}) console.log'server started'
然后修改 Hosts, 添加,比如 ws.repo, 指向 127.0.0.1 然后是 Nginx 配置:
server { listen 80; server_name ws.repo; location / { proxy_pass http://127.0.0.1:3000/; proxy_redirect off; proxy_http_ver ...
CentOS7 下 yum 安装 Java
一:查看 yum 包含的 jdk 版本 yum search java 或者 yum list java*
版本 jrejdk1.8java-1.8.0-openjdk.x86_64java-1.8.0-openjdk-devel.x86_641.7java-1.7.0-openjdk.x86_64java-1.7.0-openjdk-devel.x86_641.6java-1.6.0-openjdk.x86_64java-1.6.0-openjdk-devel.x86_64
二、安装 jdk 此次选择 java-1.8.0-openjdk-devel.x86_64 : OpenJDK Development Environment
yum install java-1.8.0-openjdk-devel.x86_64
注:也可以安装 1.8.0 的所有文件 yum install java-1.8.0-openjdk* -y
三: 使用命令检查是否安装成功 java -version