发表于 | 分类于

如果我们在文档未加载完前执行了脚本，而该脚本中需要用到还没被加载的元素，此时网站的效果将会不符合我们的预期。因此我们通常将JS放到</body>结束标签之前，以此来加快文档加载速度且尽量在执行JS前加载完文档。但此时脚本仍然有可能使用到还没有被加载的元素，例如后期的脚本会动态修改页面元素。
为了保证在</body>加载完后才执行我们的函数，我们可以使用到window对象的onload方法，当网页加载完毕时会触发onload事件，因此我们可以将需要执行的函数例如prepareFunc绑定到事件 window.onload上。
此外，我们可能不仅需要绑定prepareFunc，还需要绑定prepareFunc2、prepareFunc3等等等。你可能写成：

1
2
 window.onload = prepareFunc; 
window.onload = prepareFunc2;
但每个事件处理函数只能绑定一条指令，因此后一句指令将覆盖前一句指令，实际绑定上的函数只有prepareFunc2一个。
一种比较简单的解决方式是：给onload指定一个匿名函数，并将我们要绑定的函数包括在里面。
1
2
3
4
window.onload = function(){
	prepareFunc();
	prepareFunc2();
}
但素，作为一名有追求的程序员，我们应该用更高级的方法来实现这个步骤，而不是每次手动修改onload指令。让我们编写自己的模块化onload时间处理函数，命名为addLoadFunc，逻辑如下。之后每次绑定onload事件函数都可以直接调用addLoadFunc而不用担心被覆盖。
1
2
3
4
5
6
7
8
9
10
11
12
13
 function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
addLoadEvent(prepareFunc);
addLoadEvent(prepareFunc2);

发表于 | 分类于

《Javascript DOM 编程艺术》中第五章有四个概念讲述的非常好，分别是平稳退化、分离JavaScript、向后兼容、性能考虑。这也是很多野生前端选手可能忽视的地方。

平稳退化

让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利的访问你的网站，这就是平稳退化的思想。
例如，当我们要实现一个弹窗效果可能会写到：

1
2
<a href="javascript:popUp('http://www.example.com/')"></a>
// <a href="#" onclick="popUp('http://www.example.com/')"></a>
1
2
3
function popUp(objectUrl) {
	window.open(objectUrl,'popup','width=320,height=480');
}
但有两种情况使得网页的可访问性降低：一是当用户禁用JavaScript时,点击无效；二是大多数搜索机器人无法理解js代码，它们在搜索引擎上的排名就会降低。因此平稳退化的目的就是当Javascript无效时，仍能让我们的网站显示给用户有效的信息。这里实现平稳退化的方式如下：
1
<a href="http://www.example.com/" onclick="popUp(this.href);return false;"></a>
1
2
3
function popUp(objectUrl) {
	window.open(objectUrl,'popup','width=320,height=480');
}

分离JavaScript

在HTML文档里使用onclick之类的属性较容易出现问题，这里我们将使用类似CSS的挂钩机制来将HTML和JavaScript分离开来，这样将使得我们的网页健壮得多。实现方式如下：

1
<a href="http://www.example.com/" class="popup"></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = prepareLinks;
function prepareLinks() {
	var links = document.getElementsByTagName('a');
	for (var i = 0; i < links.length; i++) {
		if (links[i].className == "popup") {
			links[i].onclick = function () {
				popUp(this.href);
				return false;
			}
		}			
	}
}
function popUp(objectUrl) {
	window.open(objectUrl, "pop", "width=320,height=480");
}
这里的基本思想是给每个需要弹窗的a标签加上样式popup，然后再循环遍历文档里所有具有该样式的a标签，并给其添加上相应的点击事件，并返回false，使得href值无效。这里有一点要注意的是需要在文档加载完成之后再遍历所有的a标签，因此需要用到window的onload方法。这样的实现思想就比较好的演示了如何将HTML和JavaScript分离开来。

向后兼容

考虑到部分老的浏览器对JavaScript支持的并不是很好，我们需要用到对象检测的方法来给我们的浏览器设置门槛。一般的思想是：

1
2
3
4
5
6
if (condition) { statements } 
<!-- 例如 -->
if (document.getElementById('pop')) {
	var pop = document.getElementById('pop');
	...
}
也就是说如果浏览器支持某行为，我们则使用某段代码，但这样会给我们的方法添加很多碍于阅读的花括号。因此我们不妨换一个思维：
1
if (!condition) { return false; }
即在使用的方法前进行否定判断：“你若不支持我，我就离开”。这是一种更为简洁的思路，在使用相应的api之前进行对象检测，检测过关则进行下一步，不过关则离开。其代码也更加清晰。

性能考虑

基本的性能提升策略有以下几种：

  • 尽量减少访问DOM和尽量减少标记
  • 合并和放置脚本
  • 压缩脚本

发表于 | 分类于

写代码的时候就经常把这两个属性弄混淆，到底是href还是src，href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系，src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

原文地址：http://www.cnblogs.com/tylerdonet/p/5808617.html

发表于 | 分类于

总有许多人在写css时会很奇怪：“为什么我的样式没有语法错误就是显示不出来呢？”在非浏览器原因的情况下一般都是选择器的优先级问题。尽管css选择器有许多组合，但我们仍有一定的规律来识别它们的优先级，毕竟浏览器也是通过一定的方式计算后来决定采用哪种样式进行渲染的。

来源不同，比较来源

对于不同源样式文件，除了important声明外，作者定义>用户定义>用户代理，更为详细的优先级顺序如下，从上到下依次增高：
user agent stylesheet
user declarations （normal）
author declarations （normal）
author declarations （!important）
user declarations （!important）

来源相同，比较Weight

对于同源文件，我们会根据特殊值weight来判断。我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
A等：代表内联样式，如: style=””，权值为1000。
B等：代表ID选择器，如：#content，权值为100。
C等：代表类，伪类和属性选择器，如.content，权值为10。
D等：代表类型选择器和伪元素选择器，如div p，权值为1。
Weight = nA + nB + nC + nD (其中n为该选择器的个数)。
Weight越大，则优先级越高。

来源相同，Weight相同，比较顺序

声明靠后者覆盖靠前者。

发表于 | 分类于

在写html时我们经常会看到头部有一列的meta标签，因此最近总结了一些比较常用的http-equiv属性和name属性，在前一篇文章中可以查阅到。这其中最有意思的就是viewport了，这个属性决定了用户访问你的网站时的第一体验。下面我们按照桌面浏览器以及移动浏览器两个板块来学习下viewport。

桌面浏览器

设备像素和CSS像素

设备像素是固定的，可以从screen.width/height读出，而CSS像素的可见大小是可以变化的。如果我们给一个元素设置了width:512px的属性，且显示器是1024px宽，当我们将页面放大一倍时，此时该元素将占满整个宽度，每个像素的宽度都被拉伸到原来的一被大，也就是每个像素占着2个实际像素的空间，因此占满整个屏幕。在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。

屏幕尺寸

意义：用户屏幕的整体大小。
度量：设备像素。
获取：screen.width/height。

窗口尺寸

意义：浏览器窗口的整体大小，包括滚动条。对窗口进行放大或缩小时值会变。
度量：CSS像素。
获取：window.innerWidth/Height。

滚动距离

意义：页面的滚动距离，具体指滚动条距顶部的距离。
度量单位：CSS像素。
滚动距离的度量方式为css像素，可以通过window.pageXOffset/pageYOffset来获取。

viewport

我们都知道块级子元素的宽度默认为块级父元素的100%，body的宽度默认来自于html的宽度，那么html的宽度来自哪呢？其实html是在一个叫viewport的假想机制下进行渲染的,在桌面浏览器中，这个viewport的宽度就等于浏览器窗口的宽度（不包括滚动条）。
既然html的宽度来自于viewport的宽度，而documentElement指向html元素，那么我们可以通过document.documentElement.clientWidth来得到viewport的宽度。但这里有一个特殊的规则，即使设定了html的宽度，clientWidth还是指向viewport的宽度。
若想真正获取html的宽度，我们可以通过另一个方法document.documentElement.offfsetWidth,该属性始终都指向html的宽度值。

事件中的坐标

pageX\Y提供了相对于html元素的以css像素度量的坐标。
clientX/Y提供了相对于viewport的以css像素度量的坐标
screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

媒体查询

媒体查询使用的宽高是viewport的宽高而不是设备的宽高。因为我们感兴趣的是基于css像素的页面，而不是基于设备像素的页面。

移动浏览器

两个viewport

如果我们继续按照在桌面浏览器中渲染页面的方式来设计移动浏览器，那么我们的站点将陷入一个无比尴尬之地，要么为移动端单独设计网页，要么页面在移动端的显示非常拥挤。这时浏览器厂商尝试了一种比较有利的做法，他们把浏览器中的一个viewport变成两个viewport,一个是layout viewport,另一个则是visual viewport。先来看这两个概念的定义。

layout viewport的宽度和高度等于在最大限度缩小的模式下屏幕上所能显示的任何内容的尺寸。
visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。

viewport.PNG

我们可以把layout viewport想象成一个后花园，后花园的大小不会变（不太严谨，高度在设备旋转后会微变）
，且带有一个可移动的门，我们从这个门里所看到的景物就是visual viewport, 当我们走进（放大）这个门时，visual viewport就会变大，当我们远离（缩小）时，visual viewport就会变小。此外我们还可以通过移动这扇门来观察到后花园的每个角落。

此时，html不再像桌面浏览器中那样继承于viewport,移动浏览器厂商让html的宽度基于layout viewport这个固定大小的后花园，而设备屏幕则相当于我们的这个移动门，屏幕里的内容就是我们的visual viewport。显然，内容的尺寸会发生变化，visual viewport的大小也会随之变化。

度量layout viewport

document.documentElement.clientWidth/Height

度量visual viewport

window.innerWidth/Height

屏幕

依然是 screen.width/height

缩放比例

可以通过以screen.width除以window.innerWidth来获取它的值。

滚动距离

window.pageX/YOffset 表示visual viewport相对于layout viewport的位置。

html元素

document.documentElement.offsetWidth/Height可以获取html的宽高。

媒体查询

width/height使用layout viewport做为参照物，并且以CSS像素进行度量，device-width/height使用设备屏幕，并且以设备像素进行度量。

事件坐标

同桌面浏览器工作方式

viewport meta标签

意义：设置layout viewport的宽度。
度量单位：CSS像素。
铺垫辣么长，终于到了我们的重点了。假如我们创建一个简单的页面，且没有设置元素宽度，那么页面就会以拉伸的方式填满layout viewport，继而再在整个屏幕上显示，此时页面的内容将会非常小。因为大多数的layout viewport被设置为980px。viewport标签则提供了我们可以修改其宽度的接口。

1
<meta name="viewport" content="width=320">

通过将viewport（实为layout viewport）设置为320px,我们的html在移动端则基于320px的框架去布局，这样既可得到更人性化的结果。
1
<meta name="viewport" content="width=320, intial-scale=1">

intial-scale则表示页面首次被显示是可视区域的缩放级别，一般开始时都不会是1，其公式为：
1
当前缩放值 = ideal viewport宽度  / visual viewport宽度

这里的ideal viewport宽度为移动设备的屏幕宽度（以CSS像素定义），所有iphone的屏宽都为320px。因此initial-scale=1与width=320有一样的效果，但因为这两种写法在不同场景各有瑕疵，因此一般都同时使用，若值不同则采取较大方式显示。
总的来说，viewport是针对移动端设备为了对桌面站点更友好而设计的一种技巧性api，但不同的浏览器还是有着大大小小的差异，使用中还得根据需求采取不同的方式。

发表于 | 分类于

<meta>元素可提供有关页面的元信息（meta-information）,常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

属性 charset (HTML5)

charset定义了文档的字符编码。

1
<meta charset="utf-8">

属性 http-equiv

http-equiv相当于http头的作用，可以向浏览器传回一些有用的信息，以帮助正确的显示网页内容，其值为你想使用的参数。与其联合使用的属性值为content，content的值其实就是各个参数的变量。

1
<meta http-equiv="参数" content="变量">

http-equiv的主要参数值为以下几种：

Content-type

说明：规定文档的字符编码。
用法：

1
<meta http-equiv="Content-type" content="text/html;charset=utf-8">

Refresh

说明：让网页多久刷新自己，或多长时间自动链接到其他网页。
用法：

1
2
<meta http-equiv="Refresh" content="30">
<meta http-equiv="Refresh" content="5;Url=http://www.baidu.com">

Expires

说明：制定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
用法：

1
2
<meta http-equiv="Expires" content="0">
<meta http-equiv="Expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> //必须使用GNT时间格式，或数字，表示多少时间后过期。

Pragma

说明：禁止浏览器从本地缓存中调阅内容。
用法：

1
<meta http-equiv="Pragma" content="No-cach"> //默认为cach模式

说明：浏览器会通过从缓存中读取内容以提高显示速度。但若你想实时刷新你的页面，就需要禁用缓存。通常HTML文件没必要禁用缓存，但对于ASP页面，就可以禁用缓存，因为每次看到的页面都是服务器生成的，缓存就失去了意义。如果网页过期，那么存盘的cookie将被删除。
用法：

1
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

Window-target

说明：强制页面在当前窗口以独立页面显示，防止别人在框架里调用你的页面。
用法：

1
<meta http-equiv="Window-target" content="_top">

Pics-label

说明：在IE的Internet选项里有一项内容设置，可防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。
用法：

1
2
3
<meta http-equiv="Pics-label" content="PICS -1.1'http://www.rsac.org/ratingsv01.html'
	I gen comment 'RSACi North America Server' by 'inet@microsoft.com'
	for 'http://www.microsoft.com' on '1997.06.40T14:21 -0500' r(n0 s0 v0 I0)">

Page-Enter、Page-Exit

说明：页面载入和调出时的一些特效。
用法：

1
2
3
4
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)"> //blendTrans是动态滤镜的一种，产生渐隐效果。
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Enter" content="revealTrans(duration=x,transition=y)"> //Duration表示滤镜特效的持续时间，transition为滤镜类型。
<meta http-equiv="Page-Exit" content="revealTrans(duration=x,transition=y)">

MSThemeCompatible (XP主题)

说明：是否在IE中关闭 xp 的主题
用法：

1
<meta http-equiv="MSThemeCompatible" Content="Yes">

注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

IE6 (页面生成器)

说明：页面生成器generator，是ie6
用法：

1
<meta http-equiv="IE6" Content="Generator">

注意：用什么东西做的，类似商品出厂厂商。

Content-Script-Type (脚本相关)

说明：这是近来W3C的规范，指明页面中脚本的类型。
用法：

1
<meta http-equiv="Content-Script-Type" Content="text/javascript">

X-UA-Compatible

说明：X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。
用法：

1
2
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
//IE = edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

属性 name

name使用来描述网页的，与content共同来描述网页的内容，以便于搜索引擎机器人查找、分类。name值指定所提供信息的类型，如descrption、keyword、refresh等，也可以任意指定其他值。name的content指定实际内容，如：若指定name为level,则content可以为beginner、intermediate,或者advanced。

Keywords (关键字)

说明：为搜索引擎提供的关键字列表
用法：

1
<meta name="Keywords" Content="关键词1,关键词2，关键词3,关键词4,……">

注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。例如：
1
2
<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

Description (简介)

说明：Description用来告诉搜索引擎你的网站主要内容。
用法：

1
<meta name="Description" Content="你网页的简述">

Robots (机器人向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：

1
<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">

注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

Author (作者)

说明：标注网页的作者或制作组
用法：

1
<meta name="Author" Content="张三，abc@sina.com">

注意：Content可以是：你或你的制作组的名字,或Email

说明：标注版权
用法：

1
<meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">

Generator (编辑器)

说明：编辑器的说明
用法：

1
<meta name="Generator" Content="PCDATA|FrontPage|">

注意：Content=”你所用编辑器”

revisit-after (重访)

1
<meta name="revisit-after" CONTENT="7 days" >

viewport

说明：viewport是用来定义移动设备浏览器显示特性的元素。通常手机浏览器是把页面放在一个虚拟的窗口viewport中，我们通过设置页面在viewport中的大小及缩放比例则可以创建一个还不错的响应式布局。
用法：

1
2
3
4
5
6
7
8
//指定viewport宽度为320px
<meta name="viewport" content="width=320">
//指定页面最初缩放比例为1
<meta name="viewport" content="initial-scale=1"> 
//防止用户放大页面
<meta name="viewport" content="maximum-scale=1"> 
//默认模板
<meta name="viewport" content="width=device-width, initial-scale=1">

发表于 | 分类于

博客搭建步骤：

一、 安装Node.js
二、 安装Git
三、 配置GitHub
四、 安装配置Hexo

一、安装Node.js

  1. 根据系统选择相应的Node.js文件，下载并默认安装。
  2. 在cmd中输入 node -v 以及 npm -v 回车，若出现版本提示则正确。

二、 安装Git

  1. 下载Git安装文件，官方地址为Git官网下载，默认安装。
  2. 打开Git Bash出现黑色窗口，输入 git --version 出现版本提示则安装正确。

三、 配置GitHub

  1. 注册GitHub账户。
  2. 创建一个仓库，该仓库名为 your-username.github.io。
  3. 配置SSH。检查是否已经含有SSH可打开Git Bash，输入 cd ~/.ssh ，若进入该文件夹则证明含有秘钥，若没有进入该文件夹则证明需要重新设置。配置方法请手动Google。

四、 安装配置Hexo

  1. 找到一个合适的地方新建Hexo文件夹。
  2. 打开Git Bash进入到该目录下，输入 npm install hexo-cli -g 即可开始安装Hexo文件。若网速较慢可使用淘宝镜像，输入 cnpm install hexo-cli -g同样可以安装。若没有安装cnpm请自行google如何安装cnpm。
  3. 安装完成后，z在Git Bash 中初始化hexo文件夹，具体命令如下：
    1
    2
    $ hexo init
    $ cnpm install
  4. 接下来使用 hexo s命令便可以在本地查看自己博客的首页啦！访问地址为：http://localhost:4000/ 。

发表于 | 分类于

opacity

1
2
3
4
5
.alert1 {
	background: #000;
	opacity: 0.2;
	filter: alpha(opacity=20); /*proprietary IE code*/
}

效果：容器背景不透明度为0.2，文字不透明度为0.2，其子元素皆继承其透明特性。

rgba

1
2
3
.alert2 {
	background-color: rgba(0,0,0,0.2);
}

效果：容器背景色不透明度为0.2，文字不透明度为1，其子元素不继承该特性。

对比图

image