25个Web前端重难点.docx
《25个Web前端重难点.docx》由会员分享，可在线阅读，更多相关《25个Web前端重难点.docx（28页珍藏版）》请在冰豆网上搜索。
25个Web前端重难点
1、web前端优化机制？
1）内容上的优化：
1）尽量减少HTTP请求
有几种常见的方法能切实减少HTTP请求：
1）合并文件，比如把多个CSS文件合成一个；
2）CSSSprites利用CSSbackground相关元素进行背景图绝对定位；
3）图像地图
4）内联图象使用data:
URLscheme在实际的页面嵌入图像数据.
2）减少DNS查找
3）避免重定向：
比如对Web站点子目录的后面添加个/，就能有效避免一次重定向。
与二者之间是有差异的。
如果是Apache服务器，通过配置Alias或mod_rewrite或是DirectorySlash能消除
1）使得Ajax可缓存：
响应时间对Ajax来说至关重要，否则用户体验绝对好不到哪里去。
提高响应时间的有效手段就是Cache。
其它的一些优化规则对这一条也是有效的。
5）延迟载入组件（Post-loadComponents）
6）预载入组件（PreloadComponents）
7）减少DOM元素数量（ReducetheNumberofDOMElements）
8）切分组件到多个域（SplitComponentsAcrossDomains）.主要的目的是提高页面组件并行下载能力。
但不要跨太多域名，否则就和第二条有些冲突了。
9）最小化iframe的数量（MinimizetheNumberofiframes）
10）杜绝http404错误
2）面向Server端：
1）使用CDN（UseaContentDeliveryNetwork）
2）添加Expires或Cache-Control信息头
3）压缩内容（GzipComponents）
4）设置Etags（ConfigureETags）
5）尽早刷新Buffer（FlushtheBufferEarly）
6）对AJAX请求使用GET方法（UseGETforAJAXRequests）
XMLHttpRequestPOST要两步，而GET只需要一步。
但要注意的是在IE上GET最大能处理的URL长度是2K。
3）面向cookie
1）缩小Cookie（ReduceCookieSize）
根据RFC2109的描述，每个客户端最多保持300个Cookie，针对每个域名最多20个Cookie（实际上多数浏览器现在都比这个多，比如Firefox是50个），每个Cookie最多4K，注意这里的4K根据不同的浏览器可能不是严格的4096。
别扯远了，对于Cookie最重要的就是，尽量控制Cookie的大小，不要塞入一些无用的信息。
2）针对Web组件使用域名无关性的Cookie（UseCookie-freeDomainsforComponents）
这个话题在此前针对Web图片服务器的讨论中曾经提及。
这里说的Web组件（Component），多指静态文件，比如图片CSS等，Yahoo!
的静态文件都在上，客户端请求静态文件的时候，减少了Cookie的反复传输对主域名（）的影响。
2、javascript闭包？
Closure，所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式，因而这些变量也是该表达式的一部分。
简单来讲，ECMAScript允许使用内部函数－－即函数定义和函数表达式位于另一个函数的函数体内。
而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
也就是说，内部函数会在外部函数返回后被执行。
而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。
这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。
闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。
比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。
或者，直接将这样一个（内部）函数对象的引用指定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。
保护函数内的变量安全。
以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
闭包使用：
1）在内存中维持一个变量。
依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c（），都会给i自加1。
2）通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）
3）私有属性和方法在Constructor外是无法被访问的。
functionexampleClosureForm（arg1,arg2）{
varlocalVar=8;
functionexampleReturned（innerArg）{
return（（arg1+arg2）/（innerArg+localVar））;
}
/*返回一个定义为exampleReturned的内部函数的引用-:
-*/
returnexampleReturned;
}
varglobalVar=exampleClosureForm（2,4）;
3、javascript跑马灯
DOCTYPEHTML>
RandomRunHouse
msgArray=newArray（4）;
msgArray[0]="欢迎光临";
msgArray[1]="白日依山静，黄河入海流";
msgArray[2]="人道是，三国周郎赤壁";
msgArray[3]="EmailTo:
**************";
varmsg="";
varflag=true;
varaddOne=1;
varspace=50;
varaddTwo=0;
functionrandomMessage（）
{
if（flag==true）{//判断次句跑马灯是否跑完，跑完则重新随机获得语句
msg=msgArray[Math.floor（Math.random（）*msgArray.length）];
flag=false;//表示跑马灯已开始，下次调用此函数则不在随机获得语句，直到跑马灯结束
}
if（addOne//在状态栏中先一个字一个字递加的把msg字符串显示出来
window.status=msg.substring（0,addOne）;
addOne++;
}else{
varscroller="";
for（i=0;iscroller+="";
}
scroller+=msg;
window.status=scroller.substring（addTwo,space+msg.length）;
addTwo++;
//表示跑马灯结束，初始化数据
if（addTwo>space+msg.length）{
addOne=0;
addTwo=0;
flag=true;
}
}
setTimeout（'randomMessage（）',100）;
}