施小喵

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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。
2link引用CSS时,在页面载入时同时加载@import需要页面网页完全载入以后加载3link是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> 

第四种:
 async 属性(缺点是不能控制加载的顺序)
<script src="" async="true"/>

 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脚本置于底部

因此对于脚本提速,我们可以考虑以下方式,

  • 把脚本置底,这样可以让网页渲染所需要的内容尽快加载显示给用户。
  • 现在主流浏览器都支持defer关键字,可以指定脚本在文档加载后执行。
  • HTML5中新加了async关键字,可以让脚本异步执行。

  第十条:精简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. 【附加题】介绍一个你做过的自认为最有挑战性的项目,可以但不限从以下方面进行描述:用到了哪些新技术?挑战点在哪里?过程中和结果的收获是什么?

posted on 2015-09-27 21:12  施小喵  阅读(249)  评论(0编辑  收藏  举报