三次握手四次挥手

Posted on 2018-12-14

三次握手四次挥手

三次握手

客户端发送连接请求报文
服务器端接受连接后回复ACK报文，并为这次连接分配资源。
客户端接收到ACK报文后也向Server段发送报文，并分配资源

四次挥手
客户端跟服务器传断开的请求包
服务器端确定收到断开的请求
服务器端服务器要告诉客户端，没有数据需要传递了
客户端说可以断开了

注意中断连接端可以是Client端，也可以是Server端，如果传输失败怎么办，客户端有重试的机制，服务器等待超时

webpack2-3基本配置

Posted on 2018-12-09

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        'index': './assets/js/index.es6'
    },
    output: {
        // path:指定编译的路径
        path: path.join(__dirname, './assets/'),
        // publicPath:给每个编译好的文件，在html中前面加上同样的路径
        publicPath: './',
        filename: 'js/[name].bundle.js'
    },
    module: {
        rules: [{
            test: /\.es6$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env', {
                            //关闭babel编译es6,打开treeShaking
                            modules: false
                        }],
                    ]
                }
            }]
        }, {
            test: /\.less$/i,
            use: ExtractTextPlugin.extract({
                // fallback 所有的loader都失败了，才调用这个
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }]
            })
        }]
    },
    // 放到cdn，就不需要打包进项目了
    external:{
        jquery:'window.$'
    },
    plugins: [
        new ExtractTextPlugin("css/[name].css"),
        //提取出公用代码
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2,
            filename: 'js/[name].js'
        }),
        // 自动把静态文件插入html
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: true
        }),
        // treeShaking 开启压缩，自动去除没用到不需要的代码
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            },
            output: {
                comments: false
            },
            sourceMap: false
        }),
        // 把没用的function干掉了，代码看起来更好看
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
}

http学习记录

Posted on 2018-12-09

tcp：可靠的协议

udp：只管发，不管收没收到

https加密协议为TLS、SSL

http请求头

Accept:客户端接受哪些信息的数据，浏览器可以处理什么类型的数据

Accept-Encoding:告诉服务器，可以对数据进行压缩

Cache-Control:缓存相关的

Connection:保持tcp连接的活跃，keep-alive

Host:主机名

Pragma:缓存相关

Upgrade-insecure-Requests:缓存相关

User-Agent:客户端相关的信息

referer:请求资源是从哪里来的（如果不带，爬虫可能爬不了）

response Headers

get post本质区别

在Request-URI所标识的资源后附加新的数据

nginx配置反向代理

/usr/local/etc/nginx

浏览器缓存机制介绍

Posted on 2018-12-09

var foo = {
value: 1
};

function bar() {
console.log(this.value);
}

bar.call2(foo); // 1浏览器缓存究竟有什么作用呢？在这里我将浏览器缓存的作用简单地归结为以下几点。

加快页面打开速度
降低服务器压力
减少网络损耗

浏览器缓存有 HTML Meta 标签控制（一般不用，所以本文不介绍）与 HTTP 头信息控制两种。

缓存标识字段便是 Expires 和 Cache-Control。

Expires 是服务器端在响应请求时用来规定资源的失效时间。

Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。

Expires 是 HTTP 1.0 的字段，而 Cache-Control 是 HTTP 1.1 的字段，当 Expires 与 Cache-Control 同时存在时，Cache-Control 的优先级要高于 Expires。

在浏览器缓存中，还保存了其它关于资源副本的描述字段，这些字段都是服务器返回信息头带过来的，如 Last-Modified 和 ETag。

Last-Modified 是服务器端在响应请求时用来说明资源的最后修改时间。与之对应的是 If-Modified-Since 字段。在服务器再验证过程中，浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段，值为该资源 Last-Modified 属性的值。

当服务器端接收到带有 If-Modified-Since 属性的请求时，则会将 If-Modified-Since 属性的值与被请求资源的最后修改时间做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果最后修改时间比较新，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。

ETag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识。与之对应的是 If-None-Match 字段。在服务器再验证过程中，浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段，值为该资源 Etag 属性的值。

当服务器端接收到带有 If-None-Match 属性的请求时，则会将 If-None-Match 属性的值与被请求资源的唯一标识做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果不同，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。

那么当 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同时存在是什么情况呢？

事实上，当两者同时存在时，Etag / If-None-Match 的优先级要高于 Last-Modified / If-Modified-Since

最后，虽然说浏览器缓存对用户体验有极大的好处，但是作为开发者，我们在开发的时候则需要禁止这「讨厌」浏览器缓存，我的方法是打开浏览器的开发者工具，在 Network 中有个 Disable cache ，钩上就可以了，钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程，直接向服务器请求最新的资源。

记录配置服务器免密登录

Posted on 2018-12-09

首先，为什么我们要做服务器的免密登录？
1.自己登录服务器方便。

####2.最重要是的后期配置自动化部署。
下面我们来了解下怎么配置服务器免密登录吧~

1、生成秘钥对

ssh-keygen-t rsa -C “你自己的名字” -f “你自己的名字_rsa”

2、上传配置公钥

上传公钥到服务器对应账号的home路径下的sh/中(ssh-copy-id -i “公钥文件名”用户名@服务器或域名)
配置公钥文件访问权限为600

3、配置本地私钥

把第一步生成的私钥复制到你的home目录下的.ssh/路径下
配置你的私钥文件访问权限为600
chmod 600 你的私钥文件名

4、免密登陆功能的本地配置文件

编辑自己home目录的.ssh/路径下的 config文件
配置 config文件的访问权限为644
下面是我的config配置，登录的时候只需要输入ssh www即可完成登录

Host www
    HostName 10.211.55.6
    Port 22
    User root
    IdentityFile  ~/.ssh/id_rsa
    IdentitiesOnly yes

十分钟完成vscode配合Eslint使用

Posted on 2018-12-08

十分钟完成vscode配合Eslint使用

介绍ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性
配置好之后，在vscode编辑器中按保存自动格式化，用起来超级爽
检查你代码不规范的地方
接下来我们来使用

安装

打开命令行，全局安装，适合你全部项目都需要eslint

$ npm install -g eslint
接下去安装配置文件
$ eslint --init

安装VS Code

打开VS Code官网，点击它的下载链接即可。安装完成之后会看到如下的界面。

安装完毕后，打开vscode

搜索插件Eslint，点击安装，安装完毕后，点击重新加载

配置vscode

打开User Setting

一定要加入这句代码：

“eslint.autoFixOnSave”: true,
然后就可以轻松愉快的写代码啦~

如果有什么需要更改的条件，要去.eslintrc.js这个文件里面配置

具体规则等遇到了再去官网查eslint.org/

陈晨

前端,js,jquery,javascript,html5

GitHub 简书 SF 掘金