|
1、html5为什么只需要写<!doctype html>? 答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为， 否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型 2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？ 行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 知名的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 3、页面导入样式时，使用link和@import有什么区别？ 两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。 补充：@import最优写法 @import的写法一般有下列几种： @import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import “style.css” //Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) //Windows NS4, Macintosh NS4不识别 @import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url(“style.css”) //Windows NS4, Macintosh NS4不识别 由上分析知道，@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。 从字节优化的角度来看@import url(style.css)最值得推荐。 4、常见的浏览器内核有哪些？ 使用Trident内核的浏览器：IE、Maxthon、TT、The World等； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey； 使用Presto内核的浏览器：Opera7及以上版本； 使用Webkit内核的浏览器：Safari、Chrome。 5、html5有哪些新特性？移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分html和html5？ 新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。 内容元素，article、footer、header、nav、section。 表单控件，calendar、date、time、email、url、search。 控件元素，webworker, websockt, Geolocation。 移出的元素有下列这些： 显现层元素：basefont，big，center，font, s，strike，tt，u。 性能较差元素：frame，frameset，noframes。 如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ 处理兼容问题有两种方式： 1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。 2.使用是html5shim框架 另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。 6、iframe有哪些优缺点？ 优点： 1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的”服务器推”技术 2.跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。 3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。 4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了 缺点： 1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而 无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。 如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。 2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。 3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。 7、label的作用是什么？是怎么使用的？ Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 FOR属性 功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 用法：<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox” type=”text”> ACCESSKEY属性： 功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。 用法：<Label FOR=”InputBox” ACCESSKEY＝”N”>姓名</Label><input ID=”InputBox” type=”text”> 局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。 8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果？ <div style=”height:1px;overflow:hidden;background:red”></div> 9、网页验证码是干嘛的？是为了解决什么安全问题？ 网页验证码介绍：”验证码”的英文表示为CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart），翻译过来就是”全自动区分计算机和人类的图灵测试”，顾名思义，它是用来区分计算机和人类的。在 CAPTCHA 测试中，作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答 CAPTCHA 的问题，所以回答出问题的用户就可以被认为是人类。 CAPTCHA 是由计算机来考人类，而不是标准图灵测试中那样由人类来考计算机，因此人们有时称 CAPTCHA 是一种反向图灵测试。 验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。攻击者编写的robot程序，很难识别验证码字符，顺利的完成自动注册，登录；而用户可以识别填写，所以这就实现了阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰强度了。就实际的效果来说，验证码只是增加攻击者的难度，而不可能完全的防止。 10、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？ 盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading 11、如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？ a.margin:xpx auto; b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。 实现居中关键在于 margin设置与 position:relative. .div { width:500px ; height:300px; margin: -150px 0 0 -250px; position:relative; left:50%; top:50%; } c.position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100 12、display有哪些值？说明他们的作用？ block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 13、position的值relative和absolute的定位原点是什么？ Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
14、display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ 行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔 解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小 15、请解释下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ a.添加新的元素 、应用 clear：both; b.父级定义 overflow: auto（注意：是父级div也就是这里的 div.outer） 一个对seo比较友好，另个hidden对seo不是太友好 在IE6中还需要触发 hasLayout ，例如 zoom：1； c.据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）IE6-7不支持:after， 使用 zoom:1触发 hasLayout {zoom:1;} /*==for IE6/7 Maxthon2==*/ :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;} d.使用 br标签和其自身的 html属性,<br clear=”all” /> clear=”all | left | right | none” 属性 e.父元素也设置浮动 f.父元素设置display:table 盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用 16、在网页中的应该使用奇数还是偶数的字体？为什么呢？ 偶数字号相对更容易和 web 设计的其他部分构成比例关系 使用奇数号字体不好的地方是，文本段落无法对齐 17、margin和padding分别适合什么场景使用？ 何时应当使用margin： （1）需要在border外侧添加空白时， （2）空白处不需要有背景（色）时， （3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。 何时应当使用padding （1）需要在border内侧添加空白时（往往是文字与边框距离的设置）， （2）空白处需要背景（色）时， （3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。 margin使用时应该注意的地方 margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。 18、元素竖向的百分比设定是相对于容器的高度吗？ 答：相对于父容器的宽度 19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容较低版本的IE？ 答：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 respond.js和css3-mediaqueries-js 20、设置元素浮动后，该元素的display值是多少？ display:block; 21、怎么让chrome支持小于12px的文字？ chrome私有属性：-webkit-text-size-adjust:none; -webkit-transform:scale(0.8); 行内元素设置:-webkit-transform:scale(0.8);display:inline-block 22、display:inline-block什么时候会显示间隙？ 1.给 父元素 写font-size:0 2.把标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，适用与例如<a></a><a></a>这样简单的结构 23、有一个高度自适应的div。里面有2个div，一个高度100px，希望另一个填满剩下的高度？ 外层box-sizing: border-box; 同时设置padding: 100px 0 0； 内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间； 另一个元素直接height: 100%; 外层position: relative； 百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0 24、什么是window对象？什么是document对象？ window它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。 document对象是window对象的一个对象属性 25、null和undefined的区别？ null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。 null表示”没有对象”，即该处不应该有值 （1） 作为函数的参数，表示该函数的参数不是对象。 （2） 作为对象原型链的终点。 undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义 （1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 （3）对象没有赋值的属性，该属性的值为undefined。 （4）函数没有返回值时，默认返回undefined。 26、什么是闭包（closure）？为什么要用它？ 闭包就是能够读取其他函数内部变量的函数 由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 闭包的用途： 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中 重用变量又不能造成全局污染 27、js代码中”use strict”是什么意思？使用它区别是什么？ 进入”严格模式”的标志，老版本的浏览器会把它当作一行普通字符串，加以忽略 将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行。如果这行语句不在第一行，则无效，整个脚本以”正常模式”运行。如果不同模式的代码文件合并成一个文件，这一点需要特别注意。 (严格地说，只要前面不是产生实际运行结果的语句，”use strict”可以不在第一行，比如直接跟在一个空的分号后面。) 将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行 因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中 – 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; – 消除代码运行的一些不安全之处，保证代码运行的安全； – 提高编译器效率，增加运行速度； – 为未来新版本的Javascript做好铺垫。 28、js中有一个函数，执行对象查找时，永远不会去查找原型，这个函数是什么？ hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。该方法属于Object对象，由于所有的对象都”继承”了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。 29、js延迟加载的方式有哪些？ js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法： 1.使用setTimeout延迟方法的加载时间 延迟加载js代码，给网页加载留出更多时间 <script type=”text/javascript” > function A(){ $.post(“/lord/login”,{name:username,pwd:password},function(){ alert(“Hello”); }); } $(function (){ setTimeout(‘A()’, 1000); //延迟1秒 }) </script> 2.让js最后加载 例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度 3.上述方法2也会偶尔让你收到Google页面速度测试工具的”延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。 //这些代码应被放置在</body>标签前(接近HTML文件底部) <script type=”text/javascript”> function downloadJSAtOnload() { var element = document.createElement(“script”); element.src = “defer.js”; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(“load”, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(“onload”, downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> 这段代码意思是等到整个文档加载完后，再加载外部文件”defer.js”。 使用此段代码的步骤： 1）.复制上面代码 2）.粘贴代码到HTML的标签前 (靠近HTML文件底部) 3）.修改”defer.js”为你的外部JS文件名 4）.确保你文件路径是正确的。例如：如果你仅输入”defer.js”，那么”defer.js”文件一定与HTML文件在同一文件夹下。 注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。 30、同步和异步的区别？ 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。 举个浏览器例子：普通B/S模式（同步）AJAX技术（异步） 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕 再举个生活的例子：大家联系的时候如果使用手机通话，那么只能跟一个人联系，过程中做不了其他任何操作，如果使用短信或者聊天的方式，就可以同时跟很多人聊天，别人收到信息后会回复，在回复之前还可以跟另外的人进行聊天。 31、document.write和innerHTML的区别？ 1.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。 2.innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。 3.两者都可动态包含外部资源如JavaScript文件 通过document.write插入<script></script>元素会自动执行其中的脚本； 大多数浏览器中，通过innerHTML插入<script></script>元素并不会执行其中的脚本 innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。 32、.call()和.apply()的含义和区别？ 1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。 2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3); 3、相同点：两个方法产生的作用是完全一样的。 4、不同点：方法传递的参数不同，单个单数传入，另一个可以以数组方式传入 33、JQ和JQUI有啥区别？ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是”write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。 34、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器的前进，后退时正确响应。给出你的技术实现方案？ 用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可 HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的 虽然ajax可以无刷新改变页面内容，但无法改变页面URL 其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题 有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变 再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的 为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState 可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。 pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。 如何调用 var state = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state, document.title, url); state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。 replaceState和pushState是相似的，不需要多做解释。 如何响应浏览器的前进、后退操作 window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。 window.addEventListener(‘popstate’, function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); }}, false); 这样就可以结合ajax和pushState完美的进行无刷新浏览了。 35、js的数据类型都有哪些？ 字符串、数字、布尔、数组、对象、Null、Undefined 36、已知ID的input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架) document.getElementById(id).value; 37、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) document.getElementsByTagName(‘input’); 遍历循环 38、设置一个已知ID的div和html内容为xxx，字体颜色设置为黑色？(不使用第三方框架) var div = document.getElementById(id); div.innerHTML = ”; div.style.color = ”; 39、当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？ 直接在DOM里绑定事件：”<div onclick=”test()”>xx</div>” … 在JS里通过onclick绑定：xxx.onclick = test 通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) 那么问题来了，Javascript的事件流模型都有什么？ “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播 “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的 “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡 40、什么是Ajax和JSON，他们的优缺点？ Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。 优点： 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量 避免用户不断刷新或者跳转页面，提高用户体验 缺点： 对搜索引擎不友好（ 要实现ajax下的前后退功能成本较大 可能造成请求数的增加 跨域问题限制 JSON是一种轻量级的数据交换格式，ECMA的一个子集 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字） 41、请看下列代码输出什么？解释原因？ var a; alert(typeof a); //undefined alert(b); //报错 解释：Undefined是一个只有一个值的数据类型，这个值就是”undefined”， 在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。 注意未申明的变量和声明了未赋值的是不一样的。 ar a = null; alert(typeof a); //object 解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object” 42、js的typeof返回哪些数据类型？ 有如下6种返回值： 1）number； 2）string； 3）boolean； 4）object 5）function 6）undefined; 43、split() join()的区别？ join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。 指定分隔符方法join(“#”);其中#可以是任意 与之相反的是split()方法：用于把一个字符串分割成字符串数组. 44、数组方法pop() push() unshift() shift()? push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，而且是在原数组进行操作，任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素，并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素，并返回弹出的元素，如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的”拆分现象” unshift和shift这两个方法都是通过对数组的头部进行的操作，其他基本跟push和pop类似 shift:从集合中把第一个元素删除，并返回这个元素的值。 unshift: 在集合开头添加一个或更多元素，并返回新的长度 push:在集合中添加元素，并返回新的长度 pop:从集合中把最后一个元素删除，并返回这个元素的值 45、ajax请求时，如何解释json数据？ 1.$.JSON(url,params,fun); 2.$.ajax({}); dataType:’json’ 都可以使用$each();进行遍历 $.each(object,function(index,item){ }); 46、js的本地对象，内置对象和宿主对象？ 本地对象： Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定义好了的对象 内置对象： Global 和 Math，内置对象是本地对象的一种 宿主对象：所有的BOM和DOM对象都是宿主对象，是那些官方未定义，你自己构建的对象加上DOM和BOM对象组成的 47、列举所了解的前端框架并简述？ 以下是常用的前端基础框架：
以下是常见的前端构建框架：
以下是场检的JS/CSS模块化开发的框架：
48、对web标准以及w3c的理解与认识？ （1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。— SEO （2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。 （3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便 （4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性 遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。 49、xhtml和html有什么区别？ XHTML是HTML 4.01和XML1.0的杂交，XHTML1.0是基于HTML4.01的 HTML是一种基于标准通用标记语言（SGML）的应用，而XHTML则基于可扩展标记语言（XML），HTML和XHTML其实是平行发展的两个标准。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡 1、XHTML要求正确嵌套 2、XHTML所有元素必须关闭 3、XHTML区分大小写 4、XHTML属性值要加引号 5、XHTML用id属性代替name属性 6、属性值不能简写 50、行内元素有哪些？块级元素有哪些？css和盒子模型？ 盒子模型：内容、填充（padding）、边框（border）、外边界（margin） box-sizing:border-box; box-sizing:content-box; 51、css选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和import哪个级别更高？ 可继承的：font-size font-family color 不可继承的：border padding margin background-color width height 优先级：!important > [ id > class > tag ] important 比 内联优先级高 52、前端页面有哪三层构成，分别是什么？作用是什么？ 结构层、表示层、行为层 结构层（structural layer） 由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：”这是一个文本段。” 表示层（presentation layer） 由 CSS 负责创建。 CSS对”如何显示有关内容”的问题做出了回答。 行为层（behaviorlayer） 负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域 53、你如何对网站的文件和资源进行优化？期待的解决方法包括？ A、文件合并，减少http请求，合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片 B、文件最小化/文件压缩，减少文件下载的体积；常用的工具是YUI Compressor C、使用 CDN 托管，尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定 D、缓存的使用（多个域名来提供缓存） E、GZIP 压缩你的 JS 和 CSS 文件 54、看下列代码？输出什么？解释原因？ var a = null; alert(typeof a); 答案：输出为object, JS类型值是存在32 BIT 单元里,32位有1-3位表示TYPE TAG,其它位表示真实值 而表示object的标记位正好是低三位都是0 000: object. The data is a reference to an object. 而js 里的Null 是机器码NULL空指针, (0x00 is most platforms).所以空指针引用 加上 对象标记还是0,最终体现的类型还是object.. 这也就是为什么Number(null)===0吧… The history of “typeof null” 2. 曾经有提案 typeof null === ‘null’.但提案被拒绝 harmony:typeof_null 55、看代码给答案？并进行解释？ var a = new Object(); a.value=1; b = a; b.value=2; alert(a.value); 56、var numberArray = [3,6,2,4,1,5]; 1) 实现对该数组的倒排，输出[5,1,4,2,6,3] 2) 实现对该数组的降序排列，输出[6,5,4,3,2,1] var numberArray = [3,6,2,4,1,5]; numberArray.reverse(); // 5,1,4,2,6,3 numberArray.sort(function(a,b){ //6,5,4,3,2,1 return b-a; }) 57、你能描述一下渐进增强和优雅降级之间的不同吗? 如果提到了特性检测，可以加分。 检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。 58、线程与进程的区别？ 一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 59、请解释一下什么是”语义化的 HTML”？ 语义化的好处： 1：去掉或样式丢失的时候能让页面呈现清晰的结构： html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是 的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。 2.屏幕阅读器（如果访客有视障）会完全根据你的标记来”读”你的网页. 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）. 4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记, 而只注重语义标记. 6.便于团队开发和维护 语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此 60、为什么利用多个域名来提供网站资源会更有效？ 浏览器同一时间可以从一个域名下载多少资源？你的浏览器能同时保持对一个域名的多少连接？ 三个最主流的原因: 1. CDN缓存更方便 2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4./- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。) 3. Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢。。。 还有另外两个非常规原因: 4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。 正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。 5. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_^ 这个可能被用的不多。 PS: 关于Cookie的问题，带宽是次要的，安全隔离才是主要的。 关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走 https的话，还有要多买证书和部署的问题，^_^。 61、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） 1.优化图片 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 3.优化CSS（压缩合并css，如margin-top,margin-left…) 4.网址后加斜杠（如www.campr.com/目录，会判断这个”目录是什么文件类型，或者是目录。） 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） 6.减少http请求（合并文件，合并图片）。 62、如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？ 1.建议这个项目使用像 EditorConfig (http:///) 之类的规范 2.为了保持一致性，接受项目原有的风格 3.直接使用 VIM 的 retab 命令 63、请写一个简单的幻灯效果页面 如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果） 可以采用CSS3的单选按钮radio来实现图片的切换 64、你都使用哪些工具来测试代码的性能？ Profiler, JSPerf（http:///nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo 65、如果今年你打算熟练掌握一项新技术，那会是什么？ nodejs，html5，css3，less 66、请谈一下你对网页标准和标准制定机构重要性的理解？ (google)w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。 67、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ FOUC – Flash Of Unstyled Content 文档样式闪烁 <style type=”text/css” media=”all”>@import “../fouc.css”;</style> 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。 解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script></script>元素就可以了。 68、doctype（文档类型）的作用是什么？你知道多少种文档类型？ 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。 69、浏览器标准模式和怪异模式之间的区别是什么？ W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。 IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。 标准的width不包括：padding\border 在js中如何判断当前浏览器正在以何种方式解析？ document对象有个属性compatMode ,它有两个值： BackCompat 对应quirks mode CSS1Compat 对应strict mode 70、使用 XHTML 的局限有哪些？ xhtml要求严格，必须有head、body每个dom必须要闭合。 如果页面使用’application/xhtml+xml’会有什么问题吗？ 一些老的浏览器并不兼容。 十六、如果网页内容需要支持多语言，你会怎么做？ 编码UTF-8，空间域名需要支持多浏览地址。 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站 71、data-属性的作用是什么？ data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取 <div data-author=”david” data-time=”2011-06-20″ data-comment-num=”10″>…</div> div.dataset.commentNum; // 10 需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。 72、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ <nav>, <header>,<section>, <footer> 73、请描述一下 cookies，sessionStorage 和 localStorage 的区别？ sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的 cookies会发送到服务器端。其余两个不会。 Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。 Firefox每个域名cookie限制为50个。 Opera每个域名cookie限制为30个。 Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。 Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。 InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。 74、描述下 “reset” CSS 文件的作用和使用它的好处。 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。 75、解释下浮动和它的工作原理？ 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留 76、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？ 1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪对象清除浮动。 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。 *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:””;visibility:hidden;height:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> </div> 77、解释下 CSS sprites，以及你要如何在页面或网站中使用它？ CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background- repeat”，”background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。 78、你最喜欢的图片替换方法是什么，你如何选择使用？ <h2> <span 图片丢这里></span>Hello World </h2> 把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。 一般都是：alt，title，onerror 79、讨论CSS hacks，条件引用或者其他？ background-color:blue; 各个浏览器都认识，这里给firefox用； background-color:red\9;\9所有的ie浏览器可识别； background-color:yellow\0; \0 是留给ie8的 +background-color:pink; + ie7定了； _background-color:orange; _专门留给神奇的ie6； :root #test { background-color:purple\9; } :root是给ie9的， @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。 80、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？ 百度 谷歌 SO SOGOU Bing 81、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？ 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。 2. visibility: hidden ;的缺陷 这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 3.overflow:hidden;一个比较合理的方法 .texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; } 就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。 82、你用过栅格系统吗？如果使用过，你最喜欢哪种？ 比如：Bootstrap，流式栅格系统 83、你用过媒体查询，或针对移动端的布局/CSS 吗？ @media screen and (min-width: 400px) and (max-width: 700px) { … } @media handheld and (min-width: 20em), screen and (min-width: 20em) {….} 媒体查询，就是响应式布局。 84、你熟悉 SVG 样式的书写吗？ <svg xmlns=”http://www./2000/svg” xmlns:xlink=”http://www./1999/xlink”> <circle cx=”40″ cy=”40″ r=”24″ style=”stroke:#006600; fill:#00cc00″/> <text x=”250″ y=”150″ font-family=”Verdana” font-size=”10px” fill=”blue”>Hello, out there</text> <defs><style type=”text/css”> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs> <use xlink:href=”#sample1″ class=”sample”/> </svg> 85、如何优化网页的打印样式？ <link rel=”stylesheet” type=”text/css” media=”screen” href=”xxx.css” /> 其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。 <link rel=”stylesheet” type=”text/css” media=”print” href=”yyy.css” /> 但打印样式表也应有些注意事项： 1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。 2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。 3、隐藏掉不必要的内容。（@print div{display:none;}） 4、打印样式表中最好少用浮动属性，因为它们会消失。 如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。 86、在书写高效 CSS 时会有哪些问题需要考虑？ 1.样式是：从右向左的解析一个选择器 2.ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal 3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。） 4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }） 5.想清楚你为什么这样写 6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。） 7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性 87、使用 CSS 预处理器的优缺点有哪些？ (SASS，Compass，Stylus，LESS) 描述下你曾经使用过的 CSS 预处理的优缺点 88、如果设计中使用了非标准的字体，你该如何去实现？ Webfonts (字体服务例如：Google Webfonts，Typekit 等等。) 89、解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？ 浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。 举个例子，有选择器： body.ready #wrapper > .lol233 先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。 至此这个选择器匹配结束，所有还在集合中的元素满足。 大体就是这样，不过浏览器还会有一些奇怪的优化。 为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。 为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。 90、解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
91、解释下事件代理？ JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。 事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。 function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } 92、解释下 JavaScript 中 this 是如何工作的？ this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window 1.如果是call，apply,with，指定的this是谁，就是谁 2.普通的函数调用，函数被谁调用，this就是谁 93、解释下原型继承的原理？ function getProperty(obj, prop) { if (obj.hasOwnProperty(prop)) { return obj[prop]; }else if (obj.__proto__ !== null) { return getProperty(obj.__proto__, prop); }else{ return undefined; } } 94、生成时间戳的两种方法？ JavaScript 获取当前时间戳： 第一种方法： var timestamp = Date.parse(new Date()); 结果：1280977330000 第二种方法： var timestamp = (new Date()).valueOf(); 结果：1280977330748 第三种方法： var timestamp=new Date().getTime()； 结果：1280977330748 第一种：获取的时间戳是把毫秒改成000显示， 第二种和第三种是获取了当前毫秒的时间戳。 95、用原型链的方式给Array对象添加一个数组去重的方法？ Array.prototype.delRepeat=function() { //tempRepeat保存重复数组项 var tempRepeat = []; var obj = {}; //保存数组中每项，及其出现的次数 //遍历数组 for (var i = 0; i < this.length; i++) { if (obj[this[i]]) { if(obj[this[i]]==1) { tempRepeat.push(this[i]); obj[this[i]]++; delete(this[i]); } } else { obj[this[i]] = 1; } } this.filter(function(){ return true;}); return tempRepeat; } var a=[1,3,”eirkgm”,4,6,”eirkgm”,3,3,”eirkgm”,3,3,3,”eirkgm”,4]; alert(a.delRepeat()); 96、定义一个方法，对所有传入的数字参数的第三位小数进行 四舍五入，使得返回值保留两位小数，不够的补0 97、定义一个方法，实现阶乘 function factorial(num) { if(num <= 1) { return 1; } else { return num * arguments.callee(num – 1); } } 98、定义一段代码，页面载入完成1分钟后非缓存模式刷新当前页面 window.onload=function() { setTimeout(function(){ location.reload();//要执行刷新的代码 },60000); } 99、document.getElementById(“HEAD”).onclick=function(oEvent){ var A = oEvent.type.B = oEvent.target } A和B的值是什么？ 100、阻止事件默认行为和事件冒泡的方法是什么 默认行为：event.preventDefault(); 冒泡：event.stopPropregation(); event.cancelBubble(); 101、把Object的实例化对象A、B、C合并 赋值给对象C 102、设置一个已知ID的DIV的html内容为xxx，字体颜色设置为黑色（不使用第三方框架） 103、当一个DOM节点被点击的时候，我们希望能够执行一个函数，应该怎么做？ 直接在DOM里绑定事件： 在JS里通过onclick绑定：xxx.onclick = test 通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) 104、什么是Ajax和JSON，他们的优缺点？ Ajax是一种异步提交数据的方法。 通常在html中，要想重新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面，才能重新刷新数据。那么问题来了，当我们仅仅只需要更新某一个小地方的数据时。我们也来刷新整个页面的话，就显得有点麻烦了，于是Ajax就帮我们完成了这个功能，让我们单独开辟一条道路来进行获取数据，然后页面不需要刷新，用JS把AJAX请求的数据显示到该显示的地方。AJAX叫 无刷新获取技术 json 是一种数据的载体，可以把他想象成数组一样的东西，只不过，它有点牛，就是很多格式都可以自动支持。就差不多这样了。 105、看下列代码输出为何？解释原因？ var a; alert(typeof a);//undefined alert(b); //报错 106、看下列代码，输出什么？解释原因？ var a = null; alert(typeof a); //object 107、看下列代码，输出什么？ 1.var undefined; 2.undefined == null; //true 3.3==true; // true 4.2==true; //false 5.0==false; //true 6.0==”; //true 7.NaN == NaN; //false 8.[]==false; //true 9.[] == ![]; //true 108、看代码给答案？ var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value); //2 109、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2016年4月12日，则 输出2016-04-12 var d = new Date(); // 获取年，getFullYear()返回4位的数字 //今年：2016 var year = d.getFullYear(); // 获取月，月份比较特殊，0是1月，11是12月 var month = d.getMonth() + 1; // 变成两位 month = month < 10 ? ‘0’ + month : month; // 获取日 var day = d.getDate(); day = day < 10 ? ‘0’ + day : day; alert(year + ‘-‘ + month + ‘-‘ + day); 110、将字符串”<tr><td>{$id}</td><td>${name}</td></tr>”中的${id}替换成10，{$name}替换成Tony(使用正则表达式) 答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’); 111、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写出一个函数escapeHtml，将< , > & , ” 进行转义 String.prototype.escapeHTML = function return }; 112、foo = foo || bar ,这行代码是什么意思？为什么要这样写？ foo和bar应该都是bool型变量，||是表示 或 的意思，只要foo或者bar有一个为真，那么这个表达式的值就为真，并把它赋给foo 113、看下列代码，将会输出什么? var foo = 1; function(){ console.log(foo); var foo = 2; console.log(foo); } 结果：undifined，2 var foo=1; 它的作用域是window；但是函数体内有同名局部变量，在执行函数时，第一句会寻找体内变量。 如果想调用该定义，需明确指定作用域，不指定则默认函数体本身。 console.log(window.foo); //1 114、用js实现随机选取10~100之间的10个数字，存入一个数组，并且排序 function sortNumber(a,b){ return a-b;//升序 //return b-a;//降序 } //js实现随机选取10–100之间的10个数字，存入一个数组，并排序 var iArray =[]; function getRandom(iStart,iEnd){ var iChoice = iStart-iEnd+1; return Math.abs(Math.floor(Math.random()*iChoice))+iStart; } for(var i=0;i<10;i++){ iArray.push(getRandom(10,100)) } iArray.sort(sortNumber); alert(iArray); 115、写一个function 清除字符串前后的空格（兼容所有浏览器） 第一种：循环替换 //供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return “”; } var whitespace = new String(” \t\n\r”); var str = new String(s); if (whitespace.indexOf(str.charAt(0)) != -1) { var j=0, i = str.length; while (j < i && whitespace.indexOf(str.charAt(j)) != -1){ j++; } str = str.substring(j, i); } return str; } //去掉右边的空白 www.2cto.com function trimRight(s){ if(s == null) return “”; var whitespace = new String(” \t\n\r”); var str = new String(s); if (whitespace.indexOf(str.charAt(str.length-1)) != -1){ var i = str.length – 1; while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){ i–; } str = str.substring(0, i+1); } return str; } 第二种：正则替换 <SCRIPT LANGUAGE=”JavaScript”> <!– String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, “”); } String.prototype.LTrim = function() { return this.replace(/(^\s*)/g, “”); } String.prototype.RTrim = function() { return this.replace(/(\s*$)/g, “”); } //–> </SCRIPT> //去左空格; function ltrim(s){ return s.replace(/(^\s*)/g, “”); } //去右空格; function rtrim(s){ return s.replace(/(\s*$)/g, “”); } //去左右空格; function trim(s){ return s.replace(/(^\s*)|(\s*$)/g, “”); } 第三种：使用jquery $().trim(); jquery的内部实现为： function trim(str){ return str.replace(/^(\s|\u00A0)+/,”).replace(/(\s|\u00A0)+$/,”); } 第四种：使用motools function trim(str){ return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ”); } 第五种：剪裁字符串方式 function trim(str){ str = str.replace(/^(\s|\u00A0)+/,”); for(var i=str.length-1; i>=0; i–){ if(/\S/.test(str.charAt(i))){ str = str.substring(0, i+1); break; } } return str; } //———————————————————- // 去掉字符串前后的空格 // 返回值： // 去除空格后的字符串 //———————————————————- function trim(param) { if ((vRet = param) == ”) { return vRet; } while (true) { if (vRet.indexOf (‘ ‘) == 0) { vRet = vRet.substring(1, parseInt(vRet.length)); } else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (‘ ‘) == parseInt(vRet.length) – 1)) { vRet = vRet.substring(0, parseInt(vRet.length) – 1); } else { return vRet; } } } |
|
|
来自： 昵称53664225 > 《前端》
