web前端基础知识整理
1.we标准的理解
(1)Web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套（可提高搜索引擎搜索效率，SEO优化）。
(2)使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。
(3)样式与标签的分离，使结构与表现分离，更少的代码和组件， 从而降低维护成本、改版更方便 。
(4)不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性 。
2.前端页面的三层结构及其作用
结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建，对网页内容的语义含义做出了描述。
表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
3.JS延迟加载的方法
(1)将js文件的引入放到页面的底部
(2)使用setTimeout
<script type=”text/javascript” src=”" id=”mjs”></script> <script type=”text/javascript”> setTimeout(“document.getElementById(‘mjs').src='defer.js'; “,3000);//延时3秒 </script>
(3)Google帮助页面的推荐方案
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
4.JS定义/获取非行间样式
<html>
<head>
<meta charset="utf-8" />
<style>
*{ text-align:center;}
input{ margin-top:30px; padding:10px 20px;}
#div1{ width:500px; height:300px; background:red; margin:10px auto;}
</style>
</head>
<body>
<input type="button" value="style" id="btn" />
<div id="div1"></div>
<script>
//获取非行间css样式
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
//为对象写入/获取css样式
function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式
return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数
}else{
if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值
obj.style[attr] = value;
};
};
};
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(getStyle(oDiv,"height"));
css(oDiv,"background","green");
alert(css(oDiv,"width"));
};
};
</script>
</body>
</html>
5.前端优化（提高网页的加载速度）
雅虎35条 link:http://www.tuicool.com/articles/J3uyaa，http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html
(1)[内容]尽量减少HTTP请求数
(2)[服务器]使用CDN（Content Delivery Network）
(3)[服务器]添上Expires或者Cache-Control HTTP头
(4)[服务器]Gzip组件
(5)[css]把样式表放在顶部
(6)[js]把脚本放在底部
(7)[css]避免使用CSS表达式
(8)[js, css]把JavaScript和CSS放到外面
(9)[内容]减少DNS查找
(10)[js, css]压缩JavaScript和CSS
(11)[内容]避免重定向
(12)[js]去除重复脚本
(13)[服务器]配置ETags
(14)[内容]让Ajax可缓存
(15)[服务器]尽早清空缓冲区
(16)[服务器]对Ajax用GET请求
(17)[内容]延迟加载组件
(18)[内容]预加载组件
(19)[内容]减少DOM元素的数量
(20)[内容]跨域分离组件
(21)[内容]尽量少用iframe
(22)[内容]杜绝404
(23)[cookie]给Cookie减肥
(24)[cookie]把组件放在不含cookie的域下
(25)[js]尽量减少DOM访问
(26)[js]用智能的事件处理器
(27)[css]选择 舍弃@import
(28)[css]避免使用滤镜
(29)[图片]优化图片
(30)[图片]优化CSS Sprite
(31)[图片]不要用HTML缩放图片
(32)[图片]用小的可缓存的favicon.ico（P.S. 收藏夹图标）
(33)[移动端]保证所有组件都小于25K
(34)[移动端]把组件打包到一个复合文档里
(35)[服务器]避免图片src属性为空
6.冒泡事件与捕获事件
DOM事件标准定义了两种事件流，捕获和冒泡。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。W3C组合使用这两种方法，并且大多数新浏览器都遵循这两种事件流方式。
事件传播——冒泡与捕获
默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时，事件将跟随着该节点，继承各自的父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
冒泡事件的作用：
（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
7.window.onload和$(function(){})区别
(1)window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个
(2)$(function(){})：在Dom节点创建完成后执行，如果有多个定义则依次执行
可以看出$(function(){})在window.onload前执行
比如：页面中只有一个img标签，当img节点创建完后就会执行$(function(){})中的代码，当img的src指定的图片完全加载完后才会触发window.onload事件。
8.渐进增强和优雅降级
渐进增强：一开始构建站点的基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级：一开始就构建站点的完整功能，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
9.jQuery中.bind() .live() .delegate() .on()的区别
$(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替 $(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本； $(selector).on(event,childselector,data,function)//jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).bind("click",data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
$('a').bind('click', function() { alert("That tickles!") });
当我们在a 上面点击的时候，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件。
/* The .bind() method attaches the event handler directly to the DOM
element in question ( "#members li a" ). The .click() method is
just a shorthand way to write the .bind() method. */
$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );
.click(), .hover()...这些非常方便的事件绑定，都是bind的一种简化处理方式。对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式
- 它会绑定事件到所有的选出来的元素上
- 它不会绑定到在它执行完后动态添加的那些元素上
- 当元素很多时，会出现效率问题
- 当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题
2、.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。当handler在执行的时候，因为有冒泡的参与，确实会有一些延迟，但是绑定的时候是特别的快。和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件，而只在document上绑定一次就可以了。尽管这个不是最快的方式，但是确实是最少浪费的。
优点：
- 这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定
- 那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上
- 你可以在document ready之前就可以绑定那些需要的事件
缺点：
- 从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。
- Chaining没有被正确的支持
- 当使用event.stopPropagation()是没用的，因为都要到达document
- 因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时，会非常慢
- 当发生事件的元素在你的DOM树中很深的时候，会有performance问题
3、.delegate()则是更精确的小范围使用事件代理，性能优于.live()。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
- 你可以选择你把这个事件放到那个元素上了
- chaining被正确的支持了
- jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。
- 可以用在动态添加的元素上
缺点：
- 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。
1.对标签内的属性使用attr来读取和设置。
2.对DOM对象固有的一些属性，使用prop获取和设置(checkbox)。
3.如果获取自定义属性， 也可以使用.data()
