今天的好程序员HTML5大前端面试题，主要包含内容：请实现鼠标点击任意标签，alert该标签的名称、 描述下你对js闭包、面向对象、继承的理解、写出几种IE6 bug的解决方法、 Eval函数的作用、 如何将一个元素600毫秒的速度缓慢向上滑动显示？等知识点，希望对你的面试有所帮助。

一、 对新技术有那些了解，常去的网站有那些

node.js、angular.js、vue.js，reactjs，react-native，微信小程序

掘金、简书、github、csdn，知乎等

二、 用程序找出数组中出现次数超过一半的数字

思路：

    1、 一个数字在数组中出现次数超过了一半，则排序后，位于数组中间的数字一定就是该出现次数超过了长度一半的数字（可以用反证法证明），也即是说，这个数字就是统计学上的中位数。容易想到的办法是用快速排序对数组排序号后，直接取出中间的那个数字，这样的时间复杂度为O(nlogn)，空间复杂度为O(1)。

    2 、事实上可以不用对数组进行排序，或者说仅部分排序，受快速排序的partition函数的启发，我们可以利用反复调用partition函数来求的该数字。我们现在数组中随机选取一个数字，而后通过Partition函数返回该数字在数组中的索引index，如果index刚好等于n/2，则这个数字便是数组的中位数，也即是要求的数，如果index大于n/2，则中位数肯定在index的左边，在左边继续寻找即可，反之在右边寻找。这样可以只在index的一边寻找，而不用两边都排序，减少了一半排序时间。这种情况的平均时间复杂度大致为：T(n) = n+n/2+n/4+n/8+....+1，很明显当n很大时，T(n)趋近于2n，也就是说平均情况下时间复杂度为O(n),但是这种情况下，坏的时间复杂度依然为O(n*n)，坏情况下，index总是位于数组的左或右边，这样时间复杂度为T(n) = n+n一1+n一2+n一3+....+1 = n(n一1)/2，显然，时间复杂度为O(n*n)，空间复杂度为O(1)。

三、 请设计一套方案，用于确保页面中js加载完全，对于优化某网页的加载速度，有什么独到见解

js方法：

<script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script>

jquery方法：

<script type="text/javascript"> $(document).ready(function(){ var userName="xiaoming"; alert(userName); }); </script> 或者简写： $(function(){ var userName="xiaoming"; alert(userName); });

如何确定一个js是否加载完全或者页面中的所有js加载完全，具体办法如下：

function loadScript（ url, callback） {     var script = document.createElement("script");     script.type = "text/javascript";     if (script.readyState) {         script.onreadystatechange = function() {             if (script.readyState == "loaded" || script.readyState == "complete") {                 script.onreadystatechange = null;                 callback();             }         }     } else {         script.onload = function() {             callback();         }     }     script.src = url;     document.getElementsByName("head")[0].appendChild(script); }

如何让脚本的执行顺序按照你设定的顺序执行，使用嵌套的方式：

loadScript("file1.js", function() {     loadScript("file2.js", function() {         loadScript("file3.js", function() {             alert("All files are loaded");         });     }); });

网页加载速度优化：

1、减少请求

大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源，这个在相对低带宽和高延迟的移动设备连接上来说影响严重。

CDNs（内容分发网络）把资源放在离用户地理位置近的地方对解决这个问题能起到很大作用，但是比起获取请求，大量的请求对页面加载时间的影响为严重，而且近的发现表明，CDNs对移动端用户的性能影响越来越低。

2、整合资源

对开发者来说，将Javascript代码和CSS样式放到公共的文件中供多个页面共享是一种标准的优化方法，这个方法能很简单的维护代码，并且提高客户端缓存的使用效率。

在Javascript文件中，要确保在一个页面中相同的脚本不会被加载多次，当大团队或者多个团队合作开发的时候，这种冗余的脚本就很容易出现，你可能会对它的发生频率并不低感到非常吃惊。

Sprites是css中处理图片的一项技术，Sprites就是将多张图片整合到一个线性的网状的大图片中，页面就可以将这个大图片一次性获取回来并且做为css的背景图，然后使用css的背景定位属性展示页面需要的图片部分，这种技术将多个请求整合成一个，能显著地改善性能。

平稳地改进但是需要对资源有控制权限，根据开发者的网站不同权限，一些资源并不需要被整合起来（例如，一些由CMS生成的资源），还有，对于一些外部域引用的资源，强行整合可能会导致问题，马海祥提醒大家需要注意的是，整合资源对手机浏览器来说是一把双刃剑，整合资源确实会在首次访问减少请求，但是大的资源文件可能会导致缓存失效，所以，需要小心地使用各种技术整合资源，以达到优化本地存储的目的。

3、使用浏览器缓存和本地缓存

现在所有的浏览器都会使用本地资源去缓存住那些被Cache一Control或者Expires头标记的资源，这些头能标记资源需要缓存的时间，另外，ETag（实体标签）和Last一Modified头来标识当资源过期后是否需要重新请求，浏览器为了减少不必要的服务器请求，尽可能地从本地缓存中获取资源，并且将那些已经过期的、或者当缓存空间减小的时候将那些很久不用的资源进行清理，浏览器缓存通常包括图片，CSS，Javascript代码，这些缓存能合理地提高网站的性能（比如为了支持后退和前进的按钮，使用一个单独的缓存来保存整个渲染的页面）。

移动浏览器缓存，通常是比桌面PC小的多，这就导致了缓存的数据会很经常被清理，HTML5的缓存基于浏览器缓存提供了一个很好的替换方案，Javascript的localStorage已经在所有主流的桌面和移动端浏览器上都实现了，使用脚本代码能简便地支持HTML5的localStorage操作，可以读写键值数据，每个域名大概有5MB的容量，虽然不同的移动浏览器上读写速度相差很大，但是localStorage大容量的缓存使得它很适合作为客户端的缓存，从localStorage获取资源明显快于从服务器上获取资源，而且在大多数移动设备上也比依靠缓存头或者浏览器的本地缓存灵活可靠，这是移动浏览器比桌面PC有优势的一个地方，在桌面PC上，本地缓存仍然优先使用标准的浏览器缓存，导致桌面PC本地缓存的性能落后于移动浏览器。

在此，马海祥要提醒各位一下：虽然localStorage的机制易于实现，但是它的一些控制机制却是非常复杂的，你需要考虑到缓存带给你的所有问题，比如缓存失效（什么时候需要删除缓存？），缓存丢失（当你希望数据在缓存中的时候它并不在怎么办？），还有当缓存满的时候你怎么办？

4、首次使用的时候在HTML中嵌入资源

HTML的标准是使用链接来加载外部资源，这使得容易在服务器上（或者在CDN上）操作新这些资源，而不是在每个页面上修改新这些资源，根据上文讨论的，这种模式也使得浏览器能从本地缓存而不是服务器上获取资源。

但是对还没有缓存到浏览器localStorage的资源来说，这种模式对网站的性能有负面的影响，一般来说，一个页面需要几十个单独的请求来获取资源从而渲染页面。

所以说，从性能的角度来说，如果一个资源没有很高的被缓存的几率的话，好把它嵌入到页面的HTML中（叫inlining），而不是使用链接外部，脚本和样式是支持内嵌到HTML中的，但是图片和其他的二进制资源其实也是可以通过内嵌包含base64编码的文本来嵌入到HTML中的。

内嵌的缺点是页面的大小会变得非常大，所以对于Web应用来说，关键的是能够跟踪分析这个资源什么时候需要从服务端获取，什么时候已经缓存到客户端了。

另外，在第一次请求资源后必须能够使用代码在客户端缓存资源，因此，在移动设备上，使用HTML5 localStorage能很好地做到内嵌。

由于不知道用户是否已经访问过这个页面了，所以需要网站有机制能生成不同版本的页面。

5、使用HTML5服务端发送事件

Web应用已经使用了各种从服务器上轮询资源的方法来持续地新页面，HTML5的EventSource对象和Server一Sent事件能通过浏览器端的JavaScript代码打开一个服务端连接客户端的单向通道，服务端可以使用这个写通道来发送数据，这样能节省了HTTP创建多个轮询请求的消耗。

这种方式比HTML的WebSocket，WebSocket的使用场景是，当有许多客户端和服务端的交互的时候（比如消息或者游戏），在全双工连接上建立一个双向通道。

这个技术是基于具体的技术实现的，如果你的网站当前是使用其他的Ajax或者Comet技术来轮询的，转变成Server一Sent事件需要重构网站的Javascript代码。

6、消除重定向

当用户在一个移动设备上访问桌面PC网站的时候，Web网站应用通常读取HTTP的user一agent头来判断这个用户是否是来自移动设备的，然后应用会发送带有空HTTP body和重定向HTTP地址头的HTTP 301（或者302）请求，把用户重定向到网站的移动版本上去，但是这个额外的客户端和服务端的交互通常在移动网络上会消耗几百毫秒，因此，在原先的请求上传递移动的web页会比传递一个重定向的信息并让客户端再请求移动页面快。

对于那些想要在移动设备上看桌面PC网站的用户来说，你可以在移动web页面上提供一个链接入口，这样也能同时表示你的网站是并不提倡这种行为的。

虽然这个技术在理论上是简单的，但是实际上并不易于实施，由于有些m.sites是宿主在其他地方的，所以许多网站会选择重定向到一个不同的服务器上，有的网站则是会在重定向请求的时候种植上Cookie告诉Web应用这个用户是在使用移动设备，这种方法可能对web应用来说容易控制。

7、减少资源负载

关于移动端页面的大小问题，渲染小页面快，获取小资源也快，减小每个请求的大小通常不如减少页面请求个数那么显著地提高性能。

但是有些技术在性能方面，特别是在需要对带宽和处理器性能精打细算的移动设备环境下，仍然是能带来很大利益的。

8、压缩文本和图像

诸如gzip这样的压缩技术，依靠增加服务端压缩和浏览器解压的步骤，来减少资源的负载，但是，一般来说，这些操作都是被高度优化过了，而且测试表明，压缩对网站还是起到优化性能的作用的，那些基于文本的响应，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS可以减少大约70%的大小。

浏览器在Accept一Encoding请求头中申明它的解压缩技术，并且当它们接收到服务端返回的Content一Encoding响应头标示的时候，就会按照这个响应头自动做解压操作。

马海祥觉得这种方法的优点就是易于实现，如果设置正确的话，现在所有的Web服务器都支持压缩响应，但是，也有一些桌面PC的安全工具会将请求头中的Accept一Encoding头去掉，这样即使浏览器支持解压缩，用户也无法获取到压缩后的响应。

9、代码简化

简化通常是使用在脚本和样式文件中，删除一些不必要的字符，比如空格，换行符，或者注释等，不需要暴露给外部的命名就可以被缩短为一个或者两个字符，比如变量名，合适的简化资源通常在客户端不需要做任何其他的处理，并且平均减少20%的资源大小，内嵌在HTML中的脚本和样式文件也是可以精简的，有很多很好的库来做精简化的操作，这些库一般也同时会提供合并多个文件这样减少请求数的服务（具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍）。

简化带来的好处并不局限于减少带宽和延迟，对于那些移动设备上缓存无法保存的过大资源来说，也是很有改善的，Gzip在这个方面并没有任何帮助，因为资源是在被解压后才被缓存起来的。

Google的Closure Compiler已经难以置信地完成了理解和简化Javascript的工作，但是CSS的简化则没有那么容易，因为对不同浏览器来说有不同的CSS技术能迷惑CSS简化工具，然后让CSS简化后无法正常工作，马海祥提醒大家必须要注意的是，已经有这样的案例了，即使只是删除了不必要的字符，简化工作也有可能破坏页面，所以当你应用简化技术之后，请做一下完整的功能测试工作。

10、调整图片大小

图片通常是占用了Web页面加载的大部分网络资源，也占用了页面缓存的主要空间，小屏幕的移动设备提供了通过调整图片大小来加速传输和渲染图片资源的机会，如果用户只是在小的移动浏览器窗口中看图片的话，高分辨率的图片就会浪费带宽、处理时间和缓存空间。

为了加速页面渲染速度和减少带宽及内存消耗，可以动态地调整图片大小或者将图片替换为移动设备专用的小的版本，不要依靠浏览器来将高分辨率的图片转换成小尺寸的图片，这样会浪费带宽。

另外一个方法是先尽快加载一个低分辨率的图片来渲染页面，在onload或者用户已经开始和页面交互以后将这些低分辨率的图片替换成为高分辨率的图片。

特别应用在高度动态化的网站是有优势的。

11、使用HTML5和CSS 3.0来简化页面

HTML5包括了一些新的结构元素，例如header，nav，article和footer，使用这些语义化的元素比传统的使用div和span标签能使得页面简单和容易解析，一个简单的页面小加载快，并且简单的DOM（Document Object Model）代表着快的JavaScript执行效率，新的标签能很快地应用在包括移动端的新浏览器版本上，并且HTML5设计让那些不支持它的浏览器能平稳过渡使用新标签。

HTML5的一些表单元素提供了许多新属性来完成原本需要javascript来完成的功能，例如，新的placeholder属性用于显示在用户输入进入输入框之前显示的介绍性文字，autofocus属性用于标示哪个输入框应当被自动定位。

也有一些新的输入框元素能不用依靠Javascript就可以完成一些通用的需求，这些新的输入框类型包括像e一mail，URL，数字，范围，日期和时间这样需要复杂的用户交互和输入验证的元素，在移动浏览器上，当需要输入文本的时候，弹出的键盘通常是由特定的输入框类型来做选择的，不支持指定的输入类型的浏览器就会只显示一个文本框。

另外，只要浏览器支持内建的层次，圆角，阴影，动画，过渡和其他的图片效果，CSS 3.0就能帮助你创建轻便简易的页面了，而这些图片效果原先是需要加载图片才能完成的，这样，这些新特性就能加速页面渲染了。

人工地做这些改动是非常复杂和耗时的，如果你使用CMS，它可以帮你生成许多你不需要控制的HTML和CSS（具体可查看马海祥博客《制作移动端手机网站过程中的SEO优化方法技巧》的相关介绍）。

12、延迟渲染”BELOW一THE一FOLD”内容

可以确定的是如果我们将不可见区域的内容延迟加载，那么页面就会快地展现在用户面前，这个区域叫做“below the fold”，为了减少页面加载后需要重新访问的内容，可以将图片替换为正确的高宽所标记的<img>标签。

一些好的Javascript库可以用来处理这些below一the一fold 延迟加载的图像。

13、延迟读取和执行的脚本

在一些移动设备上，解析Javascript代码的速度能达到100毫秒每千字节，许多脚本的库直到页面被渲染以后都是不需要的加载的，下载和解析这些脚本可以很安全地被推迟到onload事件之后来做。

例如，一些需要用户交互的行为，比如托和拽，都不大可能在用户看到页面之前被调用，相同的逻辑也可以应用在脚本执行上面，尽量将脚本的执行延迟到onload事件之后，而不是在初始化页面中重要的可被用户看到的内容的时候执行。

这些延迟的脚本可能是你自己写的，重要的是，也有可能是第三方的，对广告、社交媒体部件、或者分析的差劲的脚本优化会导致阻塞页面的渲染，会增加珍贵的加载时间，当然，你需要小心地评估诸如jquery这样为移动网站设计的大型脚本框架，特别当你仅仅只是使用这些框架中的一些对象的时候要小心评估。

许多第三方的框架现在提供延迟加载的异步版本的API，开发者只需要将原先的逻辑转化到这个异步版本，一些JavaScript要做延迟加载会有些复杂，因为在onload之后执行这些脚本需要注意很多注意事项（例如，你有个脚本需要绑定到onload事件上，你需要做什么？如果你将脚本延迟到onload事件之后，就一定就会失去很多执行的时机）。

14、使用Ajax来增强进程

Ajax（Asynchronous JavaScript and XML）是一项使用XHR（XMLHttpRequest）对象来从Web服务器上获取数据的技术，它并不需要新正在运行的页面，Ajax能新页面上的某个部分而不需要重新构建整个页面，它通常用来提交用户的交互相应，但是也可以用来先加载页面的框架部分，然后当用户准备好浏览网页的时候再填充详细的内容。

尽管是这个名字，但是XMLHttpRequest并不强制要求你只能使用XML，你可以通过调用overrideMineType方法来制定“application/json”类型来使用json替换XML，使用JSON.parse会比使用原生的eval()函数快了几乎两倍，并且为安全。

同时，切记Ajax的返回响应也会得益于那些应用在普通的返回响应的优化技术上面，确保对你的Ajax返回响应使用了缓存头，简化，gzip压缩，资源合并等技术。

由于这个技术是根据具体应用不同而不同的，所以很难量化，或许由于跨域问题，你需要使用XHR2，这个技术能使用外部域的资源，从而能进行跨域的XHR请求。

15、根据网络状况进行适配处理

由于使用多带宽会使用多移动网络的费用，所以只有能检测网络的类型才能使用针对特定网络的优化技术。

例如，预加载未来使用到的请求是非常聪明的做法，但是如果用户的带宽很稀有，并且加载的有些资源是永远不会用到的话，这个技术就是不合理的了。

在Android 2.2+，navigator.connection.type属性的返回值能让你区分Wifi和2G/3G/4G网络，在Blackberry上，blackberry.network也能提供相似的信息，另外，服务端通过检测请求中的User一Agent头或者其他的嵌入到请求中的信息能让你的应用检测到网络状况。

检测网络信息的API近已经有所变化了，接口现在不是直接定义Wi一Fi，3G等网络状况，而是给出了带宽信息和诸如“非常慢，慢，快和非常快”这样的建议，有个属性能给出估计的MB/s值和一个“meterd”的Boolean值来表示它的可信度，但是对浏览器来说，很难根据这个来判断环境，判断当前网络环境然后适配仍然是一种好的方法（具体可查看马海祥博客《百度移动搜索开放适配服务的3种方法》的相关介绍），但是这种方法正在被考虑被替换。

16、对多线程来说尽量使用HTML5的WEB WORKER特性

HTML5中的Web Worker是使用多个线程并发执行Javascript程序，另外，这种特别的多线程实现能减少困惑开发者多年的，在其他平台上遇到的问题，例如，当一个线程需要改变一个正在被其他线程使用的资源该如何处理，在Web Worker中，子线程不能修改主用户界面（UI）线程使用的资源。

对提高移动站点的性能来说，Web Worker中的代码很适合用来预处理用户完成进一步操作所需要的资源的，特别是在用户的带宽资源不紧缺的情况下，在低处理器性能的移动设备上，过多的预加载可能会干扰当前页面的UI响应，使用多线程代码，让Web Worker对象（并且尽可能使用localStorage来缓存数据）在另外一个线程中操作预加载资源，这样就能不影响当前的UI表现了。

要特别说明的是，Web Worker只在Android 2.0以上的版本实现，而且iphone上的ios5之前的版本也不支持，在桌面PC上，总是落后的IE只在IE 10才支持Web Worker。

虽然这项技术并不是非常难实现，但是对Web Workers来说，有一些限制需要强制遵守，Web Workers不能进入到页面的DOM，也不能改变页面上的任何东西，Web Worker很适合那种需要后台计算和处理的工作。

17、将CLICK事件替换成TOUCH事件

在触摸屏设备上，当一个用户触碰屏幕的时候，onclick事件并没有立即触发，设备会使用大约半秒（大多数设备差不多都是300毫秒）来让用户确定是手势操作还是点击操作，这个延迟会很明显地影响用户期望的响应性能，要使用touchend事件来替换才能解决，当用户触碰屏幕的时候，这个事件会立即触发。

为了要确保不会产生用户不期望的行为，你应该也要使用touchstart和touchmove事件，例如，除非同时有个touchstart事件在button上，否则不要判断touchend事件在button上就意味着点击行为，因为用户有可能从其他地方触碰开始，然后拖拽到button上触碰结束的，你也可以在touchstart事件之后使用touchmove事件来避免将touchend事件误判为点击，当然前提是需要假设拖拽的手势并不是预期产生点击行为。

另外，你也需要去处理onclick事件来让浏览器改变button的外观从而标识为已点击的状态，同时你也需要处理那些不支持touch事件的浏览器，为了避免代码在touchend和onclick代码中重复执行，你需要在确保用户触碰事件已经在touchend执行了之后，在click事件中调用preventDefault和stopPropagation方法。

这种技术需要多工作才能在一个页面中增加和维护链接，touch事件的代码必须考虑其他手势，因为替换click的还有可能是缩放或者敲击动作。

18、支持SPDY协议

应用层HTTP和HTTPS协议导致的一些性能瓶颈，使得不论是桌面还是移动端的网站都非常难受，在2009年，谷歌开始研发一种叫做SPDY（谐意是“speedy”）的协议来替换已有的协议，这种协议宣称能突破这些限制，这个协议的目标是让多种浏览器和多种Web服务都能支持，所以这个协议是开源的，但是初步地，只有Google的Chrome浏览器（在版本10及之后的）和google的站点支持，一旦一个Web服务支持SPDY，那么它上面的所有站点都可以和支持这个协议的浏览器使用SPDY进行交互，将SPDY应用在25个top100的Internet网站上，Google收集到的数据是网站的速度会改善27%到60%不等。

SPDY自动使用gzip压缩所有内容，和HTTP不同的是，它连header的数据也使用gzip压缩，SPDY使用多线程技术让多个请求流或者响应流能共用一个TCP连接，另外SPDY允许请求设置优先级，比如，页面中心的视频会比边框的广告拥有高的优先级。

或许SPDY中变革性的发明就是流是双向的，并且可以由客户端或者服务端发起，这样能使得信息能推送到客户端，而不用由客户端发起第一次请求，例如，当一个用户第一次浏览一个站点，还没有任何站点的缓存，这个时候服务端就可以在响应中推送所有的请求资源，而不用等候每个资源被再次独立请求了，作为替换协议，服务端可以发送暗示给客户端，提示页面需要哪些资源，同时也允许由客户端来初始化请求。即使是使用后一种这样的方式也比让客户端解析页面然后自己发现有哪些资源需要被请求来得快。

虽然SPDY并没有对移动端有什么特别的设置，但是移动端有限的带宽就使得如果支持SPDY的话，SPDY在减少移动网站的延迟是非常有用的。

依据网站和服务的环境来进行平稳操作或进一步考虑，Google有一个SPDY模块支持Apache2.2 – mod_spdy – 这个模块是的；但是mod_spy有线程上的问题，并且和mod_php协作并不是很好，所以要求你使用这个技术的时候要确保你的网站的正常运行。

四、 请实现鼠标点击任意标签，alert该标签的名称（注意兼容性）

function elementName(evt){     evt = evt|| window.event;     var selected = evt.target || evt.srcElement;     alert(selected.tagName);    }

五、 对string对象进行扩展，使其具有删除前后空格的方法

String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }

六、 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

1)bootstrap, easy UI, highcharts和echarts，  jqueryUI , jquery、angular.js,  vue.js, reactjs等。

2)前端开发工具：gulp  webpack

3)轮播插件，拖拽插件

七、 用一句话概述您的优点，用一句话概述您的缺点

自由发挥

八、 描述下你对js闭包。面向对象、继承的理解

1）闭包理解：

  个人理解：闭包就是能够读取其他函数内部变量的函数；

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

闭包常见用途：

创建特权方法用于访问控制

事件处理程序及回调

2） 面向对象：

面向对象编程，即OOP，是一种编程范式，满足面向对象编程的语言，一般会提供类、封装、继承等语法和概念来辅助我们进行面向对象编程。

 参考：

http://www.ruanyifeng.com/blog/2010/05/object一oriented_javascript_encapsulation.html

3）继承：

对象继承分两种情况，一种是构造函数的继承，一种是原型（prototype）的继承：

1． 构造函数的继承，比较简单，只需要在子对象中添加代码：parent.apply(this, arguments);

关于原型的继承优化的方法，利用空对象作为中介

2． 拷贝继承

可参考：

https://segmentfault.com/a/1190000002440502

http://blog.csdn.net/james521314/article/details/8645815

九、 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。

非IE内核浏览器：firefox opera safari chrome 。

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink； 

十、 写出几种IE6 bug的解决方法

1）png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

2）IE6双倍边距bug：在该元素中加入display:inline 或 display:block
  3）像素问题 使用多个float和注释引起的 使用dislpay:inline 一3px  
  4）超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
  5）z一index问题 给父级添加position:relative
  6）Min一height 小高度 ！Important 解决’ 7.select 在ie6下遮盖 使用iframe嵌套
  7）为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line一height:1px）

十一、 清楚浮动的几种方法，各自的优缺点

1、 父级div定义伪类:after和zoom

<style type="text/css">  　  .div1{background:#000080;border:1px solid red;}     .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}  　  .left{float:left;width:20%;height:200px;background:#DDD}  　  .right{float:right;width:30%;height:80px;background:#DDD} 　   /*清除浮动代码*/  　  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}  　  .clearfloat{zoom:1} </style> <div class="div1 clearfloat"> 　　<div class="left">Left</div> 　　<div class="right">Right</div> </div> <div class="div2">      div2 </div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

2、 父级div定义overflow:hidden

<style type="text/css">  　 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}   .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px;width:98%}  　 .left{float:left;width:20%;height:200px;background:#DDD}  　 .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> 　　<div class="left">Left</div> 　　<div class="right">Right</div> </div> <div class="div2"> 　　div2 </div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

3、 结尾处加空div标签clear:both

<style type="text/css"> 　   .div1{background:#000080;border:1px solid red} 　   .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}  　  .left{float:left;width:20%;height:200px;background:#DDD} 　   .right{float:right;width:30%;height:80px;background:#DDD} 　   /*清除浮动代码*/ 　   .clearfloat{clear:both} </style> <div class="div1"> 　　<div class="left">Left</div> 　　<div class="right">Right</div> 　　<div class="clearfloat"></div> </div> <div class="div2"> 　　div2 </div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。

优点：简单，代码少，浏览器支持好，不容易出现怪问题。

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

4、 父级div定义height

<style type="text/css"> 　　   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 　　   .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}  　　  .left{float:left;width:20%;height:200px;background:#DDD} 　　   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> 　　<div class="left">Left</div> 　　<div class="right">Right</div> </div> <div class="div2"> 　　div2 </div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握。

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。

建议：不推荐使用，只建议高度固定的布局时使用。

5、 父级div定义overflow:auto

<style type="text/css">  　　  .div1{background:#000080;border:1px solid red;          /*解决代码*/width:98%;overflow:auto}  　.div2{background:#800080; border:1px solid red; height:100px; margin- top:10px;width:98%}  　　  .left{float:left;width:20%;height:200px;background:#DDD} 　　   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> 　　<div class="left">Left</div> 　　<div class="right">Right</div> </div> <div class="div2"> 　　div2 </div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

十二、 Javascript的typeof返回哪些数据类型；列举3种强制类型转换和2中隐式类型转换

1）返回数据类型

undefined

string

boolean

number

symbol(ES6)

Object

Function

2）强制类型转换

Number(参数)  把任何类型转换成数值类型。

parseInt(参数1，参数2)  将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数)：可以将任何类型转换成字符串

Boolean()  可以将任何类型的值转换成布尔值。

3）隐式类型转换

1.四则运算

加法运算符+是双目运算符，只要其中一个是String类型，表达式的值便是一个String。

对于其他的四则运算，只有其中一个是Number类型，表达式的值便是一个Number。

对于非法字符的情况通常会返回NaN：

'1' * 'a'     // => NaN，这是因为parseInt(a)值为NaN，1 * NaN 还是 NaN

2.判断语句

判断语句中的判断条件需要是Boolean类型，所以条件表达式会被隐式转换为Boolean。   其转换规则同Boolean的构造函数。比如：

var obj = {};if(obj){

    while(obj);}

3.Native代码调用

JavaScript宿主环境都会提供大量的对象，它们往往不少通过JavaScript来实现的。  JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：

alert({a: 1});    // => [object Object]

十三、 写出3个使用this的典型应用

1.

function Thing() { }  Thing.prototype.foo = "bar";  Thing.prototype.logFoo = function () {       console.log(this.foo);  }  Thing.prototype.setFoo = function (newFoo) {       this.foo = newFoo;   }   var thing1 = new Thing();   var thing2 = new Thing();  thing1.logFoo(); //logs "bar"  thing2.logFoo(); //logs "bar"  thing1.setFoo("foo");  thing1.logFoo(); //logs "foo";  thing2.logFoo(); //logs "bar";  thing2.foo = "foobar";  thing1.logFoo(); //logs "foo";  thing2.logFoo(); //logs "foobar";

 

2.

function Thing1() { }   Thing1.prototype.foo = "bar";   function Thing2() {      this.foo = "foo";  }   Thing2.prototype = new Thing1();   function Thing3() {}   Thing3.prototype = new Thing2();   var thing = new Thing3();   console.log(thing.foo); //logs "foo"

 

3.

function Thing() {}   Thing.prototype.foo = "bar";   Thing.prototype.logFoo = function () {       function doIt() {           onsole.log(this.foo);        }       doIt.apply(this);   }  function doItIndirectly(method) { method();  } var thing = new Thing(); doItIndirectly(thing.logFoo.bind(thing)); //logs bar

十四、 对前端界面工程师这个职位是怎么理解的？它的前景怎样？

前端工程师属于一个比较新兴的技术，各种技术层出不穷，随着客户体验的重要性前端需要掌握的技能也越来越多，对前端的要求也越来越多，而且我们前端是贴近用户的程序员，主要负责实现界面交互，提升用户体验，而且有了Node.js，前端可以实现服务端的一些事情，针对服务器的优化、拥抱新前端技术，除了掌握必要的技能还要掌握用户的心理，善于沟通。

前景：前景无疑是值得肯定的，也需要我们时刻关注新的技术，这会是一个时刻都在学习的道路

十五、 Eval函数的作用

   eval可以将字符串生成语句执行，一般执行动态的js语句。
   eval的使用场合：有时候我们预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。

十六、 标签上title与alt属性的区别是什么

title 是鼠标放上去的额外信息

alt 是图片不能正常显示的时候，用文字代替

十七、 对WEB标准以及w3c的理解与认识？

Web标准就是将页面的解构、表现和行为各自独立实现，w3c对标注提出了规范化的要求

1.对结构的要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）标签字母要小写；

2）标签要闭合；

3）标签不允许随意嵌套。

2.对css和js的要求：

1）尽量使用外联css样式表和js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验高，代码维护简单，便于改版；

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

十八、 Css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth 一 child）

 

可继承： font一size font一family color,;

不可继承 ：border padding margin width height

优先级就近原则，样式定义近者为准；载入样式以后载入的定位为准;

优先级为:  !important >  id > class > tag  

 important 比 内联优先级高

十九、 请戳出ie6/7下特有的cssbug

一：li边距“无故” 增加

设置ul的显示形式为*display:inline一block;即可，前面加*是只 针对IE6/IE7有效

二：IE6 不支持min一height属性，但它却认为height就是小高度

使用ie6不支持但其余浏览器支持的属性!important。

三:Overflow:

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

四：border：none 在IE6不起作用： 写成border：0 就可以了

五:100%高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义 height:100%;。

六:双边距 Bug

当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加一个display：inline

七：躲猫猫bug

定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
1.在（那个未浮动的）内容之后添加一个<span style=”clear: both;”></span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

八:IE6 定位的元素1px 间距bug

当定位的父元素或宽度为奇数时，bottom和right会多出现1px，

解决方案，针对IE6进行hack处理

二十、 如何将一个元素600毫秒的速度缓慢向上滑动显示？

如果需要在父元素底部向上，可以利用margin一top 把子元素，挤下去，同事父元素设置隐藏，然后改变margintop的值也可以利用定来做，把子元素定位下边

(function(){ var oDiv = document.createElement('div'); oDiv.style.width = '100px'; oDiv.style.height = '100px'; oDiv.style.backgroundColor = 'red'; oDiv.style.position = 'absolute'; oDiv.style.marginTop = 100 + 'px'; document.body.appendChild(oDiv); var timer = setInterval(function(){ var m = parseInt(oDiv.style.marginTop); if (m == 0 ) { clearInterval(timer); return; } oDiv.style.marginTop = parseInt(oDiv.style.marginTop) 一 1 + 'px'; },600); })();