25个Web前端重难点.docx

1、25个Web前端重难点1、web前端优化机制？1）内容上的优化：1）尽量减少 HTTP 请求有几种常见的方法能切实减少 HTTP 请求：1) 合并文件，比如把多个 CSS 文件合成一个； 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；3) 图像地图 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.2）减少 DNS 查找3）避免重定向：比如对 Web 站点子目录的后面添加个 /，就能有效避免一次重定向。 与 二者之间是有差异 的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 D

2、irectorySlash 能消除1）使得 Ajax 可缓存：响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段 就是Cache 。其它的一些优化规则对这一条也是有效的。 5）延迟载入组件 (Post-load Components)6）预载入组件 (Preload Components)7）减少 DOM 元素数量 (Reduce the Number of DOM Elements)8）切分组件到多个域 (Split Components Across Domains).主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。9

3、）最小化 iframe 的数量 (Minimize the Number of iframes)10）杜绝 http 404 错误2）面向Server端：1）使用 CDN (Use a Content Delivery Network)2） 添加 Expires 或 Cache-Control 信息头3）压缩内容 (Gzip Components)4）设置 Etags (Configure ETags)5）尽早刷新 Buffer (Flush the Buffer Early)6）对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)XMLHttpRequ

4、est POST 要两步，而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理 的 URL长度是 2K。 3）面向cookie1）缩小 Cookie (Reduce Cookie Size)根据 RFC 2109 的描述，每个客户端最多保持 300 个 Cookie，针对每个域名最多 20 个Cookie (实 际上多数浏览器现在都比这个多，比如 Firefox 是 50 个) ，每个 Cookie 最多 4K，注 意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了，对于 Cookie 最重要的就 是，尽量控制 Cookie 的大小，不要塞入一些无用的信息。2

5、）针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)这个话题在此前针对 Web 图片服务器的讨论中曾经提及。这里说的 Web 组件(Component)，多 指静态文件，比如图片 CSS 等，Yahoo! 的静态文件都在 上，客户端请求静态文件 的时候，减少了 Cookie 的反复传输对主域名 () 的影响。2、javascript闭包？Closure，所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式，因而这些变量也是该表达式的一部分。简单来讲，ECMAScript 允许使用内部函数即函数定义和函

6、数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。 闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。或者，直接将这样一个（内部）函数对象的引用指

7、定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。 闭包使用：1）在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。 2）通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）3）私有属性和方法在Constructor外是无法被访问的。function exampleClosureForm(arg1, arg2) var localVar = 8; function

8、exampleReturned(innerArg) return (arg1 + arg2)/(innerArg + localVar); /* 返回一个定义为 exampleReturned 的内部函数的引用 -:- */ return exampleReturned;var globalVar = exampleClosureForm(2, 4);3、javascript跑马灯RandomRunHouse msgArray = new Array(4); msgArray0 = 欢迎光临; msgArray1 = 白日依山静，黄河入海流; msgArray2 = 人道是，三国周郎赤壁; m

9、sgArray3 = EmailTo: *; var msg = ; var flag = true; var addOne = 1; var space = 50; var addTwo = 0; function randomMessage() if ( flag = true ) / 判断次句跑马灯是否跑完，跑完则重新随机获得语句 msg = msgArrayMath.floor( Math.random() * msgArray.length ); flag = false;/ 表示跑马灯已开始，下次调用此函数则不在随机获得语句，直到跑马灯结束 if ( addOne msg.leng

10、th ) / 在状态栏中先一个字一个字递加的把msg字符串显示出来 window.status = msg.substring( 0, addOne ); addOne+; else var scroller = ; for ( i = 0; i space + msg.length ) addOne = 0; addTwo = 0; flag = true; setTimeout( randomMessage(), 100 ); 16，javascript浅复制与深度复制浅复制(影子克隆):只复制对象的基本类型,对象类型仍属于原来的引用. 深复制(深度克隆):不仅复制对象的基本类,同时也复制

11、原对象中的对象.就是说完全是新对象产生的. 例子： New Document 深度clone方法1：object.prototype.clone=function() if(typeOf(this)!=object)return this; if(this=null)return this; var newObj=new Object(); for(var i in this) newObji=thisi.clone; return(newObj);深度clone方法2：function clone(obj)function clone();clone.prototype=obj;return

12、 new clone();4、浏览器中用javascript如何取得用户系统当前的时间？var now=new Date();var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();document.write(当前时间是:+hour+:+min+:+sec);5、JavaScript脚本为Array对象添加一个indexOf方法。Array.prototype.indexOf=function(item,i) i|i=0; var length=this.length; if(i0)i=length+

13、i; for(;ilength;i+) if(thisi=item)return(i); return(-1);6、写一个网页版的comboBox,即可以下拉选择又可以文本框输入的组合文本框。var inputs=document.getElementsByTagName(input);for (var i=0;iinputs.length;i+) if (inputsi.type=text&inputsi.className=combobox) var input=inputsi; var items=input.item.split(,); var select=document.crea

14、teElement(select); for(i=0;iitems.length;i+) option=document.createElement(option) ; option.value=i; option.text=itemsi; select.options.add(option); select.style.position=absolute;select.style.width=input.clientWidth+20+px;select.style.clip=rect(auto auto auto +input.clientWidth+px) ;select.onchange

15、=function() var input=this.nextSibling; input.text=this.text; input.select(); input.focus();var parent=input.parentNode;parent.insertBefore(select,input); 7、ActionScript与JavaScript的交互？ActionScript提供了外部API，那就是ExternalInterface 类，通过ExternalInterface类可以实现ActionScript 和 Flash Player 容器之间的直接通信。1）在JavaScr

16、ipt中调用ActionScript方法在 Flash Player 中，可以使用 HTML 页中的JavaScript来调用 ActionScript 函数。 ActionScript 函数可以返回一个值，JavaScript 会立即接收它作为该调用的返回值。第一步：在ActionScript 中调用addCallback()把ActionScript 注册为可从容器调用。 成功调用 addCallBack() 后，容器中的 JavaScript 代码可以调用在 Flash Player 中注册的ActionScript方法。addCallBack定义如下：addCallback(funct

17、ionName:String, closure:Function):voidfunctionName参数就是在Html页面中脚本调用的方法名。closure参数是要调用的本地方法，这个参数可以是一个方法也可以是对象实例。 第二步：那么在Html页面中，先获得SWF对象的引用，也就是用声明的Swf的对象，比如说是testJs。然后就可以用以下方式调用ActionScript中的方法。function callActionScript() alert(document.getElementById(“testJs”).sayHelloWorld(“奎跃翔“); 2）在ActionScript中调用

18、 JavaScript在ActionScript中调用JavaScript最简单的方法是使用ExternalInterface()，可以使用此API调用任意JavaScript，传递参数，获得返回值，如果调用失败，ActionScript抛出一个异常。 Html页面中有如下函数定义：function sayHelloWorld(name) var msg=name+”,hello world!” alert(msg); return msg;8、web跨域访问解决方案1）Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从

19、而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。2）on-Demand方式。MYMSN的门户就用的这种方式，不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。3）iframe方式。查看过醒来

20、在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。4）用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。9、js中如何