Web

时间 2019-11-20

标签 web 栏目 HTML 繁體版

原文原文链接

Web

#####1.简述对web标准以及w3c的理解与认识。
W3C(world wide web consortium)，万维网联盟， Web标准由万维网联盟(W3C)制定，W3C 建立和维护Web标准。
最重要W3C标准有：HTML、CSS、XML、XSL、DOM
对于浏览器开发商和web程序开发人员在开发新的应用程序时遵照指定的标准更有利于web更好地发展。
开发人员按照Web标准制做网页，这样对于开发者来讲就更加简单了，由于他们能够很容易了解彼的编码使用Web标准，将确保全部浏览器正确显示您的网站而无需费时重写。
遵照标准的Web页面可使得搜索引擎更容易访问并收入网页，也能够更容易转换为其余格式，并更易于访问程序代码。javascript

#####2.Xhtml和html的区别
XHTML 是更严格更纯净的 HTML 代码。
XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是做为一种 XML 应用被从新定义的 HTML。
XHTML 是一个 W3C 标准。
XHTML 与 HTML 4.01 标准没有太多的不一样。
最主要的不一样：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
实际上如今写得标准基本是符合Xhtml标准的。php

#####3.行内元素有哪些？块级元素有哪些？Css的盒模型？
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span><input>
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。css

#####4.Css的引入方式有哪些？Link 和 @import的区别是
通常来讲只有3种：
1.连接方式
最经常使用的，引入样式表，在样式表中编写样式，引入方式以下：
<link href="css/style.css" rel="stylesheet" type="text/css">
2.嵌入方式
在Html头部用<style></style>包起来，在这里面编写样式：
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.内联方式
在标签里面直接编写行内样式。<div style="color: #333"><div>
4.导入方式
<style>@import url(style.css);</style>
二者都是外部引用CSS的方式，可是存在必定的区别：
　　区别1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
　　区别2：link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。html

#####6.前端页面结构由哪三层构成，分别是什么，做用是什么？
分红：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责建立。 CSS对“如何显示有关内容”的问题作出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。前端

#####7.Css的基本语句构成是？java

#####8.知道哪些主流浏览器，他们的内核分别是什么？
按照浏览器市场份额排名：
Chrome浏览器（Webkit内核）、IE浏览器、fireFox浏览器（Gecko/Firefox内核）、Microsoft edge（Trident/IE内核）、Safari（Webkit内核）、Opera（Presto内核）
国内使用较多的有：搜狗（搜狗是双核，Chromium+Trident内核、QQ（Trident/IE内核）、2345（Trident/IE内核）、猎豹（Trident/IE内核）、360（Trident/IE内核）、百度（WebKit ）、UC（WebKit ）node

#####9.简述title与alt的区别
alt是html标签的属性，而title既是html标签，又是html属性。title标签这个不用多说，网页的标题就是写在<title></title>这对标签以内的。
title做为属性时，用来为元素提供额外说明信息。例如，给超连接标签a添加了title属性，把鼠标移动到该连接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片没法正常显示时给用户提供文字说明使其了解图像信息。jquery

#####10.如何对网站的文件和资源进行优化？解决方案包括？
文件合并、文件压缩、使用CDN（内容分发网络）来托管资源、缓存的使用（而且多个域名来提供缓存、GZIP 压缩你的 JS 和 CSS 文件程序员

#####11.清除浮动的几种方式？各自的优缺点？
1.父级div定义height
原理：父级div手动定义height，就解决了父级div没法自动获取到高度的问题
优势：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，若是高度和父级div不同时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2.结尾处加空div标签clear:both
原理：添加一个空div，利用css提升的clear:both清除浮动，让父级div能自动获取到高度
优势：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：很多初学者不理解原理；若是页面浮动布局多，就要增长不少空div，让人感受很不爽
建议：不推荐使用，但此方法是之前主要使用的一种清除浮动方法
3.父级div定义伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优势：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，很多初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减小CSS代码
4.父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优势：简单，代码少，浏览器支持好
缺点：不能和position配合使用，由于超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
5.父级div定义overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优势：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，若是你须要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6.父级div也一块儿浮动
原理：全部代码一块儿浮动，就变成了一个总体
优势：没有优势
缺点：会产生新的浮动问题。
建议：不推荐使用，只做了解。
7.父级div定义display:table
原理：将div属性变成表格
优势：没有优势
缺点：会产生新的未知问题
建议：不推荐使用，只做了解
8.结尾处加br标签clear:both
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
建议：不推荐使用，只做了解
http://www.5icool.org/a/201211/a1661.htmlweb

Javascript

#####1.javascript的typeof返回有哪些数据类型？
Undefined,object,number,string,boolean,function

#####2.列举3种强制转换和两种隐式类型转换
隠式转换
“+”运算符
var a = 11;
alert(typeof a); //-->number
a = a + '';
alert(typeof a); //-->string
“-”运算符
var a = 11, b = '5';
var c = a - b;
alert(typeof c); //--> number
If语句
var obj = {name:'jack'}
if(obj){
//do more
}
这里会把obj隐式的转换成Boolean类型
While语句
var obj = {name:'jack'}
while(obj){
//do more
}
for in时的类型转换
强调其为String类型，数组的索引其实也是字符串类型
var ary = [1,3,5,7];
for(var a in ary){
alert(a + ": " + typeof a);
}
所有都是string
alert时存在的隐式类型转换
String.prototype.fn = function(){return this};
var a = 'hello';
alert(typeof a.fn()); //-->object
alert(a.fn()); //-->hello
给String原型上添加了个fn方法，该方法返回this，咱们知道this能够理解成当前类的实例对象，既然是对象那么typeof a.fn()天然返回是object了。
关键是最后的alert(a.fn())，a.fn()返回的明明是对象，但却隐式的转换成了字符串“hello”显示。
http://www.jb51.net/article/44155.htm

#####3.Split() join()的区别
split() 方法用于把一个字符串分割成字符串数组。
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
join() 方法用于把数组中的全部元素放入一个字符串。元素是经过指定的分隔符进行分隔的。
javascript 代码

 
  JavaScript 
   
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))//输出George.John.Thomas

#####4.数组方法pop() push() unshift() shift()
pop() 删除并返回数组的最后一个元素
Push()向数组的末尾添加一个或多个元素，并返回新的长度
Unshift()向数组的开个头添加一个或更多元素，并返回新的长度。
Shift()删除并返回数组的第一个元素

#####5.事件绑定和普通事件有什么区别？
普通事件只支持单个事件，而事件绑定能够添加多个事件;

#####6.Ie和dom事件流的区别
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，而后到最精确(也能够在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，可是，捕获型事件先发生。两种事件流会触及DOM中的全部对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

#####8.Ajax请求的时候get和post方式的区别
一、GET请求，请求的数据会附加在URL以后，以?分割URL和传输数据，多个参数用&链接。URL的编码格式采用的是ASCII编码，而不是uniclde，便是说全部的非ASCII字符都要编码以后再传输。
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。
所以，GET请求的数据会暴露在地址栏中，而POST请求则不会。
二、传输数据的大小（get 2KB)
在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。可是在实际开发过程当中，对于GET，特定的浏览器和服务器对URL的长度有限制。所以，在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，因为不是URL传值，理论上是不会受限制的，可是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
三、安全性
POST的安全性比GET的高。这里的安全是指真正的安全，而不一样于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。好比，在进行登陆操做，经过GET请求，用户名和密码都会暴露再URL上，由于登陆页面有可能被浏览器缓存以及其余人查看浏览器的历史记录的缘由，此时的用户名和密码就很容易被他人拿到了。除此以外，GET请求提交的数据还可能会形成Cross-site request frogery攻击
四、HTTP中的GET，POST，SOAP协议都是在HTTP上运行的
Call和apply的区别
更简单地说，apply和call功能同样，只是传入的参数列表形式不一样：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
https://my.oschina.net/warmcafe/blog/74973

#####9.Ajax请求时如何解析json数据
1.JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入而后就能够简单的使用object.toJSONString()转换成JSON数据。
2.可使用eval来转换JSON字符到Object
3.使用parseJSON()方法(JQ)
JSON.parse()之能够解析json格式的数据，而且会对要解析的字符串进行格式检查，若是格式不正确则不进行解析，而eval()则能够解析任何字符串，eval是不安全的。
好比下面的字符串：
var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);
用eval能够解析，而且会弹出对话框，而用JSON.parse()则解析不了。其实alert并无什么坏处，可怕的是若是用恶意用户在json字符串中注入了向页面插入木马连接的脚本，用eval也是能够操做的，而用JSON.parse()则没必要担忧这个问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的作法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，并且 JSON 解析器的速度更快。

#####10.闭包是什么？有什么特性？为何使用闭包
闭包是指有权访问另外一个函数做用域中的变量的函数，建立闭包的常见方法是在一个函数内部建立另外一个函数。闭包会携带包含它的函数的做用域，所以会比其余函数占用更多的内存，过渡使用闭包可能会致使内存占用过多。
一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。

#####11.如何阻止时间冒泡和默认事件？
javascript 代码

 
  JavaScript 
   
//功能:中止事件冒泡  
function stopBubble(e) {
    // 若是提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation ) {
        // 所以它支持W3C的stopPropagation()方法 
        e.stopPropagation();
    } else { 
        // 不然，咱们须要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}
//功能：阻止事件默认行为
function stopDefault( e ) {
     // 阻止默认浏览器动做(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动做的方式
        window.event.returnValue = false;
    }
    return false;
}

#####12.DOM删除插入替换到某个节点的方法
javascript 代码

 
  JavaScript 
   
//建立DOM节点 
var oDiv = document.createElement('div');
//插入DOM节点
document.body.appendChild(oDiv);
document.body.insertBefore(oP,oDiv)
//删除DOM节点
document.body.removeChild(oP);
//查找DOM节点
document.getElementById()
document.getElementsByTagName()
//替换DOM节点
document.body.replaceChild(oSpan,oBox)

#####13.解释jsonp的原理，以及为何不是真正的ajax
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给本身同志时使用的接头方式
http://blog.csdn.net/superhosts/article/details/9057301
Ajax直接请求普通文件存在跨域无权限访问的问题，Web页面上调用js文件时则不受是否跨域的影响（不只如此，咱们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>），当前阶段若是想经过纯web端（ActiveX控件、服务端代理、属于将来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，更妙的是JSON还被js原生支持。web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。
一、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也同样，都是请求一个url，而后把服务器返回的数据进行处理，所以jquery和ext等框架都把jsonp做为ajax的一种形式进行了封装；
二、但ajax和jsonp其实本质上是不一样的东西。ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
三、因此说，其实ajax与jsonp的区别不在因而否跨域，ajax经过服务端代理同样能够实现跨域，jsonp自己也不排斥同域的数据的获取。
四、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax同样，它也不必定非要用json格式来传递数据，若是你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！

#####14.Document load 和 document ready的区别
document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的全部元素都加载完成。

#####15.‘==’和’===’的不一样
双等号会形成类型转换（隐性类型转换），推荐一概使用三等号
= 赋值运算符
== 等于
=== 严格等于
例：
var a = 3;
var b = "3";
a==b 返回 true
a===b 返回 false
由于a,b的类型不同
https://www.zhihu.com/question/31442029

#####16.Javascript的同源策略
浏览器的同源策略，限制了来自不一样源的"document"或脚本，对当前"document"读取或设置某些属性。（白帽子讲web安全[1]）从一个域上加载的脚本不容许访问另一个域的文档属性。
http://www.jb51.net/article/75484.htm

#####17.编写一个数组去重的方法
http://www.php230.com/1411947001.html
去重：
javascript 代码

 
  JavaScript 
   
Array.prototype.removeDup3 = function(){
                var result = [];
                var obj = {};
                for(var i = 0; i < this.length; i++){
                    if(!obj[this[i]]){
                        result.push(this[i]);
                        obj[this[i]] = 1;
                    }
                }
                return result;
            }
var arr = [1,2,2,5,2,"测试","test","测试","test"];
console.log(arr.removeDup3());

升序排序：
javascript 代码

 
  JavaScript 
   
var quickSort = function(arr) {
            　　if (arr.length <= 1) { return arr; }
            　　var pivotIndex = Math.floor(arr.length / 2);
            　　var pivot = arr.splice(pivotIndex, 1)[0];
            　　var left = [];
            　　var right = [];
            　　for (var i = 0; i < arr.length; i++){
            　　　　if (arr[i] < pivot) {
            　　　　　　left.push(arr[i]);
            　　　　} else {
            　　　　　　right.push(arr[i]);
            　　　　}
            　　}
            　　return quickSort(left).concat([pivot], quickSort(right));
            };
var arr1 = [1,4,65,21,2,222,111];
console.log(quickSort(arr1));

http://blog.csdn.net/u013558749/article/details/51004576
排序后插入数据：
javascript 代码

 
  JavaScript 
   
var insert=function (arr,item){
    var mark;
    for (var i = 0; i < arr.length; i++){
        if(item>=arr[i]&&item<=arr[i+1]){
            mark=i;
            break; 
        }
    }
    arr.splice(mark+1, 0,item);
    return  arr;
}
var arr1 = [1,4,9,65];
console.log(insert(arr1,9));

题目：
请给Array本地对象增长一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
//本题的思路是，用每一个元素与其余的元素比较，相同则把那个元素存入数组
javascript 代码

 
  JavaScript 
   
Array.prototype.distinct = function(){
           var ret = [];
           for(var i=1; i<this.length;i++){
                   for(var j=i+1;j<this.length;j++){
                        if(this[j]==this[i]){
                                ret.push(this.splice(j,1)[0]);
                                 //这步骤是最重要的this.splice(j,1)删除重复的元素，splice返回的是被删除的数组，加[0]就是
                                //这个被删除的元素，ret.push(这个元素)，把这个重复的元素加入到数组ret中
                        }
                   }
           }           
}

题目：
document.write([1,2,3,1,2,2,2,3,5,6].distinct())请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。
javascript 代码

 
  JavaScript 
   
function mySort() {
    var tags = new Array();//使用数组做为参数存储容器
    请补充你的代码
    return tags;//返回已经排序的数组
}
var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不肯定
console.info(result);//显示结果
function mySort() {
    var tags = new Array();
    for(var i = 0;i < arguments.length;i++) {
        tags.push(arguments[i]);
    }
    tags.sort(function(compare1,compare2) {
        return compare1- compare2;
    });
    return tags;
}
​
var result = mySort(50,11,16,32,24,99,57,100);
console.info(result);

稳定排序有：插入排序、冒泡排序、归并排序不稳定排序：希尔排序、快速排序、选择排序、堆排序

各类整理

#####一、cssHack如何书写
四种写法：
1.Css选择器Hack：在Css选择器前加上一些只有某些特定浏览器才能识别的前缀Hack(html 前缀只对IE6生效，+html +前缀只对IE6/7 )
优势：全面，各类Hack都有，清理代码易认
缺点：选择器名称不易记，代码量大，重写选择器，带来大量的重复属性。
2.Css属性Hack:如：属性前缀区别
-moz-transform:
-wekit-transform:
-o-transform:
-ms-transform:
transform:
优势：易记，代码少：
缺点：不全面，只有少数属性有。
3.条件注释法
用浏览器条件注释法，对浏览器兼容问题比较多时用，两种
一种是不一样版本的浏览器载入不一样的css样式

另外一种是对html或body挂载不一样的Css


而后在样式里各类选择器加浏览器前缀
.ie9 .test{color:yellow;}/IE9浏览器/
.ie8 .test{color:red;}/IE8浏览器/
优势：安全；向后兼容；易维护
缺点：用很差会增长http请求；代码多；
4.Js浏览器探测，用js判断浏览器版本，给须要hack的部分添加对应的class
If（$.browser.msie && $.browser.version = 6浏览器版本为ie6）{
$(‘div’).addClass(‘ie6’);
}
优势：全面；易维护，可读性高；
缺点：占资源；代码量大；
总结：本人使用最多的是选择器属性hack,但有代码洁癖的我以为条件注释法
中的给body和html根据版本挂载对应的class;

#####二、经常使用的Block-Level Elements和Inline Elements有哪些？Inline Elements如何操做后能够设置宽高
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span>
给Inline Elements加上display：block；就会边成块状元素，
同理给Block-level Elements加上display：inline就会变成行内元素；
Css2.1加上了display:inline-block;行内块元素，该元素生成一个块状盒，该块状随着周围内容流动，如同它是一个单独的行内盒子（能够设置宽高）

#####三、常见的网页图像格式有ico、jpg、png、gif说说他们各自应用场景；
Ioc:windows图标图标文件，前端用到的是favicon.ico,收藏夹的图标文件，网站的ico
Jpg:非透明图片，有损压缩，将图片放大后有明显的马赛克，但压缩率高，不须要透明度的图片，可以使用。
Png:压缩率没有jpg/jpeg高，但清晰
Gif:动图，支持动画效果，支持透明度

#####四、如何触发页面reflow、repaint
Repaint（重绘），元素的外观被改变，且在没有改变布局的状况下发生的，如改变：outline,visibility,background-color,等不影响到dom结构测渲染
Reflow(渲染)，于repaint区别他会影响到dom的结构渲染，同时也会触发repaint,他会改变自己与全部父辈元素，这种开销是很是昂贵的，致使性能降低是必然的，页面元素越多越明显。
什么时候触发
1.Dom元素的添加、修改（内容）、删除（reflow+repaint）
2.仅修改Dom元素的字体颜色（repaint,不须要调整布局）
3.应用新的样式或者修改任何影响元素外观元素的属性
4.Resize浏览器窗口、滚动页面

先将元素从document中删除，完成修改后再把元素放回原来的位置
将元素的display设置为”none”，完成修改后再把display修改成原来的值
若是须要建立多个DOM节点，可使用DocumentFragment建立完后一次性的加入document
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
集中修改样式
　　4.1尽量少的修改元素style上的属性
　　4.2尽可能经过修改className来修改样式
　　4.3经过cssText属性来设置样式值
　　　　element.style.width=”80px”; //reflow
　　　　element.style.height=”90px”; //reflow
　　　　element.style.border=”solid 1px red”; //reflow
　　　　以上就产生屡次reflow，调用的越多产生就越多
　　　　element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow　
　　4.4缓存Layout属性值
　　　　var left=elem.offsetLeft; 屡次使用left也就产生一次reflow
　　4.5设置元素的position为absolute或fixed
　　　　元素脱离标准流，也从DOM树结构中脱离出来，在须要reflow时只须要reflow自身与下级元素
　　4.6尽可能不要用table布局
　　　　table元素一旦触发reflow就会致使table里全部的其它元素 reflow。在适合用table的场合，能够设置table-layout为auto或fixed，这样可让table一行一行的渲染，这种作法也是为了限制reflow的影响范围
4.7避免使用expression,他会每次调用都会从新计算一遍(包括加载页面)

#####五、用3个div实现小图显示效果，左边div宽高都为50px,右边div宽100px，高110px,写出html+css
html 代码

 
  HTML 
   
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
        div{
            background-color:#ccc; 
            position: relative;
        }
        .box1,.box2{
            width: 50px;
            height: 50px;
            float: left;
        }
        .box2{
            clear: both;
            margin-top:10px;
        }
        .box3{
            width: 100px;
            height: 110px;
            margin-left:60px;
        }
​
        .box4,.box5{
            width: 50px;
            height: 50px;
            position: absolute;

#####六、js中的数据类型有哪些数据类型
5种简单的数据类型：undefined、null、boolean、number、string
1种复杂数据类型：object

#####七、写出DOM中建立、插入、删除节点的方法，可使用jquery方法实现
建立：var node=document.createElement(“p”);
插入：var TextNode=document.createTextNode(“这是一个文本节点”);
node.appendChild(TextNode);
删除：var parentNode=document.getElementById(“parent”);
var childNode=document.getElementById(“child”);
parent.removeChild(childNode);
Jq:
建立：var $node=$(“<li>建立新的节点</li>”);
插入：$(“#parent”).append($node);//before/after/insertBefore/insertAfter
删除：$(“#child”).remove();

#####八、请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
javascript 代码

 
  JavaScript 
   
//正则表达式
var parseQueryString = function (url) {
   var reg = /([^\?\=\&]+)\=([^\?\=\&]*)/g;
   var obj = {};
   while (reg.exec (url)) {
       obj[RegExp.$1] = RegExp.$2;
   }
   return obj;
}
//字符分割
function parseQueryString(url) {  
    var str = url.split("?")[1], items = str.split("&");  
    var result = {};  
    var arr;  
    for (var i = 0; i < items.length; i++) {  
        arr = items[i].split("=");  
        result[arr[0]] = arr[1];  
    }  
    return result;  
}
var url = "http://wiatcmdax.cn/index.php?key0=0&key1=1&key2=2";
var obj = parseQueryString (url);

优缺点：正则表达式的代码更简洁，可是须要记住复杂的正则表达式，字符分割虽然代码稍微长一些，但更易于理解易于记住。若是是首次分析趋向于字符分割，若是是后面优化，我趋向于使代码简洁干练，而后重复利用。

#####九、IE与FF的事件模型有哪些区别，并实现一个bindEvent方法
IE的作法:
在IE 中,每一个元素和window对象都有2个方法:attachEvent()和detachEvent(); attachEvent用来给一个事件附加事件处理函数. 而detachEvent用来将事件处理函数分离.每一个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
javascript 代码

 
  JavaScript 
   
var fnClick=function(){alert("ss")} 
var fnClick1=function(){alert("sss")} 
var obj=document.getElementById("id") 
obj.attachEvent("onclick",fnClick); 
obj.attachEvent("onclick",fnClick1); 
obj.detachEvent("onclick",fnClick);

事件的执行顺序是按照添加的顺序执行的.
DOM方法
dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段仍是捕获阶段.若是事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法同样,再也不多说了,就举一个例子吧:
javascript 代码

 
  JavaScript 
   
var fnClick=function(){alert("ss")} 
var fnClick1=function(){alert("sss")} 
var obj=document.getElementById("id") 
obj.addEventListener("click",fnClick,false); 
obj.addEventListener("click",fnClick1,false); 
obj.removeEventListener("click",fnClick,false);

注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",本身体会一下吧.
添加事件
DOM事件模型 – addEventListener
addEventListener(eventType, handler, useCapture)
eventType不带有on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
useCapture参数决定了事件句柄触发在哪一种事件传播阶段，若是useCapture为true则为捕获阶段，反之则为冒泡阶段。
IE事件模型 – attachEvent
attachEvent(eventType, handler)
eventType 带 on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
事件过程
l DOM事件模型包含捕获阶段和冒泡阶段，IE事件模型只包含冒泡阶段；
2 DOM事件模型可以使用e.stopPropagation()来阻止事件流。
自写bindEvent
javascript 代码

 
  JavaScript 
   
// ---------- 事件绑定与删除绑定 ---------- //
function bindEvent(element, eventName, func) {
    var events = element['the'+eventName];    //用于保存某个事件序列
    if(!events) {  //若是不存在一个序列，则建立它，并加入HTML标记当中的onEvent = function(){}形式的绑定
        events = element['the'+eventName] = [];
        if (element['on'+eventName]) { events.push(element['on'+eventName]); }
    }
​
    //检测是否为重复绑定
    for(var i=0; i<events.length; i++) {
        if(events[i] === func) { flag = true; break; }
    }
​
    // 非重复绑定，则加入该函数事件
    if(i >= events.length) { events.push(func); }
​
    // 从新定义这个事件的执行方式
    element['on'+eventName] = function(event) {
        event = event || (function() { //修复IE的事件对象
            var e = window.event;
            e.preventDefault = function() { e.returnValue = false; }
            e.stopPropagation = function() { e.cancelBubble = true; }
            //根据须要继续修复
            return e;
        })();
        //顺序执行这些函数
        for(var i=0; i<events.length; i++) { events[i].call(element, event); }
    }
}
​
// 删除事件绑定

#####十、请编写一个javaScript函数isArray,用于判断一个obj是否为数组对象。
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
http://www.jb51.net/article/21109.htm

#####十一、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述能够获得如下对象：
javascript 代码

 
  JavaScript 
   
function Dog() {
    this.wow = function() {
        alert(’Wow’);
    }
    this.yelp = function() {
        this.wow();
    }
}

小芒和小贤同样，原来也是一条可爱的小狗，但是忽然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
答案：
javascript 代码

 
  JavaScript 
   
function MadDog() {
    this.yelp = function() {
        var self = this;          
        setInterval(function() {
            self.wow();      
        }, 500);
    }
}
MadDog.prototype = new Dog();         
​
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

#####十二、http状态码，200/304/404/500分别表明什么
200 (OK/正常) (SC_OK)的意思是一切正常。通常用于相应GET和POST请求。这个状态码对servlet是缺省的；若是没有调用setStatus方法的话，就会获得200。
304 (Not Modified/为修正)304 (SC_NOT_MODIFIED)是指缓冲的版本已经被更新而且客户端应刷新文档。
当客户端有一个缓存的文档，经过提供一个 If-Modified-Since 头信息可指出客户端只但愿文档在指定日期以后有所修改时才会重载此文档，用这种方式能够进行有条件的请求。304 (SC_NOT_MODIFIED)是指缓冲的版本已经被更新而且客户端应刷新文档。另外，服务器将返回请求的文档及状态码 200。servlet通常状况下不会直接设置这个状态码。它们会实现getLastModified方法并根据修正日期让默认服务方法处理有条件的请求。这个方法的例程已在2.8部分(An Example Using Servlet Initialization and Page Modification Dates/一个使用servlet初始化和页面修正日期的例子)给出。
404 (Not Found/未找到)404 (SC_NOT_FOUND)状态每一个网络程序员可能都遇到过，他告诉客户端它是表示“没有所访问页面”的标准方式。这个状态码是经常使用的响应而且在HttpServletResponse类中有专门的方法实现它：sendError("message")。相对于setStatus使用sendError得好处是：服务器会自动生成一个错误页来显示错误信息。可是，Internet Explorer 5浏览器却默认忽略你发挥的错误页面并显示其自定义的错误提示页面，虽然微软这么作违反了 HTTP 规范。要关闭此功能，在工具菜单里，选择Internet选项，进入高级标签页，并确认“显示友好的 HTTP 错误信息”选项（在个人浏览器中是倒数第8各选项）没有被选。可是不多有用户知道此选项，所以这个特性被IE5隐藏了起来使用户没法看到你所返回给用户的信息。而其余主流浏览器及IE4都彻底的显示服务器生成的错误提示页面。能够参考图6-3及6-4中的例子。所给的地址没法找到任何资源。
500 (Internal Server Error/内部服务器错误)
500 (SC_INTERNAL_SERVER_ERROR) 是经常使用的“服务器错误”状态。该状态常常由CGI程序引发也可能（希望不会如此！）由没法正常运行的或返回头信息格式不正确的servlet引发。
http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

#####1三、javascript异步编程的认识、异步编程的优点和难点，异步编程的主要解决方案
avascript语言的执行环境是“单线程”，就是一次只能完成一件任务，若是有多个任务，就必须排队，前面一个任务完成，再执行湖面一个任务，以此类推。
这种模式的好处是实现起来比较简单，执行环境相对单纯，坏处是只要有一个任务号是很长，后面的任务都必须排队等着，会拖延整个程序的执行，常见的浏览器无响应，每每就是由于某一段jvascript代码长时间运行，致使整个页面卡在这个地方。
"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，而后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则彻底不一样，每个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，因此程序的执行顺序与任务的排列顺序是不一致的、异步的。

异步"异步模式"很是重要。在浏览器端，耗时很长的操做都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操做。在服务器端，"异步模式"甚至是惟一的模式，由于执行环境是单线程的，若是容许同步执行全部http请求，服务器性能会急剧降低，很快就会失去响应。

异步编程的4种方法
f1();
f2();
1.回调函数
javascript 代码

 
  JavaScript 
   
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　callback();
　　}, 1000);
} 
f1(f2)；

采用这种方式，咱们把同步操做变成了异步操做，f1不会堵塞程序运行，至关于先执行程序的主要逻辑，将耗时的操做推迟执行。
　　回调函数的优势是简单、容易理解和部署，缺点是不利于代码的阅读和维护，程序的流程会很混乱，并且每一个任务只能指定一个回调函数。
2.事件监听
　另外一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
javascript 代码

 
  JavaScript 
   
f1.on('done'，f2);
function f1(){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　f1.trigger('done');
　　}, 1000);
}

f1.trigger('done')表示，执行完成后，当即触发done事件，从而开始执行f2。
　　这种方法的优势是比较容易理解，能够绑定多个事件，每一个事件能够指定多个回调函数。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。
3.发布/订阅
上一节的"事件"，彻底能够理解成"信号"。
　　咱们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其余任务能够向信号中心"订阅"（subscribe）这个信号，从而知道何时本身能够开始执行。这就叫作"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。
　　这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。
　　首先，f2向"信号中心"jQuery订阅"done"信号。
jQuery.subscribe("done", f2);
　　而后，f1进行以下改写：
javascript 代码

 
  JavaScript 
   
function f1(){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　jQuery.publish("done");
　　}, 1000);
}

　　jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引起f2的执行。
　　此外，f2完成执行后，也能够取消订阅（unsubscribe）。
jQuery.unsubscribe("done", f2);
　　这种方法的性质与"事件监听"相似，可是明显优于后者。由于咱们能够经过查看"消息中心"，了解存在多少信号、每一个信号有多少订阅者，从而监控程序的运行。
4.Promises对象
Promises对象是CommonJS工做组提出的一种规范，目的是为异步编程提供统一接口。
　　简单说，它的思想是，每个异步任务返回一个Promise对象，该对象有一个then方法，容许指定回调函数。好比，f1的回调函数f2，能够写成：
f1().then(f2);
　　f1要进行以下改写（这里使用的是jQuery的实现）：
javascript 代码

 
  JavaScript 
   
function f1(){
　　var dfd = $.Deferred();
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　dfd.resolve();
　　}, 500);
　　return dfd.promise;
}

样写的优势在于，回调函数变成了链式写法，程序的流程能够看得很清楚，并且有一整套的配套方法，能够实现许多强大的功能。
　　好比，指定多个回调函数：
f1().then(f2).then(f3);
　　再好比，指定发生错误时的回调函数：
f1().then(f2).fail(f3);
并且，它还有一个前面三种方法都没有的好处：若是一个任务已经完成，再添加回调函数，该回调函数会当即执行。因此，你不用担忧是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。
http://kb.cnblogs.com/page/167474/

#####1四、提升网站的前端性能，你会关注那些方面？
1、页面级优化
1.减小 HTTP请求数
(1). 从设计实现层面简化页面
(2). 合理设置 HTTP缓存
(3). 资源合并与压缩
(4). CSS Sprites
(5). Inline Images
(6). Lazy Load Images
2.将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
3.异步执行 inline脚本(其实原理和上面是同样，保证脚本在页面内容后面加载。)
4.Lazy Load Javascript（只有在须要加载的时候加载，在通常状况下并不加载信息内容。）
5.将 CSS放在 HEAD中
6.异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
7.减小没必要要的 HTTP跳转
8.避免重复的资源请求
2、代码级优化
1.Javascript
2.CSS选择符
但实际上浏览器对选择符的解析是从右往左进行的
3.HTML
4.Image压缩
https://www.zhihu.com/question/21658448

#####一、doctype的做用是什么？
告诉浏览器使用什么样的html或xhtml规范来解析html文档
对浏览器的渲染模式产生影响，不一样的渲染模式会影响到浏览器对于css代码甚至javascript脚本的解析，因此IE系列浏览器中，doctype所决定的html页面的渲染模式相当重要。
两张渲染模式：
backCompat:怪异模式
CSS1Compat:严格模式
HTML5只须要写 <!DOCTYPE HTML>，HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为。
浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器本身的方式解析执行代码，由于不一样浏览器解析执行的方式不同，因此咱们称之为怪异模式。

#####二、css中的Class和id的区别
class(类)在同一个html网页页面能够无数次的调用相同的class类
ID是表示着标签的身份，一样ID在页面里也只能出现一次，而且是惟一性。
CSS样式定义的时候以“#”来开头命名id名称。
为了给js预留id，因此在写css样式时我通常不多直接使用id,除非是确认一个大的总体模块。

#####三、浮动和它的工做原理
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动元素引发的问题：
父元素的高度没法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构

#####四、position的值和left和top的定位依据
Absolute 生成绝对定位的元素，相对于static定位之外的第一个父元素。
Fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
Ralative 生成相对定位，相随与正常位置进行定位
Static默认值，没有定位。忽略toplrft
Inherit从夫元素继承position属性

#####五、解释事件代理
“事件代理”便是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。
DOM操做是十分消耗性能的。因此重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是经过尽可能少的绑定，去监听尽可能多的事件。
http://www.daxueit.com/article/3704.html
6.javaScript的this是如何工做的？
This对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window,而当函数被用做某个对象的方法调用时，this等于那个对象。
https://www.zhihu.com/question/19624483
方法调用模式
当函数被保存为对象的一个属性时，成该函数为该对象的方法。函数中this的值为该对象。
javascript 代码

 
  JavaScript 
   
var foo = {
    name: 'fooname',
    getName: function (){
        return this.name  
    }
}
foo.getName();  // this => foo

函数调用模式
当函数并非对象的属性。函数中this的值为全局对象
note：某个方法中的内部函数中的this的值也是全局对象，而非外部函数的this
javascript 代码

 
  JavaScript 
   
function foo(){
    this.name = 'fooname';  
}
foo();  // this => window

构造器调用模式
即便用new调用的函数，则其中this将会被绑定到那个新构造的对象。
javascript 代码

 
  JavaScript 
   
function Foo(){
    this.name = 'fooname';
}
var foo = new Foo();  // this => foo

使用apply或call调用模式
该模式调用时，函数中this被绑定到apply或call方法调用时接受的第一个参数。
javascript 代码

 
  JavaScript 
   
function getName(name){
    this.name = name;
}
var foo = {};
getName.call(foo, name);  // this =>foo

#####七、原型继承的原理
借助原型能够基于已有的对象建立新对象，同时还没必要所以建立自定义类型。
建立一个原型，必须有一个对象能够做为另外一个对象的基础，
[code=javascript,javascript 代码false]Var person={
name:”Nicholas”,
friends:[“shelby”,”count”,”van”]
}
Var anotherPerson=object(person);//Object.create(person);
anotherPerson.name=”greg”;
anotherPerson.friend.push(“Rod”);
Var yetAnotherPerson==object(person);//Object.create(person);
yetAnotherPerson.name=”linda”;
yetAnotherPerson.friend.push(“silly”);
Console.log(person.friends);//“shelby,count,van,Rod,silly[/code]

#####8.什么是“use strict”?使用它的好处。
"严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
为何用严格模式

消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提升编译器效率，增长运行速度；
为将来新版本的Javascript作好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。另外一方面，一样的代码，在"严格模式"中，可能会有不同的运行结果；一些在"正常模式"下能够运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深刻地理解Javascript，让你变成一个更好的程序员。

题目：
Fibonacci数列的数学表达式就是：
F(n) = F(n-1) + F(n-2)
F(1) = 1
F(2) = 1
javascript 代码

 
  JavaScript 
   
functiongetNthFibonacci(count) {
  var ans=[1,1];
  var buf=2
  for(var i=buf;i<=count;i++){
     ans[i]=ans[i-2]+ans[i-1];
  }
  return ans[count];
}

请给Array本地对象增长一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
javascript 代码

 
  JavaScript 
   
Array.prototype.distinct = function() {//原型函数。
    var ret = [];
    for (var i = 0; i < this.length; i++)
    {
        for (var j = i+1; j < this.length;) {   
            if (this[i] === this[j]) {
                ret.push(this.splice(j, 1)[0]);
                //splice中的j是删除的位置，1是删除的数目，第三个参数是要加入的对象，返回的是一个数组，因此取第一个数组的值push进ret里；
            } else {
                j++;
            }
        }
     }
     return ret;
}