zxhfighter

客户端安全最佳实践

提炼自Client-Side Security Best Practices

HTML5的出现使很多业务逻辑从后端转移到前端，这也使得前端开发人员需要在安全上多加注意。本文将讨论如何使你的APP更加安全，除了告诉你转码用户输入外，还会介绍一些新的安全方案。

HTTP不予考虑

---

zxhfighter

Notes on 《styling with css》

写CSS尽量要避免这两件事情：

1. 写重复的代码
2. 写精简的代码

第1点，可以采用现在流行的CSS Processors来解决。 第2点，可以学习一些现有网站的实现。

zxhfighter

CSS极客式恶搞

下面以chrome浏览器为例。

一、打开浏览器的Custom.css文件

该文件一般在个人账号%APPDATA%/Local/Google/Chrome/User Data/Default/User StyleSheets文件下下面，也可以在C盘搜索Custome.css文件，修改该CSS文件后，Chrome浏览器会实时读取该文件，并应用，你要整蛊的人就可以看到各种奇葩效果啦。

1. 上下颠倒

zxhfighter

关于VPN的点点滴滴

很多时候，我们需要翻墙做一点事情，你懂的。肉身翻墙有点困难，这时候我们就需要使用VPN进行虚拟翻墙了。

什么是VPN？

---

VPN是虚拟专用网络（Virtual Private Network）的简称，指的是在公用网络上建立专用网络的技术。之所以称之为虚拟网，是因为整个VPN网络的任意两个节点之间的连接并没有传统专网所需的端到端的物理链路，而是架构在公用网络服务商提供的网络平台，例如ATM、Frame Relay等之上的逻辑网络，用户数据在逻辑链路中传输。

zxhfighter

有关script标签的几个特点

src引用 VS 内嵌代码

script标签如果使用了src属性，那么会自动忽略script标签之间的文本。

甚至，在HTML5校验器中，<script src=""></script>之间如果有非空格之类的字符出现，将会报错。

不过有时候也会见到这样的代码：

zxhfighter

同源策略

定义

---

同源策略（same-origin policy）是客户端编程语言中（例如JavaScript）一个重要的安全策略。该策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。

这里的源，由协议（protocal）、主机（host）和端口（port）组成，只有三者全部相同，才为同源。

zxhfighter

defer和async属性

to be updated.

zxhfighter

setTimeout和setInterval

问题缘起

---

首先来做分析三段典型代码，热热身。

代码段一，同样是重复执行同一段代码，这两种写法有啥区别？

zxhfighter

客户端JavaScript时间线

摘自《JavaScript权威指南第六版》，详细描述了JavaScript下载、解析、事件循环整个过程。

1. Web浏览器创建Document对象，并且开始解析Web页面，页面解析HTML元素和它们的文本内容后，添加Element对象和Text节点到文档中。这个阶段document.readyState属性的值为loading。

2. HTML解析器遇到没有async和defer属性的script元素时，它把这些元素添加到文档中，然后运行行内和外部脚本。这些脚本会同步执行，并且在脚本下载（如果需要）和执行时解析器会暂停。这样脚本就可以使用document.write()来把文本插入到输入流中。解析器恢复时，这些文本会成为文档的一部分。同步脚本经常简单定义函数和事件处理程序，但它们可以遍历和操作文档树，因为它们执行时已经存在了。这样，同步脚本可以看到它自己的script元素和它们之前的文档内容。

3. HTML解析器遇到有async何defer属性的script元素时，它开始下载脚本文件，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的script元素和它之前的所有文档元素，并且可能或者干脆不可能访问其他的文档内容。

zxhfighter

CSS3动画

现在IE10，Chrome和Firefox系列浏览器都支持CSS3动画，一些增强用户体验的动画可以利用CSS3取代JavaScript来实现，另外，CSS3动画还可以实现GPU加速。对于不支持CSS3动画的浏览器，就需要采用JavaScript来实现类似功能。

具体语法

---

参见这里。