2014 百度前端2面

2014 百度前端二面

今天上午去了二面，整体自我感觉还行，但后来又有大神告诉我，自己的感觉和面试官的感觉是不一样的，我心里又没底了。

不管怎样？ 如果这次失败，我就真的要结束自己的前端生涯了，虽然我是那么的喜欢前端，也是那么的希望可以通过自己的努力达到“七月前端”等牛人的水准。但是，工作后，肯定要先专于一样了，念书时，我可以做前端，做后台，做android，写c++,java,c#,.net,python，工作后，希望从事的那方面做到自己的最好。

昨晚收到了华为邀请今晚参加签约座谈会的通知，今天听说是要直接签三方，国内我认为互联网做的最好的是百度，物联网做的最好的是华为，我肯定是要去其中一家的（比较倾向于百度，毕竟是做自己最喜欢的事情，感觉是不一样的。）明后天签三方，我尽量晚去，只希望百度能有个自己期望的结果。

今天面试的也是位哥哥，很帅，笑起来很好看。目前总共就面了华为和百度两家，华为的面试官都是叔叔级别的，百度的都是帅哥哥级别的。

大致题目回忆如下：

1  介绍自己做过的项目：

首先给哥哥看了下自己做的网站和Html5 APP（算是圆了昨天的“遗愿”），碰巧那位哥哥也参加了百度机器知我心大赛，好巧。他就看了看，也没有细问，因为我做的那网站肯定水平不及百度的。。

2  Ajax 原生js实现：

开始想都没想，因为ajax用的太多了，直接就把$.ajax(){....}一通说了出来，哥哥问：你不是经常用原生js写代码的么，我才发现，因为Jquery封装的确实比较好，平时都用它了，还真没有想过写原生的，我就说了个 try new XMLHttpreuqest = {...}  事实证明，我们学东西，不只要学会使用它，这只是一线IT民工做的东西，更要深究其原理，以后不管学什么都要这样！再来深入复习一下：

转自(http://www.cnblogs.com/waynechan/archive/2013/03/07/2947080.html);
什么是Ajax
我们要使用某些技术来实现一些功能的时候，势必要了解这项技术，Ajax这东西其实不是新技术，而是整个多项web开发技术而形成的，Ajax(Asynchoronous JavaScript and XML)即异步Javascript和XML，指一种创建交互式应用的网页开发技术有机的使用一系列相关的技术：
(1)Web标准XHTML+CSS的表示；
(2)使用DOM进行动态显示及交互；
(3)使用XML和XSLT进行数据交换和相关操作；
(4)使用XMLHttpRequest（异步对象）进行异步数据查询，检索；
普通网页请求方式和Ajax请求方式的区别
我们简单了解到Ajax是怎么一回事之后，那为什么要使用Ajax呢？与普通网页的请求方式又有什么区别呢？我们普通网页请求的方式，当我们点击网页上的按钮，或者其他方式请求到服务器的时候，在客户端浏览器这边是处于空白不可操作的状态，因为浏览器要忙着帮我们请求服务器，所以，这会让用户很不好的用户体验了，以Ajax请求方式在客户端浏览器这边会有一个异步对象(XMLHttpRequest)帮我们做请求服务器的工作，至于用户依然可以操作浏览器。
我们来一个比喻吧：当你在宿舍打Dota的时候，你肚子饿了，如果以普通网页请求的方式是，你跑去饭堂吃饭，所以这盘游戏就中止在这里了，如果以Ajax的方式去打饭呢？你就需要一个异步对象XMLHttpRequest,你宿舍的同学就是这个异步对象了，你呼唤他取饭堂帮你打饭，但是你依然可以继续你的Dota。
图片：
普通网页请求回执过程：
http://images.cnitblog.com/blog/257851/201303/06223247-47861ace1e994eaa961b32b6f8eec77a.png
AJAX异步请求过程
http://images.cnitblog.com/blog/257851/201303/06223304-6aec940de558425c87ed50401d83c702.png
普通网页请求模式是由浏览器请求服务器，所以当请求过程服务器处理的时候，浏览器这边无法进行其他操作，页面是刷新一次的，而使用Ajax，则将跟服务器打交道的事情交给了Ajax引擎，浏览器与用户交互不受影响！

开始Ajax之旅：XMLHttpRequest
创建XMLHttpRequest
不同浏览器以及IE浏览器不同版本创建XMLHttpRequest的方法都不同，我们可以使用try...catch的方式来创建适合不同浏览器的对象；你只需知道当我们为某一类浏览器创建异步对象时，如果失败catch到异常就换另一种方法来创建，直到为当前浏览器创建到异步对象XMLHttpRequest
function CreateXmlHttp()
{
   var xhrobj = false;
   try{
       xhrobj = new ActiveXObject("Msxml12.XMLHTTP");//ie msxml3.0+
   }catch(e)
   {
     try{
       xhrobj = new ActiveXobject("Microsoft.XMLHTTP");//ie msxml 2.6
     }catch(e2)
     {
       xhrobj = false;
     }
   }
   if(!xhrobj && typeof XMLHttpRequest != 'undefined')
   {
     xhrobj = new XMLHttpRequest();
   }
   return xhrobj;
}

var xhr = CreateXmlHttp();
window.onload = function()
{
  Get();
}
function Get()
{
//1 设置请求方式，目标，是否异步
//1.1 Get方式
xhr.open("GET","GetAreaByAjax.ashx?isAsia=1",true);
==========如果是post方式，请按下面的进行设置=======
//1.2 post方式，如果是Post方式，还需要其他一些设置==
xhr.open("POST"，"GetAreaByAjax.aspx",true);
//1.2.1 设置HTTP的输出内容类型为：application//x-www-form-urlencoded
xhr.setRequestHreader("Content-Type","application/x-www-form-urlencoded");
//1.2.2 设置浏览器不使用缓存，服务器不从缓存中找，重新执行代码，而且服务器返回给浏览器的时候，告诉浏览器也不要保存缓存。
xhr.setRequestHear("If-Modefied-Since","0");

//2 设置回调函数
xhr.onreadystatechange = watching; //watching是方法名

//3 发送请求
xhr.send(null);
xhr.send("isAjax=1&na=123");
}

//回调函数
function wacthing()
{
   if(xhr.readyState == 4)
   {
      if(xhr.status == 200)
          {
         var res = xhr.reponseText; //获取服务器返回的字符串
         alert(res);
        }
   }
}

这里附加Javascript操作DOM的技术应用点：
(1) Ajax评论的时候，脚本操作Dom增加 Tabel节点，这样子就省去了从服务器查询绑定的过程了，高效，用户体验又好，以下代码写在回调函数中
var res = xhr.responseText;  //获得从服务器返回的字符串
var plT = document.getElementById("plTable");
var newRow = plT.insertRow(plT.rows.length-1);  //在表格的最后一行新增一行
var nTd1 = newRow.insertCell();
var nTd2 = newRow.insertCell();
nTd1.innerHTML = "ID";
nTd2.innerHTML = document.getElementById("txtPinglun").value;

3 给定一棵二叉树，写出：前序，后序，中序遍历。（这个简单，当时还直接开始写代码，被哥哥发现了，说不用 - -！）

4 DOM树及DOM树的操作 （这个没答上来，平时确实没用过）

转自：http://developer.51cto.com/art/201009/228303.htm

你对HTML DOM树的概念是否了解，这里和大家分享一下，DOM是文档对象模型(Document Object Model），是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，单纯的 Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为 DHTML本质上就是操作DOM树。

DOM树

DOM树的根统一为文档根―document，DOM既然是树状结构，那么他们自然有如下的几种关系:

◆根结点(document)

◆父结点(parentNode)

◆子结点(childNodes)

兄弟结点兄弟结点

(sibling)(sibling)
例子：

假设网页的HTML如下

<html> 
<head> 
<title>never-online'swebsite</title> 
</head> 
<body> 
<div>tutorialofDHTMLandjavascriptprogramming</div> 
</body> 
</html> 
 

我们参照树的概念，画出该HTML文档结构的DOM树：

             html
           body       head
       divt               itle
     文本                     文本

从上面的图示可以看出html有两个子结点，而html就是这两个子节点的父结点，head有节点title，title下有一个文本节点，doby下有节点div，div下有一个文本节点。

操作DOM树

开篇已经说过，DHTML本质就是操作DOM树。如何操作它呢？假设我要改变上面HTML文档中div结点的文本，如何做？

示例代码：

<html> 
<head> 
<title>never-online'swebsite</title> 
<script> 
functionchangedivText(strText){  
varnodeRoot=document;//这个是根结点  
varnodeHTML=nodeRoot.childNodes[0];//这个是html结点  
varnodeBody=nodeHTML.childNodes[1];//body结点  
varnodeDiv=nodeBody.childNodes[0];//DIV结点  
varnodeText=nodeDiv.childNodes[0];//文本结点'  
nodeText.data=strText;//文本节点有data这个属性，  
因此我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了  
}  
</script> 
</head> 
<body> 
<div>tutorialofDHTMLandjavascriptprogramming</div> 
<inputonclickinputonclick="changedivText('change?')"
type="button"value="change"/> 
</body> 
</html> 
 

从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。

注：

1.跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。

2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明。

转自：wenku.baidu.com/view/66a42f34f111f18583d05a25.html

1. DOM的特殊元素
   body元素可以通过document.body访问：var body = document.getElementsByTagName("body")[0]；
   文档中所有的表单可以通过document.forms访问；
   所有的图片都可以通过document.images来访问。
2. 访问关联节点
   
   • node.childNodes   指定节点的所以子节点，包括文本节点和所有其他元素；
   • node.firstChild   指定节点的第一个子节点；
   • node.lastChild   指定节点的最后一个子节点；
   • node.parentNode   指定节点的上级节点；
   • node.nextSibling   指定节点的下一个兄弟节点；
   • node.previousSibling   指定节点的上一个兄弟节点。
   注意：对于一些文本描述的DOM结构（如HTML文件），一些浏览器会在元素节点之间插入一些空白节点。空白节点实际上就是文本节点，不过只包含一些空格，或者tab，换行符。使用这些元素只是为了保持原来的文件中的书写格式。
   通过上面提到的属性进行DOM节点遍历时，一定要考虑到空白节点。通常，这意味着需要仔细检查返回来的元素，确保那不是一个只用于分隔的空白节点。以下部分要特别注意：
   
   • <ul><li id="star1">123456</li><li id="star2">abcdef</li></ul>这种情况下，要找到id为star2节点就可以通过调用document.getElementById("star1").nextSibling找到；//因为没有空格。
   • <ul>     <li id="star1">123456</li>      <li id="star2">abcdef</li>   </ul>这种情况下，要找到id为star2节点就可以通过调用document.getElementById("star1").nextSibling.nextSibling找到；//原因就是因为中间多了空格。也就默认多了一个text节点。
   有两种简单的方法来判别一个节点是元素节点还是文本节点：
   
   • 文本节点的属性nodeName的值总会是“#text”，相反地，一个元素节点的nodeName则会反应出该元素的类型。
   • 直接检查nodeType属性，元素节点的该属性的值是1，而文本节点的该属性值则为3.
     
3. 创建元素节点和文本节点
   主要用到的东西有：
   
   • var newa = document.createElement("a");   //创建元素节点
     
   • var text = document.createTextNode("什么是什么");   //创建文本节点，内容为“什么是什么”
   • newa.appendChild(text);   //把文本节点加入到a元素节点内。这样text就变成a节点的子节点。
   • var parent = document.getElementById("someId");   //获取要插入的父节点
   • parent.appendChild(newa);   //插入到父节点中，结束。
   对于上面的操作，默认是插入到这个父节点的最后一位。
   还有另外两种：放到某节点之前以及替换掉原有的某个节点。
   
   • 放到某节点之前：首先找到要放到它之前的那个节点。然后找到这个节点的父节点，最后使用：parent.insertBefore(newNode, existingNode)；
   • 替换掉原有的某个节点：首先找到要替换掉的节点，然后找到这个节点的父节点，最后使用：parent.replaceChild(newNode, existingNode);
4. 改变元素类型
   这个是为了有时需要完全改变一个元素的类型，但却还有保留原有的子节点结构。大致上有两种方式：
   
   • 克隆子节点的操作：
     for(var i = 0; i < node.childNodes.length; i++){
     var clone = node.childNodes[i].cloneNode(true);
     newa.appendChild(clone);
     }
     node.parentNode.replaceChild(newa, node);
     
   • 直接把段元素的子节点移入新的元素中：
     while (node.childNodes.length > 0){
     newa.appendChild(node.firstChild);
     }
     node.parentNode.replaceChild(newa , node);
   注意：
   当DOM中发生变化时，集合中的元素会自动更新――即使在变化发生之前已经将集合复制到一个变量中。所以，如果删掉了DOM中的某个元素，而该元素属于一个正在使用的集合，那么集合中的该元素也会被删除。这会改变集合元素的数目，以及元素的序号。
   
5. 删除一个元素节点或者文本节点
   parent.removeChild(node);
   如果想删除这个节点但又想保留这个节点内的子节点，则有：
   while (parent.childNodes.length > 0){
   parent.insertbefore(parent.childNodes[0], parent);
   }
   parent.parentNode.removeChild(parent);
   
6. 读写元素属性和值
   node.getAttribute("title");
   node.setAttribute("title","it is a title");
   注意：元素属性可以被直接访问，如上面的title属性。可以用node.title来获得或者改变。而且对于IE6及以下版本来说都是很有必要的，因为在那些个浏览器下，通过setAttribute所做的改变不能造成到该元素的实际显示变化。
   对于值的话，对于IE6用的是node.text，对于其他的浏览器来说用的是node.textContent。不过当node本身还有子节点的话，那么讲话返回所有子节点的内容。而当使用node.innerHTML时，诚然几乎所以的浏览器都支持。但如果node为父节点的话，那么返回父节里面的所有东西，包括标签。
7. 获得拥有特定属性值的所有元素

   DOM树 --Loading  

   2010-07-10 09:51:21|  分类：JavaScript部分 |字号 订阅
8. DOM的特殊元素
   body元素可以通过document.body访问：var body = document.getElementsByTagName("body")[0]；
   文档中所有的表单可以通过document.forms访问；
   所有的图片都可以通过document.images来访问。
9. 访问关联节点
   
   • node.childNodes  指定节点的所以子节点，包括文本节点和所有其他元素；
   • node.firstChild   指定节点的第一个子节点；
   • node.lastChild   指定节点的最后一个子节点；
   • node.parentNode   指定节点的上级节点；
   • node.nextSibling   指定节点的下一个兄弟节点；
   • node.previousSibling   指定节点的上一个兄弟节点。
   注意：对于一些文本描述的DOM结构（如HTML文件），一些浏览器会在元素节点之间插入一些空白节点。空白节点实际上就是文本节点，不过只包含一些空格，或者tab，换行符。使用这些元素只是为了保持原来的文件中的书写格式。
   通过上面提到的属性进行DOM节点遍历时，一定要考虑到空白节点。通常，这意味着需要仔细检查返回来的元素，确保那不是一个只用于分隔的空白节点。以下部分要特别注意：
   
   • <ul><li id="star1">123456</li><li id="star2">abcdef</li></ul>这种情况下，要找到id为star2节点就可以通过调用document.getElementById("star1").nextSibling找到；//因为没有空格。
   • <ul>     <li id="star1">123456</li>      <li id="star2">abcdef</li>   </ul>这种情况下，要找到id为star2节点就可以通过调用document.getElementById("star1").nextSibling.nextSibling找到；//原因就是因为中间多了空格。也就默认多了一个text节点。
   有两种简单的方法来判别一个节点是元素节点还是文本节点：
   
   • 文本节点的属性nodeName的值总会是“#text”，相反地，一个元素节点的nodeName则会反应出该元素的类型。
   • 直接检查nodeType属性，元素节点的该属性的值是1，而文本节点的该属性值则为3.
     
10. 创建元素节点和文本节点
    主要用到的东西有：
    
    • var newa = document.createElement("a");   //创建元素节点
      
    • var text = document.createTextNode("什么是什么");   //创建文本节点，内容为“什么是什么”
    • newa.appendChild(text);   //把文本节点加入到a元素节点内。这样text就变成a节点的子节点。
    • var parent = document.getElementById("someId");   //获取要插入的父节点
    • parent.appendChild(newa);   //插入到父节点中，结束。
    对于上面的操作，默认是插入到这个父节点的最后一位。
    还有另外两种：放到某节点之前以及替换掉原有的某个节点。
    
    • 放到某节点之前：首先找到要放到它之前的那个节点。然后找到这个节点的父节点，最后使用：parent.insertBefore(newNode, existingNode)；
    • 替换掉原有的某个节点：首先找到要替换掉的节点，然后找到这个节点的父节点，最后使用：parent.replaceChild(newNode, existingNode);
11. 改变元素类型
    这个是为了有时需要完全改变一个元素的类型，但却还有保留原有的子节点结构。大致上有两种方式：
    
    • 克隆子节点的操作：
      for(var i = 0; i < node.childNodes.length; i++){
      var clone = node.childNodes[i].cloneNode(true);
      newa.appendChild(clone);
      }
      node.parentNode.replaceChild(newa, node);
      
    • 直接把段元素的子节点移入新的元素中：
      while (node.childNodes.length > 0){
      newa.appendChild(node.firstChild);
      }
      node.parentNode.replaceChild(newa , node);
    注意：
    当DOM中发生变化时，集合中的元素会自动更新――即使在变化发生之前已经将集合复制到一个变量中。所以，如果删掉了DOM中的某个元素，而该元素属于一个正在使用的集合，那么集合中的该元素也会被删除。这会改变集合元素的数目，以及元素的序号。
    
12. 删除一个元素节点或者文本节点
    parent.removeChild(node);
    如果想删除这个节点但又想保留这个节点内的子节点，则有：
    while (parent.childNodes.length > 0){
    parent.insertbefore(parent.childNodes[0], parent);
    }
    parent.parentNode.removeChild(parent);
    
13. 读写元素属性和值
    node.getAttribute("title");
    node.setAttribute("title","it is a title");
    注意：元素属性可以被直接访问，如上面的title属性。可以用node.title来获得或者改变。而且对于IE6及以下版本来说都是很有必要的，因为在那些个浏览器下，通过setAttribute所做的改变不能造成到该元素的实际显示变化。
    对于值的话，对于IE6用的是node.text，对于其他的浏览器来说用的是node.textContent。不过当node本身还有子节点的话，那么讲话返回所有子节点的内容。而当使用node.innerHTML时，诚然几乎所以的浏览器都支持。但如果node为父节点的话，那么返回父节里面的所有东西，包括标签。
14. 获得拥有特定属性值的所有元素
    

（5） CSS 左侧浮动 右侧固定（见一面） 如果写到（6）表明我这个是真的深入理解了 布局真的是我的弱项 若能继续走前端的路 我一定要着重加强。

（6） HTML5新增标签

<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurement within a
predefined range
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby
annotations的解释
<ruby> 标记定义 ruby annotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频

（7）position属性及含义

 

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

 

（8）HTML5新增的这些标签有什么用？

         更好的web语义化

（9）为什么要web语义化

 

我看一些招聘要求上都有"熟悉Web语义化"这一词和"理解/熟悉/精通web标准".而标签语义化就是web标准的一部分,所以我就把自己以前发在博客园的一篇贴子小修改一下,再贴过来...希望前端入门的er们能知道有这么个东西.

记得有一次恐怖的经历,那个页面嵌套了不知是十几层还是几十层div.让我看的时候立马头晕...其中有些能用span标签,能用p标签的,也用div.能用h1,hx的也用div标签.真是让人很无语啊..这个时候我多么希望该开发者有点"语义化标签"的概念和行动啊..那么

一：(理论)语义化标签是什么？
语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
<table>
 
    <tr>
 
        <td>消费项目</td>
 
        <td>消费金额</td>
 
    </tr>
 
    <tr>
 
        <td>吃饭</td>
 
        <td>20元</td>
 
    </tr>
 
</table>

你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
<table>
 
    <caption>花费记账</caption>
 
    <thead>
 
        <tr>
 
            <th>消费项目</th>
 
            <th>消费金额</th>
 
        </tr>
 
    </thead>
 
    <tbody>
 
        <td>吃饭</td>
 
        <td>20元</td>
 
    </tbody>
 
</table>

这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题;
<thead>:一表格的表头;
<th>:表的某一列的列头。

再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>

你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>

那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:left;margging-left:50px;}
 
#right{float:right;margin-top:100px;}
 
<div id="left">content..</div>
 
<div id="right">content..</div>

这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:right;margin-left:50px;}
 
#right{float:left;margin-top:100px;}

那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id="main">content..</div>
 
<div id="sidebar">content..</div>

那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.


二：(理论)语义化标签怎么样？
1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机，个人助理等）。

三：(行动)语义化标签怎么办？
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。

那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。

这只是我的一点看法，希望抛砖引玉一下，看过的人把自己的想法也说出来，让大家知道你的想法，也是完善此文。

 

（10）LRU cache

 

  (11)  js实现图片预加载（最好也用上 cache）

          可以用上callback回调函数

          代码如下:

当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？
IE、Opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？
FF、Chrom中，每点击一次加载一张该图片。

稍微修改下：

运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件！

联想一下 Image 对象的一些属性看看，complete、readyState(IE专属值[uninitialized,complete]) （为防止缓存影响效果请更换图片名称！）

经过以上测试，可以看出一些不同点，对于 complete 属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现一致！
至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？
众所周知，从缓存里加载东西的速度是很快的，那么在
...
Img.src = isrc;
Img.onload = ...
...
的过程中，难道 IE、Opera 加载的速度快到，来不及追加事件？

这回加载一张根本不存在的图片看看效果：

可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲，IE、Opera表现正常，complete 始终为 false ；IE的 readyState 始终为uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了！如果换一张从来没有加载过的图片，FF和Chrom 的行为就一致了，都是一开始加载时， Imgttmt.complete 值为false， 之后为 true！
测试的过程中还发现源码天空，脚本的执行顺序的确会影响到类似于 onload 等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于 javascript 这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。