延迟加载JavaScript

JavaScript的延迟加载是那些在web上，能让你想抓狂地去寻找解决方案的问题之一。

  很多人说“那就用defer”或“async”，甚至有些人说“那就将你的javascript代码放在页面代码底部”。

  上述方法都不能解决在web页面完全加载后，再加载外部js的问题。上述方法也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

从一行代码里面学点JavaScript

  现如今，JavaScript无处不在，因此关于JavaScript的新知识也是层出不穷。JavaScript的特点在于，要学习它的语法入门简简单，但是要精通使用它的方式却是一件不容易的事。

  来看看下面的这段代码，它来自于谷歌“名猿”Addy Osmani贴出的一段代码（本人做了些改进，嘿嘿），它的作用是用来调试你的CSS层。全部代码只有三行，但是你绝对可以把它放在一行里面完成(比如我)：

1

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+((~~(Math.random()*(1<<24))).toString(16)+"000000").substr(0,6)})

  从输入URL到页面加载完成的过程中都发生了什么。本篇文章主要是翻译stackoverflow的一个回答，他没有非常繁琐和底层的介绍，从寥寥的几个步骤中，我们就能了解各大概了。当然，如果想看更详细的内容，可以参考这篇文章：从输入 URL 到页面加载完成的过程中都发生了什么事情？

  这篇文章的stackoverflow链接是what happens when you type in a URL in browser

1.browser checks cache; if requested object is in cache and is fresh, skip to #9

  1.浏览器检查缓存，若缓存中存储着要请求的内容，并且内容是最新的，直接跳转到第9步

HTTP 协议是互联网的基础协议，也是网页开发的必备知识，最新版本 HTTP/2 更是让它成为技术热点。本文介绍 HTTP 协议的历史演变和设计思路。

HTTP/0.9

  HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。

  最早版本是1991年发布的0.9版。该版本极其简单，只有一个命令GET。

GET /index.html

前言

  在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。那么下面我们就来看看服务器端缓存的原理。

缓存分类

  web缓存分为很多种，比如数据库缓存、代理服务器缓存、还有我们熟悉的CDN缓存，以及浏览器缓存。对于太多文字的阅读其实我是拒绝的，于是就画了个图来解释下。

  浏览器通过代理服务器向源服务器发起请求的原理如下图，

  浏览器先向代理服务器发起Web请求，再将请求转发到源服务器。它属于共享缓存，所以很多地方都可以使用其缓存资源，因此对于节省流量有很大作用。

事件委托技术原理（摘自英文davidwalsh）

事件委托（event delegation），使用时间委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到哪个是子元素的事件。

 首先，我们设定一个列表

1
2
3
4
5
6
7
8

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

  我们假设要给每个li添加不同的事件，你可以给每个独立的li元素添加事件监听器，但有时这些li元素可能会被删除，可能会有新增，监听它们的新增或删除事件将会是一场噩梦，尤其是当你的监听事件的代码放在应用的另一个地方时。但是，如果你将监听器安放到它们的父元素上呢？你如何能知道是那个子元素被点击了？

对于前端开发人员，在开发过程中经常需要监控某些表达式或变量的值，如果使用用debugger会显得过于笨重，最常用的方法是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。

从早前一道阿里实习生招聘笔试题目入手

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function f1() {
	console.time('time span');
}
function f2() {
	console.timeEnd('time span');
}
setTimeout(f1, 100);
setTimeout(f2, 200);

function waitForMs(n) {
	var now = Date.now();
	while (Date.now() - now < n) {
	}//空while
}
waitForMs(500);//输出什么？
//->time span: 0ms
//实际测试输出的是 time span: 0.023ms
//实际的time是不确定的接近于0ms的，而不是0ms;

有人说reduce()是js的二向箔，那我们就从统计字符串中字符出现的次数这个例子领略它的强大！

何为reduce()方法

Array reduce()方法:

  此方法可以对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。最后的返回值是通过最后一次调用回调函数获得的累积结果。

语法结构:

1

array.reduce(callbackfn[, initial])

说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决。

前言

  由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持WebSocket，因此都不能算是ST2的原生解决方案，原生的只有AJAX。

————————————————————————————————————————————————————–

————————————————————————————————————————————————————–