| 字数统计: 698(字)

在浏览器输入url到页面打开，都做了些什么？

发表于 2016-01-12 | 分类于前端 | 阅读次数

在浏览器输入url到页面打开，都做了些什么？

浏览器里输入网址
浏览器查找域名对应的IP地址
- （这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…）
  - 浏览器搜索自身DNS缓存
  - 搜索操作系统自身的DNS缓存（浏览器没有找到缓存或者缓存已失效）
  - 读取本地host文件（未找到）
  - 浏览器发起一个DNS的系统调用(向运营商DNS服务器发起域名解析请求)
    - 宽带运营商服务器查看自身缓存（未找到）
    - 运营商服务器发起一个迭代DNS解析请求（找根域DNS服务器->com域DNS服务器…）
    - 最后运营商服务器把结果返回给操作系统内核同时缓存起来
    - 操作系统内核把结果返回给浏览器
浏览器获取域名对应的IP地址后，发起HTTP“三次握手”
TCP/IP连接建立后，浏览器向web服务器发送一个HTTP请求
服务器的永久重定向响应（从http://example.com 到 http://www.example.com）
- 关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://example.com/和http://www.example.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。
浏览器跟踪重定向地址，发起GET请求
服务器”处理”请求，向浏览器发回一个HTML响应
浏览器解析显示HTML
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
浏览器发送异步请求（ajax请求等）

查看浏览器DNS缓存（以chrome为例）
在chrome地址栏输入 chrome://net-internals/#dns

TCP/IP三次握手

DOM文档加载步骤

解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本代码
构造HTML DOM模型 //ready
加载图片等外部文件
页面加载完毕//load

这里有一个坑我们在写脚本时候，以jQuery为例

1
2
3

$(document).ready(function(){
	//代码
})

1
2
3

$(document).load(function(){
	//代码
})

这两个是jQuery的文档加载方法，只是用ready就是在构建HTML DOM时候执行脚本用load就是页面加载完毕执行
更多内容可以看看jQuery源码的解析，这里顺带提一下
参考

慕课网 node.js基础 HTTP知识
 慕课网 Linux网络基础

| 字数统计: 761(字)

HTTP概念进阶

发表于 2016-01-12 | 分类于前端 | 阅读次数

HTTP概念进阶

Nodejs中http模块不解析请求的具体内容，只分离出请求头和请求体
1、什么是回调函数？
回调试异步编程时的基础，将后续逻辑封装成起始函数的参数，逐层嵌套
2、什么事同步/异步？
同步：发送方发送数据后，等待接收方发回响应以后才发下一个数据包的通讯方式
异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式
3、什么事I/O?
磁盘的写入（in）磁盘的读取（out）
4、什么是单线程/多线程？
一次只能执行一个程序叫做单线程
一次能执行多个程序叫做多线程
5、什么是阻塞/非阻塞？
阻塞：前一个程序未执行完就得一直等待
非阻塞：前一个程序未执行完时可以挂起，继续执行其他程序，等到使用时再执行
6、什么是事件？
一个触发动作（例如点击按钮）
7、什么是事件驱动？
一个触发动作引起的操作（例如点击按钮后弹出一个对话框）
8、什么是基于事件驱动的回调？
为了某个事件注册了回调函数，但是这个回调函数不是马上执行，只有当事件发生的时候，才会调用回掉函数，这种函数执行的方式叫做事件驱动~这种注册回掉就是基于事件驱动的回调，如果这些回调和异步I/O（数据写入、读取）操作相关，可以看作是基于回调的异步I/O。只不过这种回调在nodejs中是有事件来驱动的
9、什么是事件循环？
事件循环Eventloop，倘若有大量的异步操作，一些I/O的耗时操作，甚至是一些定时器控制的延时操作，它们完成的时候都要调用相应的回调函数，而从完成一些密集的任务，而又不会阻塞整个程序执行的流程，此时需要一种机制来管理，这种机制叫做事件循环
总而言之，管理大量异步操作的机制叫做事件循环

EventLoop：
回调函数队列，当异步函数执行时回调函数会被压入这个队列；对于node.js来说，它有一个单线程不断查询队列是否有事件，当它读取到一个事件时候，将调用与这个事件关联的js函数。

事件的循环是一个先进先出的任务队列，回调按照他们加入队列的顺序来执行。

整个队列可以理解成是普通函数和回调函数构成的一个完整的队列。

var c=0;
function printIt(){
	console.log(c);
}
function plus(callback){
	setTimeout(function(){
		c+=1;
		callback();
},1000)
}
	
plus(printIt);
//1

node.js 核心思想：

非阻塞
单线程
事件驱动

| 字数统计: 244(字)

为什么需要块级作用域？

发表于 2016-01-11 | 分类于前端 | 阅读次数

为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

所以ES6中引入了块级作用域。

ES6 的块级作用域

| 字数统计: 806(字)

CSS3实现三角形和气泡效果

发表于 2016-01-07 | 分类于前端 | 阅读次数

三角形的实现

html结构

1
2
3

<body>
	<div></div>
</body>

css样式

      div{
	height: 0;
	width: 0;
	border-top: 40px solid #000;
	border-right: 40px solid #ff0000;
	border-left: 40px solid #ff0000;
	border-bottom: 40px solid #000;
}

显示效果

用css画三角形很简单，就是将一个块元素宽高设置为0，然后给某一边设一个比较厚的宽度
利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个
上下左右划分4个部分。保证元素是块级元素，设置元素的边框，不需要显示的边框使用透明色transparent。

所以，如果你要一个向上或者向下的三角:border-left和border-right就是transparent，而border-bottom可见则三角向上，border-top可见则三角向下

    div{
	height: 0;
	width: 0;
	border-top: 40px solid transparent;
	border-right: 40px solid transparent;
	border-left: 40px solid transparent;
	border-bottom: 40px solid #000;
}

如果你要一个向左或者向右的三角:border-top和border-bottom就是transparent，而设置border-left则三角向右，设置border-right则三角向左

    div{
	height: 0;
	width: 0;
	border-top: 40px solid transparent;
	border-right: 40px solid transparent;
	border-left: 40px solid #000;
	border-bottom: 40px solid transparent;
}

如果它的上是有的，但是右是透明的，就会是下面的效果
border-top: 100px solid red;
border-right: 100px solid transparent;

   div{
	height: 0;
	width: 0;
	border-top: 40px solid #000;
	border-right: 40px solid transparent;
	
}

当然还有这样的：

  div{
	height: 0;
	width: 0;
	border-top: 40px solid #000;
	border-right: 30px solid #ff0000;
	border-left: 50px solid #ff0000;
	border-bottom: 25px solid #000;
	
}

很明显的左三角和下三角的比例是2:1，在下三角可以明显的看出来，下三角的底边，左右2:1；
同理，根据上面的上下左右布局，应该没有什么三角是画不出来的

示例

如下图的时光轴旁边的小三角就可以用以上的方法实现

 .content_item_icon_arrow{
	position: absolute;
	left: -10px;
	top: 20px;
	height: 0px;
	border-color:transparent #e2e2e2 transparent transparent;
	border-width: 10px 10px 10px 0px;
	border-style: dashed solid dashed dashed;
}

气泡效果实现

以前我们要实现对话气泡效果很麻烦，基本上是用切图的方法。现在有了CSS3就变得简单多了。一个HTML元素，一些CSS3代码，不需要图片，也不需要JavaScript。如下图：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	css3实现气泡</title>
	<style>
			.box{
				width: 200px;height: 100px; border: 5px solid #eee;margin-left: 10px;position: relative;
			}
			.box .arrow{
				position: absolute;top: 100px;left: 30px;width: 50px;height: 50px;
			}
			.a1{
				border: 30px solid #f00;display: block;border-color: #eee transparent transparent transparent;
			}
			.a2{position: absolute;left: 0;top: -8px;border: 30px solid #f00;display: block;border-color: #fff transparent transparent transparent }
		
	</style>
</head>
<body>
	<div class="box">
		<div class="arrow">
			<span class="a1"></span>
			<span class="a2"></span>
		</div>
		<p>
			css3实现气泡
		</p>
	</div>
</body>
</html>

效果

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#demo{
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}
#demo:before{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 30px;
    top: 100px;
    border: 25px solid;
    border-color: #666 transparent transparent #666;
}
#demo:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 38px;
    top: 100px;
    border: 15px solid;
    border-color: #fff transparent transparent #fff;
}
</style>
<body>
    <div id="demo"></div>
</body>
</html>

效果：

参考：
CSS3实现气泡效果
 CSS3 巧妙实现聊天气泡
 CSS3 聊天气泡框以及 inherit、currentColor 关键字

| 字数统计: 1,213(字)

读书笔记 | 如何读历史？

发表于 2015-12-30 | 分类于历史 | 阅读次数

如何阅读历史

一切历史都是当代史

历史更偏向于故事，而不是科学。对于历史不那么感兴趣的人可能认为，历史书是一种客观严肃的读物，事实上就像广泛流传的那句话一样：历史是由胜利者书写的，历史是任人打扮的小姑娘–《如何阅读一本书》
房龙的宽容：这样的事情发生在过去，也发生在现在不过将来，我们希望，这样的事情不再发生了。

托尔斯泰认为，造成人类行为的原因太多，又太复杂，而且动机又深深隐藏在潜意识里，因此我们无法知道为什么会发生某些事。

亚里士多德说：“诗比历史更有哲学性。”他的意思是诗更具一般性，更有普遍影响力。一首好诗不只在当时当地是一首好诗，也在任何时间任何地点都是好诗。这样的诗对所有人类来说都有意义与力量。历史不像诗那样有普遍性。历史与事件有关，诗却不必如此。但是一本好的历史书仍然是有普遍性的。修昔底德说过，他写历史的原因是：希望经由他所观察到的错误，以及他个人受到的灾难与国家所受到的苦楚，将来的人们不会重蹈覆辙。他所描述的人们犯下的错误，不只对他个人或希腊有意义，对整个人类来说更有意义。在二千五百年以前，雅典人与斯巴达人所犯的错误，今天人们仍然同样在犯—或至少是非常接近的错误—修昔底德以降，这样的戏码一再上演。

总之，阅读历史的两个要点是：第一，对你感兴趣的事件或时期，尽可能阅读一种以上的历史书。第二，阅读历史时，不只要关心在过去某个时间、地点真正发生了什么事，还要读懂在任何时空之中，尤其是现在，人们为什么会有如此这般行动的原因。

阅读历史书要提出的问题：
尽管历史书更接近小说，而非科学，但仍然能像阅读论说性作品一样来阅读，也应该如此阅读。
因此，在阅读历史时，我们也要像阅读论说性作品一样，提出基本的问题。因为历史的特性，我们要提出的问题有点不同，所期待的答案也稍微不同。
每一本历史书都有一个特殊而且有限定范围的主题。因此，如果我们要把历史读好，我们就要弄清楚这本书在谈什么，没有谈到的又是什么。当然，如果我们要批评这本书，我们一定要知道它没谈到的是什么。一位作者不该因为他没有做到他根本就没想做的事情而受到指责。
我们一定要知道这位作者是用什么方法来说故事的。他将整本书依照年代、时期或世代区分为不同的章节？还是按照其他的规则定出章节？他是不是在这一章中谈那个时期的经济历史，而在别章中谈战争、宗教运动与文学作品的产生？其中哪一个对他来说最重要？如果我们能找出这些，如果我们能从他的故事章节中发现他最重视的部分，我们就能更了解他。我们可能不同意他对这件事的观点，但我们仍然能从他身上学到东西。

批评历史常有的两种方式：
在我们读完并完全了解书中的意义之后批评。如批评书不够逼真误解了史实判断失真无法掌握任性对老一辈史书缺少经济事务的批评对那些高大形象描述的大公无私高贵情操人物的怀疑一个好的历史学家要能兼具说故事的人与科学家的能力。他必须像某些目击者或作家说一些事情确实发生过一样，知道一些事情就是可能发生过。即：能够消除读者的疑虑
（某方面某领域有研究的人）会认为作者误用了资料或者作者自己的判断就是错的。
我们希望历史学家具备完备的知识。

历史与我何干？
这个世界已经变得很渺小又危机四伏，每个人都该开始把历史读好才行。
一切历史都是当代史。

·END·

| 字数统计: 38(字)

前端面试题汇总

发表于 2015-12-30 | 分类于前端 | 阅读次数

前端面试题汇总

罗列一些面试常见问题
前端面试（一）
前端面试（二）
前端面试（三）
前端面试（四）

·END·

| 字数统计: 1,068(字)

Linux 各目录的作用

发表于 2015-12-30 | 分类于 linux | 阅读次数

/根目录

/bin

bin是binary的缩写。这个目录沿袭了UNIX系统的结构，存放着使用者最经常使用的命令。例如cp、ls、cat，等等。命令保存目录（普通用户就可以读取的命令）
根目录下的bin和sbin，usr目录下的bin和sbin，这四个目录都是用来保存系统命令的。
其中，bin目录下的命令任何用户都可以执行，sbin目录下只有root才可以执行。
linux使用此方式来区分用户权限。

/boot
启动目录，启动相关文件，这里存放的是启动Linux时使用的一些核心文件。

/dev
设备文件保存目录
dev是device（设备）的缩写。这个目录下是所有Linux的外部设备，其功能类似DOS下的.sys和Win下的.vxd。在Linux中设备和文件是用同种方法访问的。例如：/dev/hda代表第一个物理IDE硬盘。

/etc
配置文件保存目录这个目录用来存放系统管理所需要的配置文件和子目录。

/home
普通用户的家目录
用户的主目录，比如说有个用户叫zk，那他的主目录就是/home/zk也可以用~zk表示。