web前端百面试准备.docx

1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20var reg = /a-zA-Za-zA-Z_0-94,19$/;reg.test(a1a_a1a_a1a_a1a_);3，判断一个字符串中出现次数最多的字符，统计这个次数/将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数var str = abcdefgaddda;var obj = ;for (var i = 0, l = str.length; i < l; i+) var key = stri; if (!objkey) objkey = 1; else objkey+; var max = -1;var max_key = ;var key;for (key in obj) if (max objkey) max = objkey; max_key = key; 4，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.allnameIE；document.getElementByName()和document.allname均不能获取div元素FF：可以(6) input.type的属性IE：input.type只读FF：input.type可读写(7) innerText textContent outerHTMLIE：支持innerText, outerHTMLFF：支持textContent(8) 是否可用id代替HTML元素IE：可以用id来代替HTML元素FF：不可以IE、FF下面CSS的解释区别答：1.png透明背景，FF下面没有问题，IE需要用滤镜通道2.z-index在IE、FF下面的解释问题，IE会认为第一个z-index=03.长字符串，word-wrap:break-all可以解决IE，但是FF需要overflow:hidden才行冯舒娅补充：1、有些标签在ff中不能用，比如button2、滤镜3、鼠标cursor:hand cursor:pointer4、div的高度自适应5、对box模型解析不一样6、ul、ol的padding和marginIE都能识别*，标准浏览器（如FF）不能识别*；IE6能识别*，但不能识别 !important；IE7能识别*，也能识别 !important；FF不能识别*，但能识别 !important；例如style=”*width:10px;!important width:20px;”这样在IE6下宽度为10px,在IE7下宽度时20px5，规避javascript多人开发函数重名问题(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok6，javascript面向对象中继承实现javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：function Animal(name) = name;Atotype.getName = function() alert()function Dog() ;Dtotype = new Animal(Buddy);Dtotype.constructor = Dog;var dog = new Dog();8，编写一个方法 求一个字符串的字节长度假设：一个英文字符占用一个字节，一个中文字符占用两个字节function GetBytes(str) var len = str.length; var bytes = len; for(var i=0; i 255) bytes+; return bytes;10，写出3个使用this的典型应用（1）在html元素事件属性中使用，如（2）构造函数function Animal(name, color) = name; this.color = color;（3）var btn = document.getElementById(text);btn.onclick = function() alert(this.value); /此处的this是按钮元素（4）CSS expression表达式中使用this关键字 div element 13，JavaScript中如何检测一个变量是一个String类型？请写出函数实现String类型有两种生成方式：(1)Var str = “hello world”;(2)Var str2 = new String(“hello world”);function IsString(str) return (typeof str = string | str.constructor = String);14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“年还剩天时分秒” 倒计时 function counter() var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 12, 31, 23, 59, 59); var time = (date2 - date)/1000; var day =Math.floor(time/(24*60*60) var hour = Math.floor(time%(24*60*60)/(60*60) var minute = Math.floor(time%(24*60*60)%(60*60)/60); var second = Math.floor(time%(24*60*60)%(60*60)%60); var str = year + 年还剩+day+天+hour+时+minute+分+second+秒; document.getElementById(input).value = str; window.setInterval(counter(), 1000);16，JavaScript有哪几种数据类型简单：Number，Boolean，String，Null，Undefined复合：Object，Array，Function18，JavaScript中如何对一个对象进行深度clonefunction cloneObject(o) if(!o | object != typeof o) return o; var c = function = typeof o.pop ? : ; var p, v; for(p in o) if(o.hasOwnProperty(p) v = op; if(v & object = typeof v) cp = Ext.ux.clone(v); else cp = v; return c;24，请给出异步加载js方案，不少于两种默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。异步加载方式：(1) defer，只支持IE(2) async：(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：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); ;30，js的基础对象有那些, window和document的常用的方法和属性列出来String,Number,BooleanWindow:方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open属性：name,parent,screenLeft,screenTop,self,top,statusDocument方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln31，前端开发的优化问题（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 Expression（11） 图片预载（12） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢（13）启用GZIP压缩（14）保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性33，Flash、Ajax各自的优缺点，在使用中如何取舍？Ajax的优势（1） 可搜索型（2） 开放性（3） 费用（4） 易用性（5） 易于开发Flash的优势（1） 多媒体处理（2） 兼容性（3） 矢量图形 比SVG，Canvas优势大很多（4） 客户端资源调度，比如麦克风，摄像头1、 JS中调用某个函数之前，如何取得该函数最多可以传递多少个参数？该函数被调用时，如果知道传了多少个参数过来？假设函数名为fun，那个fun.length就是它最多能接受的参数个数；在fun函数里面，arguments就是用数组装着调用时传过来的所有参数，因此arguments.length就是已经传递过来的参数个数；2编写一个方法 去掉一个数组的重复元素Atotype.strip=function()if(this.length2) return this0|;var arr=;for(var i=0;ithis.length;i+)arr.push(this.splice(i,1);for(var j=0;jthis.length;j+)if(thisj=arrarr.length-1)this.splice(j,1);return arr;var arr=abc,85,abc,85,8,8,1,2,5,4,7,8;alert(arr.strip();4用脚本写去除字符串的前后空格Stotype.trim = function(mode)/前后去空格if (mode=left) return (this.charAt(0) = “” & this.length 0) ? this.slice(1).trim(left) : this); elseif (mode = right) return (this.charAt(this.length - 1) = “” & this.length 0) ? this.slice(0, this.length - 1).trim(right) : this); else return this.trim(left).trim(right);6.介绍一下Session及Session与Cookie的区别 Session是相当于Server端的Cookie, Cookie是在客户端保存数据，Session是在Server端保存数据。Session状态是保存在Server端的文件或者数据库中，每个Session是由Session Id来识别，为了使客户端能够识别它自己，Session ID必须有Server端来创建然后发送到客户端，当客户端向Server端发送请求时，也需要发送Session ID.如果Cookie没有用来保存Session ID, 那么Session会在浏览器关闭的时候失效， 或者用户通过连接到其他URL来打断POST或者query string传递，也就是说，session在用户离开这个站点的时候就会失效。5、js对象的深度克隆？20分Ototype.deepClone=function() functioncloneObj() cloneOtotype=this; varobj=newcloneObj(); for(varoinobj) if(typeof(objo)=object)objo=objo.deepClone(); returnobj;6、动态打印时间，格式为yyyy-MM-dd hh:mm:ss? 15分1. functionprintTime()2. vartimer1=newDate();3. vartimer=timer1.toLocaleString();4. timer=timer.replace(/年月/g,-);5. timer=timer.replace(/日/,);6. time.innerHTML=timer;7. setInterval(printTime(),1000);3. 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可以控制的。4、 如何居中一个浮动元素?设置容器的浮动方式为相对定位然后确定容器的宽高 比如宽500 高 300 的层然后设置层的外边距.Div Width:500px ; height:300px; Margin: -150px 0 0 -250px; position: absolute; left:50%; top:50%; 6、 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？涉及到人手、分工、同步；先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；页面进行标注（例如 页面 模块 开始和结束）；CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）JS 分文件夹存放 命民以该JS 功能为准英文翻译；图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理9.以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）var str = a b c 20 d e f g 123;/答案str.split(/s+/);12.编写代码让f1继承f2的所有成员function f1() this.a1=1; this.b1=2;function f2() this.a2=3; this.b2=4;totype = new f2();totype.constructor = f1;12.把16进制颜色转变成rgb颜色，如:#FFFFFF等同rgb(255,255,255)function exChange(color) return rgb( + parseInt(color.substr(1, 2), 16) + , + parseInt(color.substr(3, 2), 16) + , + parseInt(color.substr(5, 2), 16) + );2、img的alt和title的异同？10分答：title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。2.行内元素有哪些？块级元素有哪些？行内元素有：a b span I bem img input select strong块级元素有：div ul ol lidl dt dd h1 h2 h3 h4phtml与xhtml的区别规范是什么1、XHTML 元素必须被正确地嵌套。例子：一般html网页可以“主要内容”这是个不严格，在XHTML是错误的；正确的在xhtml标准中就必须要求这样“主要内容”。2、XHTML 元素必须被关闭。exp：1、一个HEAD里的例子，“”像这个标签在html是可行的，但是为了xhtml的标准所以必须关闭如“”2、如在一般html使用 “ ”这个换大行标签时候很多人直接在需要换行的段落加个“ ”标签就完了，但是在XHTML CSS标准中就必须是这样的 “段落文字 ”意思就是必须由“ 这个换行标签开始与文章文字段前，并在该段文字文字后以“”标签结束。3、如很多在做html页面时候用到小换行标签“br”，很多人不知道这个标签需要以关闭的样式来换行，如：一段文字后要换行 很多CSS制作这就在需要换行的地方加了个“”就好了 ，但是告诉大家这也是不标准，在XHTML验证时候是通不过的，必须用“”自关闭结束。3、标签名必须用小写字母。在以前的网页中对于很多标签通常使用大写或大小写的编排方式，但是在为了WEB标准现在标签都要求小写统一。exp：以前很多“、 ”等都用大写或大小写混用如“、”或“、”排版，但是XHTML统一要求需要用“、”小写。4、XHTML 文档必须拥有根元素。意思就是一什么标签开始就要用什么标签结束，如开始就要在内容结束用来关闭。5、对于图片需添加alt属性以前很多时候在网页里显示图片img标签里都可加可不加alt属性，但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误，哪怕alt的值为空都可以。exp:错误 正确那加了alt有什么好处？答：加上alt可以对图片进行文字说明，可让搜索引擎辨别图片内容，是优化网页好地方。4.说几条XHTML规范的内容。1）标签名必须用小写字母。2）所有标签都必须被关闭，包括空标签。3）属性值必须加引号。4）用Id属性代替name属性。5）所有XHTML文档必须进行文件类型声明。5.对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准？按这些规范制作的网页，符合XML格式规范，内容与表现相分离，将使你的页面数据在以后可以被分享、交换和重用。W3C主要工作是研究和制定开放的规范(事实上的标准)，以便提高web相关产品的互用性。W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范 (Recommendations)”发布。更多的信息您可以访问W3C的网站：为什么要使用web标准？1）具有更好的兼容性。2）易于代码维护和开发。3）可增加网站的访问量。4）标准的web文档更易被转换为其他格式。5）更易被搜索引擎访问，也更易被准确索引。6）更易被JavaScript和DOM代码访问。21. Ajax和javascript的区别？javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。在 Ajax应用中信息是如何在浏览器和服务器之间传递的22、AJAX都有哪些有点和缺点？1、最大的一点是页面无刷新，用户的体验非常好。2、使用异步方式与服务器通信，具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。ajax的缺点1、ajax不支持浏览器back按钮。2、安全问题 AJAX暴露了与服务器交互的细节。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。5、不容易调试。1.请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别？!DOCTYPE 指定了 HTML 文档遵循的文档类型定义(DTD)。是Microsoft Internet Explorer 6 的新增内容。 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知