浏览器调试——Timeline掌控帧渲染模式

发表于 2018-05-24

网页动画能够做到每秒60帧，就会跟显示器同步刷新，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16,66毫秒

黄色：JavaScript执行
紫色：样式计算和布局，及重排
绿色：重绘

window.requestAnimationFrame() // 下一次

window.requestldleCallback() // 下几次重新渲染时间

触发分层

1.获取DOM并将其分割为多个层
2.将每个层独立的绘制进位图中
3.将层作为纹理上传至GUP
4.复合多个层来生成最终的屏幕图像

1.DOM子树渲染层（RenderLayer）RenderObject->GraphicsContext（根元素、position、transform、半透明、CSS滤镜、Canvas2D、video、溢出）；
2.Compositor->渲染层子树的图形层

webpack-externals

发表于 2018-05-24

查看文档

Linux预备知识——进程与线程

发表于 2018-05-24

Linux 查看进程树

pstrss // 查看进程树

调度和切换的时间：进程>线程>协程

理论上一个核一个线程效率最高

top 命令

pid 进程编号
按q键退出

ps 命令

ps aux
sudo ps aux // 非root用户
// pid 越小的越有可能是主线程
//（例外：pid最大是2的16次方，pid一直增加，当增加到最大值，会从0开始，没有占用的数字上）
ps aux | grep python // grep 进行分组筛选出python

kill 、pkill命令

kill 进程的pid

w 命令

如果服务器被多个人使用，当你需要重启服务的时候使用w查看有没有其它人在服务器上工作。

重启网卡

ip addr
或
ifconfig
拿到网卡名字

cd /etc/sysconfig/network-scripts/
ls // 查看目录下是否有 ifcfg-网卡名称
ifdown 网卡名称 // 关掉网卡[慎用]
ifup 网卡名称 // 启动网卡

排查网络故障

能访问网络，但是访问不到特定网络
ping 网址 // ping不通

使用 tranceroute 网址

会出来一啪啦的ip地址，这些地址就是你访问这个网址所经过的路由器

如何找到占用端口的进程

使用 netstat 或者 ss 查看所有进程
netstat -an
netstat -anp // 显示进程 p代表process（英语一定要很OK）
netstat -anp | grep 8080 // 分组筛选
这个时候就可以使用kill 加进程id 杀死这个进程了

Linux预备知识——快捷键

发表于 2018-05-24

网络管理命令

systemctl status httpd
systemctl status apache2
systemctl start apache2 // 启动
systemctl stop apache2 // 停止
enable // 跟随系统启动一起启动
disable // 不跟随系统一起启动
ifconfig // 查看ip地址
ip addr // 查看ip地址
route // 路由信息，网关

命令行的下载命令：

wget 下载地址
curl 下载地址 -o 写入到指定名称的文件 --progress
// 现实进度条 --progress

查看服务器时间

date

查看Linux 帮助

curl --help
man curl //按q退出

在终端不小心按了 ctrl + s 怎么办？？

ctrl + s // 暂停屏幕输出
使用
ctrl + q // 恢复屏幕输出

其它快捷键

ctrl + d // 结束输入或退出shell
ctrl + l //（小写的L，不是I）清屏，等同于clear
ctrl + a / ctrl + e // 快速移动光标到行首/行尾

进入vim后，退出时提示没有文件名
:q! // 不保存，强行退出

Linux预备知识——免密远程登录

发表于 2018-05-24

使用情景一：在Linux或者mac上频繁登录另外一台主机

使用情景二：在需要自动化部署的时候

这时候每次都要输入口令这时候就需要免密登录

用公钥加密（相当于锁）私钥解密（相当于钥匙）

步骤1：生成密钥对

ssh-keygen -t rsa -C "名称" -f "名称_rsa" // rsa 加密方式

步骤2：上传配置公钥

上传公钥到服务器对应帐号的home路径下的./ssh/中
ssh-copy-id -i "公钥文件名" 用户名@服务器ip或域名
// 配置公钥文件访问权限为 600 -rw-------
登录服务器查看公钥是否上传
ssh 用户名@服务器ip或域名
cd /home/
ls -a // 查看所有文件（包括隐藏文件）
cd .ssh/
cat "公钥文件名" // 查看文件内容中是否是正确
检查正确上传之后 exit 退出

使用scp上传
可以用 cat abc_rsa.pub >> // 写入到文件里面

步骤3：配置本地私钥

在同层目录可以显示传入
ssh -i 私钥文件名用户名@服务器ip或域名 // 就可以面给密登录
不在同一级目录
ssh -i 相对路径/私钥文件名用户名@服务器ip或域名
例：ssh -i .ssh/abc_res 用户名@服务器ip或域名 // 假设我的私钥文件名为abc_rsa

步骤4：免密登录功能的本地配置文件

编辑自己 home 目录的 ./ssh/ 路径下的config 文件
User root // 登录的用户名
Host zhangsan // 服务器的别名
HostName www.abc.com // 服务器的ip或网址
Port 54322 // 端口号（默认填22）
StrictHostKeyChecking no
IdentityFile ~/ssh/abc_rsa // 指定私钥文件的地址
IdentitiesOnly yes
Protocol 2 // ssh的版本
Compression yes
ServerAliveInterval 60 // 每个60s网服务器发一个心跳
ServerAliveCountMax 20
LogLevel INFO // 日志输出等级，只输出主要日志

如果有多个服务器，上面的多复制几块

配置config 文件的访问权限为644

config 的访问权限也应该为 600 -rw-------

ssh 别名 // 登录

koa2

发表于 2018-05-24

首先node安装

npm init -y // 初始化
npm i koa   // 安装koa
npm install --save-dev babel-cli // 安装babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-0

app.js 内容如下

import Koa from 'koa';
import 'babel-polyfill';

const app = new Koa();

app.use(async ctx => {
    ctx.body = 'Hello';
});

app.listen(3000, function () {
    console.log('localhost:3000');
});

配置.babelrc文件

{
	"presets":[
      "es2015",
      "stage-0"
	],
	"plugins":[]
}

使用babel将index.js编译到index_o.js文件

1 2	// 使用命令 babel index.js -o index_o.js

运行
node app_o.js // 看到控制台输出 localhost:3000 则表示成功
打开浏览器
访问：localhost:3000
就可以看到Hello

注：
有时候

1	node app_o.js

会报错：控制台截图

解决办法：
在index.js中加入下面这句话：

1	import 'babel-polyfill';

babel配置指南--兼容老式浏览器的垫片

发表于 2018-05-24

babel-runtime

将es6编译成es5去运行，前端可以使用es6的语法来写，最终浏览器上运行的是es5

在大多数情况下，你应该安装 babel-plugin-transform-runtime 作为项目依赖（用 --save-dev ）

1	npm install --save-dev babel-plugin-transform-runtime

和 babel-runtime 作为生产依赖关系（用 --save-dev ）。

1	npm install --save babel-runtime

添加下面一行到你的 .babelrc 文件：

1
2
3

{
  "plugins": ["transform-runtime"]
}

或者

{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

babel-polyfill

不会将代码编译成低版本的js，他的原理是当运行环境中并没有实现的一些方法的时候会去做兼容

1	npm install --save babel-polyfill

koa2——实战2

发表于 2018-05-24

Koa中间件：github

首先安装静态文件服务中间件： koa-static
模板：koa-swig
路由：koa-router
安装：gulp

1	npm install --save-dev gulp

安装：

1	$ npm install koa-static

API：

1
2
3

const Koa = require('koa');
const app = new Koa();
app.use(require('koa-static')(root, opts));

root // 根目录字符串。此根目录上的任何内容都不可用。
opts // 对象选项
选项:

maxage 浏览器缓存 max-age以毫秒为单位。默认值为0
hidden 允许传输隐藏文件。默认为false
index 默认文件名，默认为index.html
defer 如果为：true,在返回next()之后服务，允许任何下游中间件首先响应。
gzip 当客户端支持GZIP时，如果存在.gz扩展的请求文件，请尝试自动服务文件的GZIP版本。默认为true。
br
setHeaders
extensions

Vue代码-1

发表于 2018-05-24

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html {
            font-size: .9em;
        }

        .table td {
            vertical-align: middle;
        }

        .adv-images {
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="container pt-5" id="app">
        <table class="table table-striped table-bordered table-hover table-sm text-center">
            <thead>
                <tr>
                    <th>排序号</th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>状态</th>
                    <th>跳转地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='item in tableData'>
                    <td>{{item.sort}}</td>
                    <td>
                        <img :src="'https://abc.yongweisoft.cn/Application/Public' + item.image" class="rounded adv-images" width="80" height="80"
                            alt="">
                    </td>
                    <td>{{item.name}}</td>
                    <td>
                        <span class="text-success" v-if='item.state == 1'>已启用</span>
                        <span class="text-danger" v-if='item.state == 0'>已禁用</span>
                    </td>
                    <td>
                        <span class="badge badge-secondary" v-if='item.status == 0'>不跳转</span>
                        <span class="badge badge-success" v-else-if='item.status == 1'>路径</span>
                        <span class="badge badge-info" v-else-if='item.status == 2'>指定内容</span>
                    </td>
                    <td>
                        <button type="button" @click='showAlert(item.id)' class="btn btn-primary btn-sm">操作按钮</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tableData: [{ "id": "7", "image": "/upload/headImg/201803131315266038.jpg", "name": "12", "status": "0", "url": "", "content": "", "sort": "022", "state": "0" }, { "id": "5", "image": "/upload/headImg/201803131315428439.jpg", "name": "222222", "status": "2", "url": "", "content": "容内容内容", "sort": "12", "state": "1" }, { "id": "4", "image": "/upload/headImg/201803131315537248.jpg", "name": "333", "status": "1", "url": "http://www.baidu.com/", "content": "true", "sort": "true", "state": "1" }]
            },
            methods: {
                showAlert: function (id) {
                    alert(id)
                }
            }
        })
    </script>
</body>

</html>

TypeScript——访问修饰符

发表于 2018-05-24

TypeScript——访问修饰符

触发分层

top 命令

ps 命令

kill 、pkill命令

w 命令

重启网卡

排查网络故障

如何找到占用端口的进程

登录

网络管理命令

命令行的下载命令：

查看服务器时间

查看Linux 帮助

在终端不小心按了 ctrl + s 怎么办？？

其它快捷键

这时候每次都要输入口令 这时候就需要免密登录

步骤1： 生成密钥对

步骤2： 上传配置公钥

步骤3： 配置本地私钥

步骤4： 免密登录功能的本地配置文件

将es6编译成es5去运行，前端可以使用es6的语法来写，最终浏览器上运行的是es5

不会将代码编译成低版本的js，他的原理是当运行环境中并没有实现的一些方法的时候会去做兼容

这时候每次都要输入口令这时候就需要免密登录

步骤1：生成密钥对

步骤2：上传配置公钥

步骤3：配置本地私钥

步骤4：免密登录功能的本地配置文件