1. 列举你所知道的HTML行内元素、块级元素和空(void)元素。(10分)
行内元素： <a> , <b> ,<i> ,<input>,<span><img> 块级元素： <div> , <ul>, <li> ,<ol>,<table>,<p> 空元素(void)：(没有内容的 HTML 元素被称为空元素) <br>，<input>，<img>
2. 请简述CSS加载方式link和@import的区别。(8分)
答：link和@import都是css文件的外部引入的方式
两者的区别：
1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
3. 请简述javascript延迟加载的方式。(10分)
第一种： settimeout(function(){ var js = document.createElement("script"); js.type = "text/javascript"; js.src = "new.js"; }, numuber); 或者： <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 第二种： document.write <script language="javascript" type="text/javascript"> function include(script_filename) { document.write('<' + 'script'); document.write(' language="javascript"'); document.write(' type="text/javascript"'); document.write(' src="' + script_filename + '">'); document.write('</' + 'script' + '>'); } var which_script = '1.js'; include(which_script); </script> 第三种：（按需加载，将js先下载到一个标签中，再在需要执行的执行） 在需要JS的地方插入以下代码： <span id=L4EVER>LOADING...</span> 然后在页面最低端插入 <SPAN class=spanclass id=AD_L4EVER><script src="1.js"></script></SPAN> js代码： <script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>
第四种：
4. 下列代码执行后，x、y、z的值各为多少？(12分)
var x=1,y=z=0;
function add(n){
return n=n+1;
}
y= add(x);
function add(n){
return n=n+3;
}
z=add(x);
x的值是：1
y的值是：4
z的值是：4
点评：这道题考察两点
第一： 重名函数会覆盖，取最后一个为准，不关乎位置，因为js引擎有着声明提升的功能
第二：函数的参数传递是值传递
具体可以参见：http://www.cnblogs.com/TomXu/archive/2012/02/08/2341439.html
按值传递：参数的值是调用者传递的对象值的拷贝(copy of value），函数内部改变参数的值不会影响到外面的对象（该参数在外面的值），
一般来说，是重新分配了新内存(我们不关注分配内存是怎么实现的——也是是栈也许是动态内存分配），该新内存块的值是外部对象的拷贝，并且它的值是用到函数内部的。
5. 试从域名解析原理的角度简单分析，域名劫持是怎么发生的？有什么危害？(20分)
DNS(domain name system)域名解析发生的过程是：
客户端输入网址，浏览器开启线程发送域名请求给DNS(域名解析服务器)，dns通过遍历查询dns数据库，来解析此域名对应的ip，然后反馈至浏览器客户端，客户端 通过ip与对方建立数据连接。
如果dns服务把你想要解析的地方，解析为错误的另一个地方，例如www.baidu.com引导至www.pianni.com，这个就是DNS劫持(域名劫持)。
域名劫持就是在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则直接返回假的IP地址或者什么也不做使得请求失去响应，其效果就是对特定的网址不能访问或访问的是假网址。
6. 列举至少5种前端性能优化的具体方法，简要说明理由。(20分)
前端性能优化的方法有很多：（yahoo团队还提出了黄金定律35条） 详述几个常见的也容易记住的： 第一条：减少http请求次数 具体实施： (1)捆绑文件，将多个样式表文件捆绑成一个文件，以此减少文件的下载次数。 例如在asp.net中可以使用scriptManager , asp.net MVC中的Bundling. (2)css sprites,就是讲多个图片拼成一幅图片，然后通过css来控制在什么地方具体显示这整张图片的什么位置。 css sprites实现原理：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
第二条：减少DNS查询(缓存再本地系统和浏览器中)
DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。
第三条：避免页面跳转
第四条：缓存Ajax
Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
- 添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
- 压缩回复内容
- 减少dns查询
- 精简javascript
- 避免跳转
- 配置Etags
第五条：延迟加载
js下载会阻塞其他下载，Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
第六条：减少Cookie大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，
- 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
- 将cookie的大小减到最小
- 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
- 设置合适的过期时间，比较长的过期时间可以提高响应速度。
第七条：将CSS样式表置顶
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。
第八条：用<link>代替@import
避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。@import引入css文件，要等页面全部加载完，才引入，浏览器会拒绝渲染已经下载的网页。
第九条：将Javascript脚本置于底部
因此对于脚本提速，我们可以考虑以下方式，
第十条：精简js、css代码
第十一条：减少DOM访问
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意
- 缓存已经访问过的元素
- Offline更新节点然后再加回DOM Tree
- 避免通过Javascript修复layout
第十二条：使用智能事件代理
这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。
比如一个div中10个按钮都需要事件句柄，那么我们可以将事件放在div上，在事件冒泡过程中捕获该事件然后判断事件来源。
7. 用js实现如下功能，将给定的数字转化成千分位的格式，如把“10000”转化成“10,000”，并考虑到性能方面的因素。(20分)
//法一:这个最简单也最好理解，将num字符串化，然后在3+4n的位置上插入","这个方法不好，因为每次一旦插入了，则list的长度是变化的
//当然还要注意尾巴的处理问题，性能上不够快
function parseNum(num){ var list = new String(num).split('').reverse(); //从后往前来数的思想一定要有，很多问题从后往前会更简单 for( var i = 0; i < list.length; i++ ) { if(i % 4 == 3){ list.splice(i, 0, ','); } } return list.reverse().join(''); } console.log(parseNum(10000121213)); //法二：这个应该是最快的吧，但是这个正则表达式，表示看不懂，不会呀！ function parseNum(num){ var reg=/(?=(?!)(d{3})+$)/g; return String(num).replace(reg, ','); } console.log(parseNum(10000121213)); //法三 ： 这个方法挺好的，3个3个切（用正则/d{3}/g），当然是反方向(reverse(),
//注意reverse()方法是Array的方法)的切，然后再用数组的join方法，当然也要注意要先处理小尾巴！
//最后再reverse()
String.prototype.strReverse = function(){ return this.split('').reverse().join(''); } function parseNum(num){ var str_num = String(num); var len = str_num.length; var tail = str_num.slice(0, len % 3); //处理小尾巴 tail = tail.strReverse(); var reg=/d{3}/g; var list = str_num.strReverse().match(reg); list.push(tail); var res = list.join(',').strReverse(); return res; } console.log(parseNum(10000121213)); //法四 : 这个哇偶！ 原来数组Arr也有slice的功能 function parseNum(num){ var list = String(num).split('').reverse(); var temp = []; for(var i = 0, len = list.length; i < len; i = i + 3){ temp.push(list.slice(i, i + 3).join('')); } return temp.join(',').split('').reverse().join(''); } console.log(parseNum(10000121213));
8. 【附加题】介绍一个你做过的自认为最有挑战性的项目，可以但不限从以下方面进行描述：用到了哪些新技术？挑战点在哪里？过程中和结果的收获是什么？