前端面试总结
HTMLDoctype做用? 严格模式与混杂模式如何区分？它们有何意义?javascript <!DOCTYPE><html>（1）、声明位于文档中的最前面，处于标签以前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。 （4）、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？css （1）CSS规范规定，每一个元素都有display属性，肯定该元素的类型，每一个元素都有默认的display值， 好比div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：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>（3）知名的空元素： <area><base><col><command><embed><keygen><param><source><track><wbr>不为人知的是： link 和@import 的区别是？html 1link@import（）属于XHTML标签，而是CSS提供的; 2link@import（）页面被加载的时，会同时被加载，而引用的CSS会等到页面被加载完再加载; 3link（）import只在IE5以上才能识别，而是XHTML标签，无兼容问题; 4link@import（）方式的样式的权重 高于的权重. 浏览器的内核分别是什么?前端 * IE浏览器的内核Trident、火狐浏览器的内核Gecko、Chrome的浏览器内核：WebKit Opera内核原为Presto，现为Blink； 常见兼容性问题？html5 png24iE6PNG8*位的图片在浏览器上出现背景，解决方案是作成. marginpadding{margin:0;padding:0;}*浏览器默认的和不一样。解决方案是加一个全局的*来统一。
IE6bugfloatmarginie6margin*双边距:块属性标签后，又有横行的状况下，在显示比设置的大。 ie#box{ float:left; width:10px; margin:0 0 0 100px;} 浮动产生的双倍距离
IEpxfloatdisplay:inlineie6 这种状况之下会产生20的距离，解决方案是在的标签样式控制中加入 ——_;将其转化为行内属性。(_这个符号只有会识别) 渐进识别的方式，从整体中逐渐排除局部。 IE 首先，巧妙的使用“\9”这一标记，将游览器从全部状况中分离出来。 IE8IE7IE6IE8 接着，再次使用“+”将和、分离开来，这样已经独立识别。 css .bb{
background-color:#f1ee18;/*全部识别*/ .background-color:#00deff\9; /*IE六、七、8识别*/ +background-color:#a200ff;/*IE六、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } IE* 下,可使用获取常规属性的方法来获取自定义属性, getAttribute 也可使用()获取自定义属性; FirefoxgetAttribute 下,只能使用()获取自定义属性. getAttribute 解决方法:统一经过()获取自定义属性. IEevenxypageXpageY*下,对象有,属性,可是没有,属性; FirefoxeventpageXpageYxy 下,对象有,属性,可是没有,属性. IEHTTP*解决方法：（条件注释）缺点是在浏览器下可能会增长额外的请求数。 Chromepxpx*中文界面下默认会将小于 12的文本强制按照 12显示, CSS-webkit-text-size-adjustnone 可经过加入属性:;解决. hoverhoveractiveCSSL-V-H-Aa:link{}a:visited{}a:hover{}a:active{}超连接访问事后样式就不出现了 被点击访问过的超连接样式不在具备和了解决方法是改变属性的排列顺序::
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？java * HTML5如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。 *绘画 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新标签： * IE8/IE7/IE6支持经过document.createElement方法产生的标签， 能够利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还须要添加标签默认的样式： *固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 如何区分： DOCTYPE声明\新增的结构元素\功能元素 语义化的理解？node 用正确的标签作正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的。 搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 HTML5的离线储存？jquery localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 (写)描述一段语义的html代码吧。git <article><nav><header><footer>（HTML5中新增长的不少标签（如：、、和等） 就是基于语义化设计原则） < div id="header"> < h1>< /h1> 标题 < h2>< /h2> 专一Web前端技术 < /div> iframe有那些缺点？程序员 *iframe会阻塞主页面的Onload事件； *iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript 动态给iframe添加src属性值，这样能够能够绕开以上两个问题。 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ localcookie在浏览器和服务器间来回传递。 sessionStorage和Storage不会 localsessionStorage和Storage的存储空间更大； localsessionStorage和Storage有更多丰富易用的接口； localsessionStorage和Storage各自独立的存储空间； 如何实现浏览器内多个标签页之间的通讯? 调用localstorge、cookies等本地存储方式 webSocket如何兼容低浏览器？ AdobeFlash Socket、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR CSS介绍一下CSS的盒子模型？（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading; （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？ * 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）1.id选择器（ # myid） * 可继承的样式： font-size font-family color, UL LI DL DD DT; * 不可继承的样式：border padding margin width height ; * 优先级就近原则，同权重状况下样式定义最近者为准; * 载入样式以最后载入的定位为准; 优先级为: class > tag !important > id > important比 内联优先级高 CSS3新增伪类举例： p:first-of-typepp选择属于其父元素的首个 <>元素的每一个 <>元素。 p:last-of-typepp 选择属于其父元素的最后 <>元素的每一个 <>元素。 p:only-of-typepp 选择属于其父元素惟一的 <>元素的每一个 <>元素。 p:only-childp 选择属于其父元素的惟一子元素的每一个 <>元素。 p:nth-child(2)p 选择属于其父元素的第二个子元素的每一个 <>元素。 :enabled:disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 如何居中div？如何居中一个浮动元素？ 给div设置一个宽度，而后添加margin:0 auto属性 div{
width:200px; margin:0 auto; } 居中一个浮动元素 肯定容器的宽高 宽500 高 300 的层 设置层的外边距 .div{
Width:500px ; height:300px;//高度能够不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;} 列出display的值，说明他们的做用。position的值， relative和absolute定位原点是？ 1. block象块类型元素同样显示。 none缺省值。象行内元素类型同样显示。 inline -block象行内元素同样显示，但其内容象块类型元素同样显示。 list -item象块类型元素同样显示，并添加样式列表标记。 2. *absolute static 生成绝对定位的元素，相对于定位之外的第一个父元素进行定位。 *fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 *relative 生成相对定位的元素，相对于其正常位置进行定位。 static * 默认值。没有定位，元素出如今正常的流中 *（忽略 top, bottom, left, right z-index 声明）。 * inherit规定从父元素继承 position 属性的值。 CSS3有哪些新特性？ 810 CSS3实现圆角（border-radius:px），阴影（box-shadow:px）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 90.850.9003090//旋转,缩放,定位,倾斜 transform:rotate(deg) scale(,) translate(px,-px) skew(-deg,deg); 增长了更多的CSS选择器 多背景 rgba 你怎么来实现页面设计图，你认为前端应该如何高质量完成工做? 一个满屏 品 字布局 如何设计? *首先划分红头部、body、脚部；。。。。。 实现效果图是最基本的工做，精确到2px； 与设计师，产品经理的沟通和项目的参与 作好的页面结构，页面重构和用户体验 处理hack，兼容、写出优美的代码格式 针对服务器的优化、拥抱 HTML5。 常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？ *使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤为是jQuery，超过91%。 轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。 （理解这些框架的功能、性能、设计原理） * Sublime Text、Eclipse、Notepad、Firebug、HttpWatch、Yslow。 *城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好） 常常遇到的CSS的兼容性有哪些？缘由，解决方法是什么？ 为何要初始化CSS样式。 -CSS由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对初始化每每会出现浏览器之间的页面显示差别。 -SEO固然，初始化样式会对有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。 {padding: 0; margin: 0;}*最简单的初始化方法就是： *（不建议）
bodyh1h2h3h4h5h6hrpblockquotedldtddulollipreformfieldsetlegendbuttoninputtextareathtd{ margin:0; padding:0; }bodybuttoninputselecttextarea{ font:12px/1.5tahoma, arial, \5b8b\4f53; }h1h2h3h4h5h6{ font-size:100%; }addresscitedfnemvar{ font-style:normal; }codekbdpresamp{ font-family:couriernew, courier, monospace; }small{ font-size:12px; }ulol{ list-style:none; }a{ text-decoration:none; }a:hover{ text-decoration:underline; }sup{ vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend{ color:#000; }fieldsetimg{ border:0; }buttoninputselecttextarea{ font-size:100%; }table{ border-collapse:collapse; border-spacing:0; }淘宝的样式初始化：,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
absolute的containing block计算方式跟正常流有什么不一样？ position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ 对BFC规范的理解？ （W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关 系和相互做用。） css定义的权重 classid如下是权重的规则：标签的权重为1，的权重为10，的权重为100，如下例子是演示各类定义的权重值： /*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1div{}/*权重为10+1=11*/.class1div{}/*权重为10+10+1=21*/.class1.class2div{}
若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现 解释下浮动和它的工做原理？清除浮动的技巧 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。技巧: 1.使用空标签清除浮动。 这种方法是在全部浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增长了无心义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪对象清除浮动。 该方法只适用于非IE浏览器。具体写法可参照如下示例。使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置 height:0，不然该元素会比实际高出若干像素； 4.在html页面添加：<div class=’clear’></div> 用过媒体查询，针对移动端的布局吗？ 用过 @media screen and (min-width:480px){ } 使用 CSS 预处理器吗？喜欢那个？ 三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。 喜欢哪一个？Sass 什么是CSS预处理器？ CSS 预处理器是一种语言用来为 CSS 增长一些编程的的特性，无需考虑浏览器的兼容性问题，例如你能够在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。 title和alt区别？ alt属性的功能是不能显示图像信息时候的替换文字(即在图片显示的位置上显示文字，说明这个图片的要显示的内容)。Alt属性值的长度必须少于100个英文字符。 title属性能够用在除了base，basefont，head，html，meta，param，script和title以外的全部标签。 title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值能够比alt属性值设置的更长。 title属性有一个很好的用途，即为连接添加描述性文字，特别是当链接自己并非十分清楚的表达了连接的目的。这样就使得访问者知道那些连接将会带他们到什么地方，他们就不会加载一个可能彻底不感兴趣的页面。另一个潜在的应用就是为图像提供额外的说明信息，好比日期或者其余非本质的信息。 解释css sprites,如何使用。CSS Sprite 又叫CSS精灵，是目前大型网站中常常运用的图片处理方式。它的原理很简单，将网站上零散的小图片（或图标）整合在一张大图上，再用CSS中“background-image”属性来定位图片的X/Y轴位置，从而减轻服务器对图片的请求数量，提升网页加载速度。由于对于当前大多数网速而言，不高于200KB的单张图片所需载入时间基本是差很少的，若是页面上有20张小图片或图标，那么服务器会载入20次。但使用CSS Sprite将图片整合成一张大图后，服务器只须要载入一次就够了，很大程度上优化了图片加载速度，这在门户型网站尤其明显。 CSS Sprites优势1.利用CSS Sprites能很好地减小了网页的http请求，从而大大的提升了页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由； 2.CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。 3.更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便。 CSS Sprites缺点1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现没必要要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片若是不够宽，很容易出现背景断裂； 2.CSS Sprites在开发的时候比较麻烦，你要经过photoshop或其余工具测量计算每个背景单元的精确位置，这是针线活，没什么难度，可是很繁琐；幸亏腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，可是已经比photoshop测量来的方便多了，并且样式直接生成，复制，拷贝就OK！ 3.CSS Sprites在维护的时候比较麻烦，若是页面背景有少量改动，通常就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，若是在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增长了，还要改动css。 22.在书写高效css文件时会有哪些问题须要考虑
JavaScript JavaScript原型，原型链 ? 有什么特色？ * 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有本身的原型，若是一个原型对象的原型不为null的话，咱们就称之为原型链。 * 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。 * JavaScript的数据对象有那些属性值？ writable：这个属性的值是否能够改。 configurable：这个属性的配置是否能够删除，修改。 enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。 value：属性值。 *当咱们须要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 若是没有的话，就会查找他的Prototype对象是否有这个属性。 function clone(proto) { function Dummy() { } Dummy.prototype = proto; Dummy.prototype.constructor = Dummy; return new Dummy(); //等价于Object.create(Person); } function object(old) { function F() {}; F.prototype = old; return new F(); } var newObj = object(oldObject);
eval是作什么的？ 它的功能是把对应的字符串解析成JS代码并运行； eval2应该避免使用，不安全，很是耗性能（次，一次解析成js语句，一次执行）。 null，undefined 的区别？ 写一个通用的事件侦听器函数。 // event(事件)工具集，来源：github.com/markyun markyun.Event = {
// 页面加载完成后 function(fn) readyEvent :{
ifnull (fn==) {
document fn=; } varwindow oldonload =.onload; iftypeofwindow'function' (.onload !=) {
window .onload = fn; else }{
windowfunction() .onload ={
oldonload(); fn(); }; } }, // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 参数： 操做的元素,事件名称 ,事件处理程序 function(element, type, handler) addEvent :{
if (element.addEventListener) {
//事件类型、须要执行的函数、是否捕捉 false element.addEventListener(type, handler,); elseif }(element.attachEvent) {
'on'function() element.attachEvent(+ type,{
handler.call(element); }); else }{
'on' element[+ type] = handler; } }, // 移除事件 function(element, type, handler) removeEvent :{
if (element.removeEnentListener) {
false element.removeEnentListener(type, handler,); elseif }(element.datachEvent) {
'on' element.detachEvent(+ type, handler); else }{
'on'null element[+ type] =; } }, // 阻止事件 (主要是事件冒泡，由于IE不支持事件捕获) function(ev) stopPropagation :{
if (ev.stopPropagation) {
ev.stopPropagation(); else }{
true ev.cancelBubble =; } }, // 取消事件的默认行为 function(event) preventDefault :{
if (event.preventDefault) {
event.preventDefault(); else }{
false event.returnValue =; } }, // 获取事件目标 function(event) getTarget :{
return event.target || event.srcElement; }, // 获取event对象的引用，取到事件的全部信息，确保随时能使用event； function(e) getEvent :{
varwindow ev = e ||.event; if (!ev) {
varthis c =.getEvent.caller; while (c) {
0 ev = c.arguments[]; if (ev && Event == ev.constructor) {
break ; } c = c.caller; } } return ev; } }; Node.js的适用场景？ 高并发、聊天、实时消息推送 介绍js的基本数据类型。 stringobjectnumber,,boolean,,undefined Javascript如何实现继承？ 经过原型和构造器 ["1", "2", "3"].map(parseInt) 答案是多少？ 1NaNNaNparseInt3 [,,]由于须要两个参数 (val, radix) 但 map 传了个 (element, index, array) 如何建立一个对象? （画出此对象的内存图） function Person(name, age) {
this .name = name; this .age = age; thisfunction() this .sing ={ alert(.name) }
} 谈谈This对象的理解。 thisthis是js的一个关键字，随着函数使用场合不一样，的值会发生变化。 this可是有一个总原则，那就是指的是调用函数的那个对象。 thisthis通常状况下：是全局对象Global。 做为方法调用，那么就是指这个对象 事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ 1.咱们在网页中的某个操做（有的操做对应多个事件）。例如：当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为。 2.事件处理机制：IE是事件冒泡、火狐是 事件捕获； 3. ev.stopPropagation(); 什么是闭包（closure），为何要用它？ 执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，由于say667()的内部函数的执行须要依赖say667()中的变量。这是对闭包做用的很是直白的描述. 闭包就是可以读取其余函数内部变量的函数, 能够把闭包简单理解成"定义在一个函数内部的函数"。 闭包的用途：①能够读取函数内部的变量②可让变量始终保持在内存中 闭包的优势： （1）因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。 （2） 闭包会在父函数外部，改变父函数内部变量的值。不要随便改变父函数内部变量的值。 function say667() {
// Local variable that ends up within closure var666 num =; varfunction() sayAlert ={ alert(num); }
num++; return sayAlert; } var sayAlert = say667(); //执行结果应该弹出的667 sayAlert()
instanceof 使用（待完善） ifinstanceof (aPerson){
'yes' alert(); } new操做符具体干了什么呢? 1this 、建立一个空对象，而且变量引用该对象，同时还继承了该函数的原型。 2this 、属性和方法被加入到引用的对象中。 3thisthis 、新建立的对象由所引用，而且最后隐式的返回。 varobj = {};
obj.__proto__ = Base.prototype; Base.call(obj); Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ hasOwnProperty JSON 的了解？ JSONObject(JavaScriptNotation)是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 'age''12''name''back'{:,:}
js延迟加载的方式有哪些？ asyncdefer和、动态建立DOM方式（用得最多）、按需异步载入js ajax 是什么? Ajax是什么：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。 ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
待完善 1.经过异步模式，提高了用户体验 2.优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用 3. Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。 2. Ajax的最大的特色是什么。 Ajax能够实现动态不刷新（局部刷新） readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成
ajax的缺点
1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试。
跨域： jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
同步和异步的区别? 同步是指： 发送方发出数据后，等接收方发回响应之后才发下一个数据包的通信方式。
如何解决跨域问题? windowwindowjsonp、 iframe、.name、.postMessage、服务器上设置代理页面 模块化怎么作？ 当即执行函数,不暴露私有成员 varfunction() module1 = ({
var0 _count =; varfunction() m1 ={
//... }; varfunction() m2 ={
//... }; return {
m1 : m1, m2 : m2 }; })(); 异步加载的方式有哪些？ 1 () defer，只支持IE 2async ()： 3 ()建立script，插入到DOM中，加载完毕后callBack documen.write和 innerHTML的区别 document.write只能重绘整个页面 innerHTML能够重绘页面的一部分 .call() 和 .apply() 的区别？ sub，add.call(sub,3,1) == add(3,1) ，因此运行结果为：alert(4); 例子中用 add 来替换 注意：js 中的函数实际上是对象，函数名是对 Function 对象的引用。 function add(a,b) {
alert(a+b); } sub(a,b) function {
alert(a-b); } sub,3,1); add.call( Jquery与jQuery UI 有啥区别？ *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。 提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等 jquery 中如何将数组转化为json字符串，而后再转化回来？ jQuery中没有提供这个功能，因此你须要先编写两个jQuery的扩展： function(array) $.fn.stringifyArray ={
returnJSON .stringify(array) } function(array) $.fn.parseArray ={
returnJSON .parse(array) } 而后调用： "" $().stringifyArray(array) 针对 jQuery 的优化方法？ *基于Class的选择性的性能相对于Id选择器开销很大，由于需遍历全部DOM元素。 *频繁操做的DOM，先缓存起来再操做。用Jquery的链式调用更好。 $("a""href" 好比：var str=).attr();
forlength*(var i = size; i < arr.; i++) {}
forlength 循环每一次循环都查找了数组 (arr) 的.属性，在开始循环的时候设置一个变量来存储这个数字，可让循环跑得更快： forlengthlengthlength (var i = size,= arr.; i <; i++) {}
那些操做会形成内存泄漏？ 内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。 0垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。 setTimeout的第一个参数使用字符串而非函数的话，会引起内存泄漏。 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环） 如何判断当前脚本运行在浏览器仍是node环境中？ windowwindow经过判断Global对象是否为，若是不为，当前脚本没有运行在浏览器中 请写出一个获取5位数随机数的方法，要求最大数字不超过99999
{ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,99999); alert(num);写一个时钟：格式为hh mm ss <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简易网页时钟</title> <style> body,div{margin:0;padding:0;} body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;} #clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;} span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;} </style> <script> window.onload = function () { var oClock = document.getElementById("clock"); var aSpan = oClock.getElementsByTagName("span");
setInterval(getTimes, 1000); getTimes(); function getTimes () { var oDate = new Date(); var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()]; for (var i in aDate) aSpan[i].innerHTML = format(aDate[i]) } function format(a) { return a.toString().replace(/^(\d)$/, "0$1") } } </script> </head> <body> <div id="clock"> <span></span>点<span></span>分<span></span>秒 </div> </body> </html>
四、如何阻止冒泡和默认事件？ 经过使用 preventDefault() 方法只取消默认的行为。 .代码以下:
经过使用 stopPropagation() 方法只阻止一个事件起泡。 .代码以下:
19.请指出“get()”“[]”“eq()”的区别？ 答：仔细查看下API文档就能够知道。eq返回的是一个jquery对象，get返回的是一个html 对象数组。举个例子： <p style"color:yellow"></p>=绯雨 使用eq来得到第一个p标签的color值： $"p".eq0.css"color"//由于eq(num)返回的是个jq对象，因此能够用jq的方法css()()() 使用get来得到第一个p标签的color值： $"p".get0//由于get(num)返回的是个html对象，因此要使用传统的HTML对象方法，jq对象此时就没用了。()().style.color 固然，你也能够get(num)后把对象转为jq的对象再进行操做： $$"p".get0.css"color"(()())()
答：选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。 对Node的优势和缺点提出了本身的见解： *（优势）由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求， 所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 所以客户端和服务器端都用同一种语言编写，这是很是美妙的事情。 *（缺点）Node是一个相对新的开源项目，因此不太稳定，它老是一直在变， 并且缺乏足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
其余问题对Node的优势和缺点提出了本身的见解？ *（优势）由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求， 所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 所以客户端和服务器端都用同一种语言编写，这是很是美妙的事情。 *（缺点）Node是一个相对新的开源项目，因此不太稳定，它老是一直在变， 并且缺乏足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。 你有哪些性能优化的方法？ （看雅虎14条性能优化原则）。 （1） 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数 （3） 用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。 （4） 当须要设置的样式不少时设置className而不是直接操做style。 （5） 少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。 （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 （8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。 http状态码有那些？分别表明是什么意思？ 100-199用于指定客户端应相应的某些动做。 200-299用于表示请求成功。 300-399用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息。 400-499用于指出客户端的错误。400 一、语义有误，当前请求没法被服务器理解。401 当前请求须要用户验证 403 服务器已经理解请求，可是拒绝执行它。 500-599用于支持服务器错误。 503 – 服务不可用 一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好） 查找浏览器缓存 DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求 进行HTTP协议会话 客户端发送报头(请求报头) 服务器回馈报头(响应报头) html文档开始下载 文档树创建，根据标记请求所需指定MIME类型的文件 文件显示 [ 浏览器这边作的工做大体分为如下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（好比HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等） } 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ 前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。 1、实现界面交互 2、提高用户体验 3、有了Node.js，前端能够实现服务端的一些事情 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好， 参与项目，快速高质量完成实现效果图，精确到1px； 与团队成员，UI设计，产品经理的沟通； 作好的页面结构，页面重构和用户体验； 处理hack，兼容、写出优美的代码格式； 针对服务器的优化、拥抱最新前端技术。 平时如何管理你的项目？ 先期团队必须肯定好全局样式（globe.css），编码模式(utf-8) 等； 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； 页面进行标注（例如 页面 模块 开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）； JS分文件夹存放 命名以该JS功能为准的英文翻译。 图片采用整合的 images.png png8 格式文件使用 尽可能整合在一块儿使用方便未来的管理 说说最近最流行的一些东西吧？常去哪些网站？ npm Node.js、Mongodb、、MVVM、MEAN、three.js 移动端（Android IOS）怎么作好用户体验? 清晰的视觉纵线、信息的分组、极致的减法、 利用选择代替输入、标签及文字的排布方式、 依靠明文确认密码、合理的键盘利用、 |
前端页面有哪三层构成，分别是什么？做用是什么？
最准确的网页设计思路是把网页分红三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 CSS 负责建立。 CSS 对“如何显示有关内容”的问题作出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
页面重构怎么操做？
编写 CSS、让页面结构更合理化，提高用户体验，实现良好的页面效果和提高性能。
网站为何要进行重构（网站重构的好处）
a、使页面加载得更快速；
b、下降带宽带来的费用：节约成本；
c、让你在修改设计时更有效率而代价更低；
d、帮助你的整个站点保持视觉的一致性；
e、更利于搜索引擎的检索（符合SEO的规范）；
f、令站点更容易被各类浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏览器）；
g、兼容不容忽视的Mozilla系浏览器（Firefox份额）；
h、提升你的职场竞争实力(事实上也就是下降失业的风险)。
什么叫优雅降级和渐进加强？
优雅降级：Web站点在全部新式浏览器中都能正常工做，若是用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工做。因为IE独特的盒模型布局问题，针对不一样版本的IE的hack实践过优雅降级了,为那些没法支持功能的浏览器增长候选方案，使之在旧式浏览器上以某种形式降级体验却不至于彻底失效.
渐进加强：从被全部浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增长无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥做用。
WEB应用从服务器主动推送Data到客户端有那些方式？
html5 websoket
WebSocket经过Flash
XHR长时间链接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间链接(可跨域)
html,xhtml,xml的区别介绍
html(超文本标记语言)——xhtml(可扩展性超文本标记语言)——xml（可扩展性标记语言）; html： 1.对大小写不敏感； 2.标签没必要成对出现； 3.<br>; xhtml： 1.对大小写敏感，必须是小写的； 2.标签必须成对出现，有开始标签就必须有结束标签； 3.属性值必须在引号以内； 4.不支持属性最小化： eg：正确：<input checked='checked'> 错误：<input checked> 5.name属性不同意使用，之后会被淘汰； 6.空元素也要结束标签：如：<br/>,<hr/>(水平分割线) xml： html最终会发展到xml，xhtml是html想xml发展的一个过渡，xhtml的特性也适合xml；
- 1. 前端面试题总结
- 2. 前端面试总结
- 3. web前端面试总结
- 4. 前端面试总结1
- 5. 前端面试总结（css）
- 6. 前端面试总结（转）
- 7. 前端面试（总结）
- 8. 前端面试题（总结）
- 9. 2018前端面试总结
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Eclipse Debug 调试 - Eclipse 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 算法总结-双指针
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面试题总结
- 2. 前端面试总结
- 3. web前端面试总结
- 4. 前端面试总结1
- 5. 前端面试总结（css）
- 6. 前端面试总结（转）
- 7. 前端面试（总结）
- 8. 前端面试题（总结）
- 9. 2018前端面试总结