收藏 分享(赏)

web前端 百面试准备.docx

上传人:11xg27ws 文档编号:7860256 上传时间:2019-05-27 格式:DOCX 页数:14 大小:50.58KB
下载 相关 举报
web前端 百面试准备.docx_第1页
第1页 / 共14页
web前端 百面试准备.docx_第2页
第2页 / 共14页
web前端 百面试准备.docx_第3页
第3页 / 共14页
web前端 百面试准备.docx_第4页
第4页 / 共14页
web前端 百面试准备.docx_第5页
第5页 / 共14页
点击查看更多>>
资源描述

1、 1 / 141, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为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)

2、 objkey = 1; else objkey+;var max = -1;var max_key = “;var key;for (key in obj) if (max 255) bytes+;return bytes;10,写出3个使用 this 的典型应用(1)在 html 元素事件属性中使用,如(2)构造函数function Animal(name, color) this.name = name;this.color = color;(3)var btn = document.getElementById(“text“);btn.onclick = function() aler

3、t(this.value); /此处的 this 是按钮元素(4)CSS expression 表达式中使用 this 关键字div element13,JavaScript 中如何检测一个变量是一个 String 类型?请写出函数实现String 类型有两种生成方式:(1)Var str = “hello world”;(2)Var str2 = new String(“hello world”);4 / 14function IsString(str)return (typeof str = “string“ | str.constructor = String);14,网页中实现一个计算

4、当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“年还剩天 时分秒”倒计时 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%(

5、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,F

6、unction18,JavaScript 中如何对一个对象进行深度 clonefunction cloneObject(o) if(!o | object != typeof o) return o;var c = function = typeof o.pop ? : ;var p, v;5 / 14for(p in o) if(o.hasOwnProperty(p) v = op;if(v else cp = v;return c;24,请给出异步加载 js 方案,不少于两种默认情况 javascript 是同步加载的,也就是 javascript 的加载时阻塞的,后面的元素要等待 jav

7、ascript 加载完毕后才能进行再加载,对于一些意义不是很大的 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 t

8、he 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)

9、;);/firefox and opera support onload(but not dom2 in ff) handlers for/script nodes. opera, but no ff, support the onload event for link6 / 14/nodes.elsen.onload = function()f(id,url);30,js 的基础对象有那些, window 和 document 的常用的方法和属性列出来String,Number,BooleanWindow:方法:setInterval,setTimeout,clearInterval,cle

10、arTimeout,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 请求结果,每次操

11、作本地变量,不用请求,减少请求次数(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 压

12、缩(14)保持良好的编程习惯,避免重复的 CSS,JavaScript 代码,多余的 HTML 标签和属性33,Flash、Ajax 各自的优缺点,在使用中如何取舍?Ajax 的优势(1) 可搜索型(2) 开放性(3) 费用(4) 易用性(5) 易于开发Flash 的优势7 / 14(1) 多媒体处理(2) 兼容性(3) 矢量图形 比 SVG,Canvas 优势大很多(4) 客户端资源调度,比如麦克风,摄像头1、 JS 中调用某个函数之前,如何取得该函数最多可以传递多少个参数?该函数被调用时,如果知道传了多少个参数过来?假设函数名为 fun,那个 fun.length 就是它最多能接受的参数个

13、数;在 fun 函数里面,arguments 就是用数组装着调用时传过来的所有参数,因此arguments.length 就是已经传递过来的参数个数;2 编写一个方法 去掉一个数组的重复元素Array.prototype.strip=function()if(this.length4 用脚本写去除字符串的前后空格String.prototype.trim = function(mode)/前后去空格if (mode=left) return (this.charAt(0) = “” elseif (mode = right) return (this.charAt(this.length -

14、1) = “” 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 端发送请求时,也需要发送 Sessio

15、n ID.如果 Cookie 没有用来保存 Session ID, 那么 Session 会在浏览器关闭的时候失效, 或者用户通过连接到其他 URL 来打断 POST 或者 query string 传递,也就是说,session 在用户离开这个站点的时候就会失效。5、js 对象的深度克隆?20 分Object.prototype.deepClone=function()function cloneObj() cloneObj.prototype=this;var obj=new cloneObj();for(var o in obj)if(typeof(objo)=“object“)objo

16、=objo.deepClone(); return obj;6、动态打印时间,格式为 yyyy-MM-dd hh:mm:ss? 15 分1. function printTime()2. var timer1=new Date();3. var timer=timer1.toLocaleString();4. timer=timer.replace(/年月/g,“-“);5. timer=timer.replace(/日 /,“);6. time.innerHTML=timer;7. setInterval(“printTime()“,1000);3. CSS 引入的方式有哪些? link 和

17、import 的区别是?9 / 141)link 方法2)使用import 引入3)页面直接加样式差别 1:link 标签除了可以加载 CSS 外,还可以做很多其它的事情,比如定义 RSS,定义 rel 连接属性等,import 就只能加载 CSS 了。差别 2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候) ,link引用的 CSS 会同时被加载。而import 引用的 CSS 会等到页面全部被下载完再被加载。差别 3:兼容性的差别。由于import 是 CSS2.1 提出的所以老的浏览器不支持,import 只有在 IE5 以上的才能识别,而 link 标签无此问题。差别

18、 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 与图片?涉及到人手、

19、分工、同步;先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);标注样式编写人,各模块都及时标注(标注关键样式调用的地方);页面进行标注(例如 页面 模块 开始和结束);CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css)JS 分文件夹存放 命民以该 JS 功能为准英文翻译;图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理9.以空格字符串作为分隔字符串,将如下字符串拆分成数组(每个元素不能含有空格字符)10 / 14var str =

20、 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;f1.prototype = new f2();f1.prototype.constructor = f1;12.把 16 进制颜色转变成 rgb 颜色,如:#FFFFFF 等同 rgb(255,255,255)function exChange(color) return rgb( + parseInt(color.substr(1, 2),

21、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

22、块级元素有:div ul ol lidl dt dd h1 h2 h3 h4phtml 与 xhtml 的区别规范是什么1、XHTML 元素必须被正确地嵌套。 例子:一般 html 网页可以“ 主要内容”这是个不严格,在 XHTML 是错误的;正确的在 xhtml 标准中就必须要求这样 “主要内容 ”。11 / 142、XHTML 元素必须被关闭。 exp:1、一个 HEAD 里的例子, “ ”像这个标签在 html 是可行的,但是为了 xhtml 的标准所以必须关闭如 “ ”2、如在一般 html 使用 “ ”这个换大行标签时候很多人直接在需要换行的段落加个“ ”标签就完了,但是在 XHTM

23、L CSS 标准中就必须是这样的 “ 段落文字” 意思就是必须由“ 这个换行标签开始与文章文字段前,并在该段文字文字后以“ ”标签结束。3、如很多在做 html 页面时候用到小换行标签“ br ”,很多人不知道这个标签需要以关闭的样式来换行,如:一段文字后要换行 很多 CSS 制作这就在需要换行的地方加了个“ ”就好了 ,但是告诉大家这也是不标准,在 XHTML 验证时候是通不过的,必须用“ ”自关闭结束。3、标签名必须用小写字母。 在以前的网页中对于很多标签通常使用大写或大小写的编排方式,但是在为了 WEB 标准现在标签都要求小写统一。exp:以前很多“ 、 ”等都用大写或大小写混用如 “

24、、 ”或“、 ”排版,但是 XHTML 统一要求需要用 “ 、 ”小写。4、XHTML 文档必须拥有根元素。意思就是一什么标签开始就要用什么标签结束,如开始就要在内容结束用来关闭。5、对于图片需添加 alt 属性以前很多时候在网页里显示图片 img 标签里都可加可不加 alt 属性,但是现在 xhtml要求必须加上 alt 属性,不然 xhtml 验证将提示错误,哪怕 alt 的值为空都可以。exp:错误 正确那加了 alt 有什么好处?答:加上 alt 可以对图片进行文字说明,可让搜索引擎辨别图片内容,是优化网页好地方。4.说几条 XHTML 规范的内容。1)标签名必须用小写字母。2)所有标

25、签都必须被关闭,包括空标签。3)属性值必须加引号。4)用 Id 属性代替 name 属性。5)所有 XHTML 文档必须进行文件类型声明。12 / 145.对 Web 标准化(或网站重构)知道哪些相关知识,简述几条你知道的 Web 标准?按这些规范制作的网页,符合 XML 格式规范,内容与表现相分离,将使你的页面数据在以后可以被分享、交换和重用。W3C 主要工作是研究和制定开放的规范(事实上的标准),以便提高 web 相关产品的互用性。W3C 的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给 W3C 理事会讨论,

26、正式批准后才成为“ 推荐规范 (Recommendations)”发布。更多的信息您可以访问 W3C 的网站:www.w3.org 为什么要使用 web 标准?1)具有更好的兼容性。2)易于代码维护和开发。3)可增加网站的访问量。4)标准的 web 文档更易被转换为其他格式。5)更易被搜索引擎访问,也更易被准确索引。6)更易被 JavaScript 和 DOM 代码访问。21. Ajax 和 javascript 的区别?javascript 是一种在浏览器端执行的脚本语言,Ajax 是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。Javascr

27、ipt 是由网景公司开发的一种脚本语言,它和 sun 公司的 java 语言是没有任何关系的,它们相似的名称只是一种行销策略。在一般的 web 开发中,javascript 是在浏览器端执行的,我们可以用javascript 控制浏览器的行为和内容。在 Ajax 应用中信息是如何在浏览器和服务器之间传递的22、AJAX 都有哪些有点和缺点?1、最大的一点是页面无刷新,用户的体验非常好。2、使用异步方式与服务器通信,具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax 的

28、原则是“按需取数据” ,可以最大程度的减少冗余请求,和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。ajax 的缺点1、ajax 不支持浏览器 back 按钮。2、安全问题 AJAX 暴露了与服务器交互的细节。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。5、不容易调试。1.请解释一下 DOCTYPE 的作用,有 DOCTYPE 和没有 DOCTYPE 有什么区别?13 / 14!DOCTYPE 指定了 HTML 文档遵循的文档类型定义(DTD) 。是 Microsoft Internet Explorer 6 的新增内容。 声明位于文档中的最前

29、面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 “-/W3C/DTD XHTML 1.0 Strict/EN“ 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。你如何理解 HTML 结构的语意化 ?1、去掉或样式丢失的时候能让页面呈现清晰的结构;2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页;3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是

30、因为这些设备对CSS 的支持较弱) ;4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重;5.你的页面是否对爬虫容易理解非常重要, 因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记;6、便于团队开发和维护。附上 javascript 正则表达式的基本知识:g: 全局匹配i: 忽略大小写 匹配一个输入或一行的开头,/a/匹配”an A ”,而不匹配 ”An a”$ 匹配一个输入或一行的结尾,/a$/匹配”An a”,而不匹配”an A ”* 匹配前面元字符 0 次或多次,/ba*/将匹配 b,ba,baa,baaa+ 匹配前面元字符 1 次或多次,/ba*/ 将匹配 ba,ba

31、a,baaa? 匹配前面元字符 0 次或 1 次,/ba*/将匹配 b,ba(x) 匹配 x 保存 x 在名为$1$9 的变量中x|y 匹配 x 或 yn 精确匹配 n 次n, 匹配 n 次以上n,m 匹配 n-m 次xyz 字符集(character set) ,匹配这个集合中的任一一个字符( 或元字符)xyz 不匹配这个集合中的任何一个字符b 匹配一个退格符14 / 14b 匹配一个单词的边界B 匹配一个单词的非边界cX 这儿,X 是一个控制符,/cM/匹配 Ctrl-Md 匹配一个字数字符,/d/ = /0-9/D 匹配一个非字数字符,/D/ = /0-9/n 匹配一个换行符r 匹配一个回车符s 匹配一个空白字符,包括 n,r,f,t,v 等S 匹配一个非空白字符,等于/nfrtv/t 匹配一个制表符v 匹配一个重直制表符w 匹配一个可以组成单词的字符 (alphanumeric,这是我的意译,含数字),包括下划线,如w匹配”$5.98 中的 5,等于 a-zA- Z0-9W 匹配一个不可以组成单词的字符,如W匹配”$5.98中的$,等于a-zA-Z0-9举例:验证 emailvar myReg = /_a-z0-9+(_a-z0-9+.)+a-z0-92,3$/;if(myReg.test(strEmail) return true;

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报