简单NODE的HTTP-SERVER服务器

npm安装http-server(-g 全局安装):

1
npm install http-server -g

当前目录输入命令行:

1
http-server

输出结果:

1
2
3
4
5
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://*.*.*.*:8080
Hit CTRL-C to stop the server

访问 http://127.0.0.1:8080 即可

Mac Git ssh 配置指引

mac ssh配置:

1、生成ssh

输入命令

1
ssh-keygen -t rsa -C "xxx@xxx.com"

提示保存ssh key文件名,输入文件名:~/.ssh/id_rsa_1 (ps:文件名前面是路径, 1可以自定义名称)

然后输入ssh文件密码

2、添加ssh

查看~/.ssh目录下已生成的两个文件:

私钥:id_rsa_1
公钥:id_rsa_1.pub

命令打开公钥,复制添加至git站点

1
cat ~/.ssh/id_rsa_1.pub

3、把私钥添加至git

1
ssh-add ~/.ssh/id_rsa_1

以上已经完成一个ssh key的添加了。

ps:多个仓库重复1~3步骤即可

HTTP 缓存头简介

HTTP 缓存是现代各个浏览器广泛采用的规范,从而使得它在 web 应用上实现起来很简单。
恰当的使用这些规范可以让你的应用获益匪浅,提高响应时间,降低服务器负载

这里介绍的方法主要是使用结构和样式去实现,而并不会使用js计算高度

HTTP 缓存头

这有两个基本的缓存头,Cache-Control 和 Expires。

设置 Cache-Control 值

  1. public 资源不仅可以被用户端浏览器缓存,还可以被能够给其他众多用户提供服务的中间代理器缓存

    1
    Cache-Control:public
  2. private 资源会被中间代理器忽略,只能够被客户端缓存

    1
    Cache-Control:private
  3. Cache-Control 头部的值是一个复合值,既表明了资源是 public 还是 private ,还表明了它能够缓存的时间的最大值,在它被认为过时之前。max-age 设置了一个时间跨度,表示缓存这些资源多长时间。(以秒计算)

    1
    Cache-Control:public, max-age=31536000

当 Cache-Control 头部打开客户端缓存,设置一个资源的 max-age 时,Expires 头部被用来确定一个具体的时间点,到时间点时缓存的资源将会失效。

Expires

伴随着 Cache-Control 头部的设置,Expires只是设置一个缓存资源失效的日期。浏览器将会从这个日期提前请求这个资源的新副本。在那个日期之前,浏览器使用的是本地缓存副本:

注意:如果 Expires 和 max-age 同时都被设置了,那么优先考虑 max-age

引用

粘连Footer的简单实现方式

粘连 footer 的目的是让footer模块在内容高度小于窗口高度时footer类似positon fixed在底部;
当内容高度大于窗口高度时footer类似positon static跟随内容区域后面

这里介绍的方法主要是使用结构和样式去实现,而并不会使用js计算高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 结构
<body>
<div class="content">
<div class="content-inner">
content
</div>
</div>
<footer class="footer"></footer>
</body>
// 样式
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inner {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}

DEMO示例

方案二: 在 wrapper 上用负的 margin-bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 结构
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
// 样式
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer, .push {
height: 50px;
}

Performance API

简介

performance.timing表示一个页面事件(例如页面发送了请求)或者页面加载(例如当DOM开始加载),测量以毫秒的形式展示;
支持浏览器: IE9+,Chrome11+,Firefox7+

API列表

  • performance.timing.navigationStart 当load/unload动作被触发时间
  • performance.timing.redirectStart 页面重定向时的开始时间
  • performance.timing.redirectEnd 页面重定向时的结束时间
  • performance.timing.domComplete 页面DOM加载完时间
  • performance.timing.responseStart 客户端收到从服务器端(或缓存、本地资源)响应回的第一个字节的数据的时刻
  • performance.timing.responseEnd 客户端收到从服务器端(或缓存、本地资源)响应回的最后一个字节的数据的时刻

更多

更多请查阅performance文档