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()