Hubery's 博客

Linux命令之lsof

发表于 2018-01-06 | 分类于 Linux

lsof命令

1
2
3

➜ lsof -i:80
COMMAND  PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Voyager 3408 hubery    8u  IPv4 0x60da010e430d8fc1      0t0  TCP hubery:49644->129.182.112.83:http (ESTABLISHED)

lsof命令用于查看你进程开打的文件，打开文件的进程，进程打开的端口(TCP、UDP)。找回/恢复删除的文件。是十分方便的系统监视工具，因为lsof命令需要访问核心内存和各种文件，所以需要root用户执行。

在linux环境下，任何事物都以文件的形式存在，通过文件不仅仅可以访问常规数据，还可以访问网络连接和硬件。所以如传输控制协议 (TCP) 和用户数据报协议 (UDP) 套接字等，系统在后台都为该应用程序分配了一个文件描述符，无论这个文件的本质如何，该文件描述符为应用程序与基础操作系统之间的交互提供了通用接口。因为应用程序打开文件的描述符列表提供了大量关于这个应用程序本身的信息，因此通过lsof工具能够查看这个列表对系统监测以及排错将是很有帮助的。

语法
lsof(选项)

选项
-a：列出打开文件存在的进程；
-c<进程名>：列出指定进程所打开的文件；
-g：列出GID号进程详情；
-d<文件号>：列出占用该文件号的进程；
+d<目录>：列出目录下被打开的文件；
+D<目录>：递归列出目录下被打开的文件；
-n<目录>：列出使用NFS的文件；
-i<条件>：列出符合条件的进程。（4、6、协议、:端口、 @ip ）
-p<进程号>：列出指定进程号所打开的文件；
-u：列出UID号进程详情；
-h：显示帮助信息；
-v：显示版本信息。

lsof输出各列信息的意义如下：

COMMAND：进程的名称
PID：进程标识符
PPID：父进程标识符（需要指定-R参数）
USER：进程所有者
PGID：进程所属组
FD：文件描述符，应用程序通过文件描述符识别该文件。

前端安全方面的小记

发表于 2017-12-26 | 分类于前端安全

前端安全

CSRF
XSS
HTTPS
本地存储数据泄露
静态资源完整性校验

——– 未完待续 ——–

浏览器渲染机制

发表于 2017-12-25 | 分类于基础知识

浏览器渲染机制

一、什么是DOCTYPE及作用，常见的DOCTYPE有哪些

用来申明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果不合法，浏览器解析会有点差错。
<!doctype html>, html4.0.1的严格模式和传统模式

二、浏览器渲染过程（在浏览器中输入url发生了什么）

解析HTML生成dom树，计算css结果，构建渲染树，然后就可以绘制浏览器了。

三、什么叫浏览器的重排（reflow）

增加删除修改dom节点，会导致reflow 或 repaint
移动dom位置
改变窗口大小/滚动
修改网页默认字体

四、什么叫重绘 repaint

页面要呈现的内容通通画到浏览器中就叫重绘
如何最下避免repaint，一次性操作，避免多次操作
DOM改动、CSS改动

Js运行机制

发表于 2017-12-25 | 分类于基础知识

Js运行机制

写了这么多年的js了，js运行机制是什么？
可能在我们脑海里会出现，单线程运行机制、任务队列、事件循环、定时器、Promise与process.nextTick(callback)

JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个

为什么JS是单线程的呢？

JS最初被设计用在浏览器中，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM
如果浏览器中的JS是多线程的，会带来很复杂的同步问题
比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以为了避免复杂性，JavaScript从诞生起就是单线程
为了提高CPU的利用率，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以这个标准并没有改变JavaScript单线程的本质

同步和异步
同步和异步关注的是消息通知机制

同步：发出调用后，没有得到结果之前，该调用不返回，一旦调用返回，就得到返回值了。简而言之就是调用者主动等待这个调用的结果
异步：调用者在发出调用后这个调用就直接返回了，所以没有返回结果。换句话说当一个异步过程调用发出后，调用者不会立刻得到结果，而是调用发出后，被调用者通过状态、通知或回调函数处理这个调用。
阻塞和非阻塞
阻塞和非阻塞关注的是程序在等待调用结果（消息，返回值）时的状态

阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回
非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程
单线程意味着同一时间只能进行一件事情,前面的事情结束才能执行后面的事件.当碰到需要时间的IO事件的时候问题就来了,必须等到这些结束后才往下进行,但这时CPU是闲着的.这样浪费了很多计算机的性能.

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去.

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件
（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断重复上面的第三步

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

console.log(1);
setTimeout(function(){
 console.log(2);
}, 0);
console.log(3);

运行结果： 1 3 2

for(let i=0, i < 2, i++){
 console.log(i);
 setTimeout(function(){
  console.log(i);
 },1000);
}

运行结果：0 1 2 2

Js是单线程的，即同一时间只能做一件事件
以上setTimeout异步任务要先挂起

补一个有可能手误导致的立即执行

1
2
3

setTimeout(“console.log(1)”,1000);
setTimeout(console.log(1),1000); //立即执行
setTimeout(function(){console.log(1)},1000);

来分析一段较复杂的代码

console.log('main1');
setTimeout(function () {
    console.log('setTimeout');
    process.nextTick(function () {
        console.log('process.nextTick2');
    });
}, 0);
new Promise(function (resolve, reject) {
    console.log('promise');
    resolve();
}).then(function () {
    console.log('promise then');
});
process.nextTick(function () {
    console.log('process.nextTick1');
});
console.log('main2');

以上代码的执行结果是：main1=>promise=>main2=>process.nextTick1=>promise then=>setTimeout=>process.nextTick2

系统启动执行脚本，这个脚本就是一个宏任务，执行代码块中所有的同步代码，输出main1
next1放入微任务，setTimeout+nextTick2(下一轮)放入宏任务队列
promise构造函数部分是同步的，立刻执行输出promise，promise then放入微任务
下面同步代码输出main2
接下来执行微任务输出nextTick1，promise then
接下来执行宏任务输出setTimeout，将nexttick2放入微任务队列
接下来执行微任务nexttick2
nextTick是由node自己定义并实现的概念，它的回调调用入口在event loop过程中MakeCallback函数的末尾，驱动调用清空js层的queue，最后再执行microtasks，适当处理下可能触发的promise，明显 process.nextTick1> promise.then

Webpack之JS处理

发表于 2017-12-24 | 分类于自动化构建

Webpack之JS处理

提前公共模块的js
处理es6

—— 未完待续 ——

Webpack之CSS处理

发表于 2017-12-23 | 分类于自动化构建

Webpack是如何处理CSS的？

css-loader // css-loader interprets @import and url() like import/require() and will resolve them.
style-loader // 把上边处理好的样式作为style标签内容插入到html中
postcss-loader // 某些css要考虑到浏览器的兼容性(比如css3中的flex)，我们要webpack在打包的过程中自动为这些css属性加上浏览器前缀，这时就用到了postcss-loader和它对应的插件autoprefixer。
extract-text-webpack-plugin // 可以把css文件提炼出来

一、全部bundle在一起
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

二、提炼css文件出来
webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
}

——- postcss-loader 未完待续 ——

参考文档

webpack-dev-server

发表于 2017-12-21 | 分类于自动化构建

webpack-dev-server

将webpack与提供实时重新加载的开发服务器一起使用。仅能用于开发环境。
它使用了 webpack-dev-middleware under the hood，提供了对webpack资源的快速访问内存。
启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

安装此模块

1	npm install webpack-dev-server --save-dev

使用

使用 CLI

在与webpack.config.js同一个目录文件夹下运行

1	node_modules/.bin/webpack-dev-server

使用 NPM Scripts

1
2
3

"scripts": {
  "start:dev": "webpack-dev-server"
}

And run the following in your terminal/console:

1	npm run start:dev

NPM将自动为您引用node_modules中的bin文件，并且执行文件或命令。

结果

以上两种方法都会启动一个服务实例，并开始监听连接默认端口为8080的localhost
webpack-dev-server默认配置为支持文件的实时重新加载，这样当你修改你的文件时页面会自动刷新。

可以在webpack.config.js中配置

devServer: {
  port: 9001,
  publicPath: 'http://127.0.0.1:9001/assets/',
  open: true,
}

参考
官方GitHub
官方文档

Webpack配置文件

发表于 2017-11-22 | 分类于自动化构建

Webpack配置文件

webpack.config.js
简单介绍下Webpack配置文件中的 entry,output,loader,plugin的使用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map', // 控制是否生成以及如何生成 source map
  devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
    contentBase: path.resolve(__dirname, 'dist') // 设置静态资源的根目录
  },
  entry: { // 入口起点
    app: './src/index.js',
    print: './src/print.js'
  },
  output: { // 输出，只可指定一个输出配置
    filename: '[name].bundle.js', // 根据入口起点名动态生成 bundle 名，可以使用像 "js/[name]/bundle.js" 这样的文件夹结构
    path: path.resolve(__dirname, 'dist') // 输出文件所在的目录
  },
  module: { // 如何处理项目中不同类型的模块
    rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
      {
        test: /\.css$/, // 匹配特定文件的正则表达式或正则表达式数组，当遇到 import or require的扩展名为.css时候先处理下
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader'
        ]
      },
      { // 增加加载图片的规则
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      { // 增加加载字体的规则
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },

    ]
  },
  plugins: [ // 插件属性，是插件的实例数组
    new HtmlWebpackPlugin({
      title: 'webpack demo',  // 生成 HTML 文档的标题
      filename: 'index.html' // 写入 HTML 文件的文件名，默认 `index.html`
    }),
    new CleanWebpackPlugin(['dist']) // 第一个参数是要清理的目录的字符串数组
  ]
};

loader 和 plugin的区别
loader (加载器)，重在“加载”二字，是用于预处理文件的，只用于在加载不同类型的文件时对不同类型的文件做相应的处理。
而 plugin (插件)，顾名思义，是用来增加 webpack 的功能的，作用于整个 webpack 的构建过程。

HTTP协议

发表于 2017-05-22 | 分类于基础知识

HTTP协议

1、http协议的特点

简单快速，灵活，无连接，无状态

2、http报文组成部分

请求报文

请求行（http方法，页面地址，http协议/版本）
请求头（一些key/value告诉服务端我要哪些内容）
空行（结束请求头）
请求体

响应报文

状态行（协议，版本，状态码）
响应头
空行
响应体

3、http方法

get 获取资源
post 传输资源
put 更新资源
delete 删除资源
head 获取报文首部

4、post和get的区别

get浏览器回退无害的，post要发一次请求
get产生的url地址可以收藏，post不可以
get请求会被浏览器主动缓存，post不可以（除非手动）
get请求只支持url编码，post可以多种编码
get请求参数会完整的保留在浏览器历史纪录里，post不会
get请求参数是有长度限制的，post没有
参数的数据类型，get只接受ascii，post没有限制
get比post更不安全，参数暴露在url上，不能用来传递敏感信息
get参数通过url传递，post通过 request body传递

5、http状态吗

1xx - 请求接受，继续处理
2xx - 处理成功
3xx - 重定向
4xx - 客户端错误
5xx - 服务器端错误
206 请求成功部分
301 所有的请求已经移至新的url
302 所有的请求已经临时转移到新的url
304 缓存文档可以继续使用
400 客户端语法错误
403 请求的页面被禁止访问
404 资源不存在
500 不可预期的错误
503 临时过载或当机

6、持久链接

keep-alive

请求1-》响应1-》请求2 -》响应2-》请求3-》响应3

7、管线化

请求1-》请求2-》请求3-》响应1-》响应2-》响应3

CSS实现垂直剧中

发表于 2017-05-04 | 分类于基础知识

CSS实现垂直剧中

1、相对定位+绝对定位+CSS3 transform: translate(-50%, -50%);

#container{
  position:relative;
}

#center{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

2、相对定位+绝对定位+居中容器长宽减半

#container{
  position:relative;
}

#center{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0 0 -50px;
}

3、相对定位+绝对定位+margin

#container{
  position:relative;
}
#center{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

3、flex布局

#container{
  display:flex;
  justify-content:center;
  align-items: center;
}

4、table布局

#container{
  display: table;
}
#center{
  display: table-cell;
}

Hubery Hu

好久不写博客了，从此开始记录学习中的点点滴滴