Web前端开发笔试题和面试题答案(四)

　　25，请设计一套方案，用于确保页面中JS加载完全。

　　var n = document.createElement("script");

　　n.type = "text/javascript";

　　//以上省略部分代码

　　//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)

　　if(ua.ie){

　　n.onreadystatechange = function(){

　　var rs = this.readyState;

　　if('loaded' === rs || 'complete'===rs){

　　n.onreadystatechange = null;

　　f(id,url); //回调函数

　　}

　　};

　　//省略部分代码

　　//safari 3.x supports the load event for script nodes(DOM2)

　　n.addEventListener('load',function(){

　　f(id,url);

　　});

　　//firefox and opera support onload(but not dom2 in ff) handlers for

　　//script nodes. opera, but no ff, support the onload event for link

　　//nodes.

　　}else{

　　n.onload = function(){

　　f(id,url);

　　};

　　}

　　26，js中如何定义class,如何扩展prototype?

　　Ele.className = “”; //在css中定义，形式如下：. {…}

　　A.prototype.B = C;

　　A是某个构造函数的名字

　　B是这个构造函数的属性

　　C是想要定义的属性的值

　　27，如何添加html元素的事件,有几种方法.

　　(1) 为HTML元素的事件属性赋值

　　(2) 在JS中使用ele.on = function() {…}

　　(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

　　28，documen.write和 innerHTML的区别

　　document.write只能重绘整个页面

　　innerHTML可以重绘页面的一部分

　　29，多浏览器检测通过什么?

　　(1) navigator.userAgent

　　(2) 不同浏览器的特性，如addEventListener

　　30，js的基础对象有那些, window和document的常用的方法和属性列出来

　　String,Number,Boolean

　　Window:

　　方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

　　属性：name,parent,screenLeft,screenTop,self,top,status

　　Document

　　方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

　　属性：cookie,doctype,domain,documentElement,readyState,URL,

　　31，前端开发的优化问题

　　(1) 减少http请求次数：css spirit,data uri

　　(2) JS，CSS源码压缩

　　(3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

　　(4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

　　(5) 用setTimeout来避免页面失去响应

　　(6) 用hash-table来优化查找

　　(7) 当需要设置的样式很多时设置className而不是直接操作style

　　(8) 少用全局变量

　　(9) 缓存DOM节点查找的结果

　　(10) 避免使用CSS ExPssion

　　(11) 图片预载

　　(12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比span+css布局慢

　　32，如何控制网页在网络传输过程中的数据量

　　启用GZIP压缩

　　保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

　　33，Flash、Ajax各自的优缺点，在使用中如何取舍?

　　Ajax的优势

　　(1) 可搜索型

　　(2) 开放性

　　(3) 费用

　　(4) 易用性

　　(5) 易于开发

　　Flash的优势

　　(1) 多媒体处理

　　(2) 兼容性

　　(3) 矢量图形 比SVG，Canvas优势大很多

　　(4) 客户端资源调度，比如麦克风，摄像头