web前端百度面试准备备.docx
《web前端百度面试准备备.docx》由会员分享，可在线阅读，更多相关《web前端百度面试准备备.docx（29页珍藏版）》请在冰豆网上搜索。
web前端XX面试准备备
基础
判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
varreg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test（"a1a__a1a__a1a__a1a__"）;
判断一个字符串中出现次数最多的字符，统计这个次数
//将字符串的字符保存在一个hashtable中，key是字符，value是这个字符出现的次数
varstr="abcdefgaddda";
varobj={};
for（vari=0,l=str.length;i<l;i++）{
varkey=str[i];
if（!
obj[key]）{
obj[key]=1;
}else{
obj[key]++;
}
}
varmax=-1;
varmax_key="";
varkey;
for（keyinobj）{
if（maxmax=obj[key];
max_key=key;
}
}
IE与FF脚本兼容性问题
（1）window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
（2）获取事件源
IE用srcElement获取事件源，而FF用target获取事件源
（3）添加，去除事件
IE：
element.attachEvent（“onclick”,function）element.detachEvent（“onclick”,function）
FF：
element.addEventListener（“click”,function,true）element.removeEventListener（“click”,function,true）
（4）获取标签的自定义属性
IE：
div1.value或div1[“value”]
FF：
可用div1.getAttribute（“value”）
（5）document.getElementByName（）和document.all[name]
IE；document.getElementByName（）和document.all[name]均不能获取div元素
FF：
可以
（6）input.type的属性
IE：
input.type只读
FF：
input.type可读写
（7）innerTexttextContentouterHTML
IE：
支持innerText,outerHTML
FF：
支持textContent
（8）是否可用id代替HTML元素
IE：
可以用id来代替HTML元素
FF：
不可以
IE、FF下面CSS的解释区别
答：
1.png透明背景，FF下面没有问题，IE需要用滤镜通道
2.z-index在IE、FF下面的解释问题，
IE会认为第一个z-index=0
3.长字符串，word-wrap:
break-all可以解决IE，但是FF需要overflow:
hidden才行
冯舒娅补充：
1、有些标签在ff中不能用，比如button
2、滤镜
3、鼠标cursor:
handcursor:
pointer
4、div的高度自适应
5、对box模型解析不一样
6、ul、ol的padding和margin
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别!
important；
IE7能识别*，也能识别!
important；
FF不能识别*，但能识别!
important；
例如style=”*width:
10px;!
importantwidth:
20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
规避javascript多人开发函数重名问题
（1）可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
（2）将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok
javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：
functionAnimal（name）{
this.name=name;
}
Animal.prototype.getName=function（）{alert（this.name）}
functionDog（）{};
Dog.prototype=newAnimal（"Buddy"）;
Dog.prototype.constructor=Dog;
vardog=newDog（）;
编写一个方法求一个字符串的字节长度
假设：
一个英文字符占用一个字节，一个中文字符占用两个字节
functionGetBytes（str）{
varlen=str.length;
varbytes=len;
for（vari=0;iif（str.charCodeAt（i）>255）bytes++;
}
returnbytes;
}
写出3个使用this的典型应用
（1）在html元素事件属性中使用，如
（2）构造函数
functionAnimal（name,color）{
this.name=name;
this.color=color;
}
（3）
varbtn=document.getElementById（"text"）;
btn.onclick=function（）{
alert（this.value）;//此处的this是按钮元素
}
（4）CSSexpression表达式中使用this关键字
expression（this.parentNode.width）;">divelement
|
JavaScript中如何检测一个变量是一个String类型？
请写出函数实现
String类型有两种生成方式：
（1）Varstr=“helloworld”;
（2）Varstr2=newString（“helloworld”）;
functionIsString（str）{
return（typeofstr=="string"||str.constructor==String）;
}
网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
倒计时
functioncounter（）{
vardate=newDate（）;
varyear=date.getFullYear（）;
vardate2=newDate（year,12,31,23,59,59）;
vartime=（date2-date）/1000;
varday=Math.floor（time/（24*60*60））
varhour=Math.floor（time%（24*60*60）/（60*60））
varminute=Math.floor（time%（24*60*60）%（60*60）/60）;
varsecond=Math.floor（time%（24*60*60）%（60*60）%60）;
varstr=year+"年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
document.getElementById（"input"）.value=str;
}
window.setInterval（"counter（）",1000）;
JavaScript有哪几种数据类型
简单：
Number，Boolean，String，Null，Undefined
复合：
Object，Array，Function
JavaScript中如何对一个对象进行深度clone
functioncloneObject（o）{
if（!
o||'object'!
==typeofo）{
returno;
}
varc='function'===typeofo.pop?
[]:
{};
varp,v;
for（pino）{
if（o.hasOwnProperty（p））{
v=o[p];
if（v&&'object'===typeofv）{
c[p]=Ext.ux.clone（v）;
}
else{
c[p]=v;
}
}
}
returnc;
};
请给出异步加载js方案，不少于两种
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
异步加载方式：
（1）defer，只支持IE
（2）async：
（3）创建script，插入到DOM中，加载完毕后callBack，见代码：
请设计一套方案，用于确保页面中JS加载完全。
varn=document.createElement（"script"）;
n.type="text/javascript";
//以上省略部分代码
//ie支持script的readystatechange属性（IEsupportthereadystatechangeeventforscriptandcssnodes）
if（ua.ie）{
n.onreadystatechange=function（）{
varrs=this.readyState;
if（'loaded'===rs||'complete'===rs）{
n.onreadystatechange=null;
f（id,url）;//回调函数
}
};
//省略部分代码
//safari3.xsupportstheloadeventforscriptnodes（DOM2）
n.addEventListener（'load',function（）{
f（id,url）;
}）;
//firefoxandoperasupportonload（butnotdom2inff）handlersfor
//scriptnodes.opera,butnoff,supporttheonloadeventforlink
//nodes.
}else{
n.onload=function（）{
f（id,url）;
};
}
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
前端开发的优化问题
（1）减少http请求次数：
cssspirit,datauri
（2）JS，CSS源码压缩
（3）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（4）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
（5）用setTimeout来避免页面失去响应
（6）用hash-table来优化查找
（7）当需要设置的样式很多时设置className而不是直接操作style
（8）少用全局变量
（9）缓存DOM节点查找的结果
（10）避免使用CSSExpression
（11）图片预载
（12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
（13）启用GZIP压缩
（14）保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性
Flash、Ajax各自的优缺点，在使用中如何取舍？
Ajax的优势
（1）可搜索型
（2）开放性
（3）费用
（4）易用性
（5）易于开发
Flash的优势
（1）多媒体处理
（2）兼容性
（3）矢量图形比SVG，Canvas优势大很多
（4）客户端资源调度，比如麦克风，摄像头
JS中调用某个函数之前，如何取得该函数最多可以传递多少个参数？
该函数被调用时，如果知道传了多少个参数过来？
假设函数名为fun，那个fun.length就是它最多能接受的参数个数；
在fun函数里面，arguments就是用数组装着调用时传过来的所有参数，因此arguments.length就是已经传递过来的参数个数；
编写一个方法去掉一个数组的重复元素
Array.prototype.strip=function（）
{
if（this.length<2）return[this[0]]||[];
vararr=[];
for（vari=0;i{
arr.push（this.splice（i–,1））;
for（varj=0;j{
if（this[j]==arr[arr.length-1]）
{
this.splice（j–,1）;
}
}
}
returnarr;
}
vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert（arr.strip（））;
用脚本写去除字符串的前后空格
String.prototype.trim=function（mode）
{//前后去空格
if（mode==’left’）{
return（（this.charAt（0）==“”&&this.length>0）?
this.slice
（1）.trim（‘left’）:
this）;
}else
if（mode==‘right’）{
return（（this.charAt（this.length-1）==“”&&this.length>0）?
this.slice（0,this.length-1）.trim（‘right’）:
this）;
}else{
returnthis.trim（‘left’）.trim（‘right’）;
}
};
介绍一下Session及Session与Cookie的区别
Session是相当于Server端的Cookie,Cookie是在客户端保存数据，Session是在Server端保存数据。
Session状态是保存在Server端的文件或者数据库中，每个Session是由SessionId来识别，为了使客户端能够识别它自己，SessionID必须有Server端来创建然后发送到客户端，当客户端向Server端发送请求时，也需要发送SessionID.
如果Cookie没有用来保存SessionID,那么Session会在浏览器关闭的时候失效，或者用户通过连接到其他URL来打断POST或者querystring传递，也就是说，session在用户离开这个站点的时候就会失效。
js对象的深度克隆？
20分
Object.prototype.deepClone=function（）{
function cloneObj（）{}
cloneObj.prototype=this;
var obj=new cloneObj（）;
for（var o in obj）{
if（typeof（obj[o]）=="object"）obj[o]=obj[o].deepClone（）;
} return obj;
}
动态打印时间，格式为yyyy-MM-ddhh:
mm:
ss?
15分
1.function printTime（）{
1. var timer1=new Date（）;
1. var timer=timer1.toLocaleString（）;
2. timer=timer.replace（/[年月]/g,"-"）;
3. timer=timer.replace（/日/,""）;
1. time.innerHTML=timer;
2.}setInterval（"printTime（）",1000）;
CSS引入的方式有哪些?
link和@import的区别是?
1）link方法
2）使用@import引入
3）页面直接加样式
差别1：
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：
加载顺序的差别。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载。
而@import引用的CSS会等到页面全部被下载完再被加载。
差别3：
兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：
使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
如何居中一个浮动元素?
设置容器的浮动方式为相对定位然后确定容器的宽高比如宽500高300的层然后设置层的外边距
.Div{Width:
500px;height:
300px;Margin:
-150px00-250px;position:
absolute;left:
50%;top:
50%;}
如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
涉及到人手、分工、同步；
先期团队必须确定好全局样式（globe.css），编码模式（utf-8）等
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS跟HTML分文件夹并行存放，命名都得统一（例如style.css）
JS分文件夹存放命民以该JS功能为准英文翻译；
图片采用整合的images.pngpng8格式文件使用尽量整合在一起使用方便将来的管理
以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）
varstr='abc20defg123';
//答案
str.split（/\s+/）;
编写代码让f1继承f2的所有成员
functionf1（）{
this.a1=1;
this.b1=2;
}
functionf2（）{
this.a2=3;
this.b2=4;
}
f1.prototype=newf2（）;
f1.prototype.constructor=f1;
把16进制颜色转变成rgb颜色，如:
#FFFFFF等同rgb（255,255,255）
functionexChange（color）{
return'rgb（'+parseInt（color.substr（1,2）,16）+','+parseInt（color.substr（3,2）,16）+','+parseInt（color.substr（5,2）,16）+'）';
}
img的alt和title的异同？
10分
答：
title属性为设置该属性的元素提供建议性的信息。
比如为链接添加描述性文字。
为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
行内元素有哪些？
块级元素有哪些？
行内元素有：
abspanIbemimginputselectstrong
块级元素有：
divulollidldtddh1h2h3h4…p
html与xhtml的区别规范是什么
1、XHTML元素必须被正确地嵌套。
例子：
一般html网页可以“主要内容”这是个不严格，在XHTML是错误的；正确的在xhtml标准中就必须要求这样“主要内容”。
2、XHTML元素必须被关闭。
exp：
1、一个HEAD里的例子，“
升级会员 