前端

HTML

1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

Doctype 严格模式 混杂模式

(1) <!DOCTYPE>声明位于HTML文档中的第一行,处于标签之前,用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

(3) 如果HTML文档包含形式完整的DOCTYPE,那么他一般以标准模式呈现。对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面已标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。

2.请描述一个网页从开始请求道最终显示的完整过程?

网页运行过程

一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤:
(1) 输入网址;
(2) 获得域名对应的WEB服务器IP地址;
(3) 与WEB服务器建立TCP连接;
(4) 发送HTTP请求;
(5) 服务器响应请求并返回指定URL的数据,或错误信息,如果设定重定向,则重定向到新的URL地址;
(6) 浏览器解析返回的HTML源文件 (7) 加载页面中所有的超链接。

3.HTML5 为什么只需要写 ?

DOCTYPE

(1) HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行) ;
(2) HTML4.01基于SGML,所以需要对DTD进行引用,才能让浏览器知道该文档所使用的文档类型。

4.行内元素有哪些? 块级元素有哪些? 空(void)元素有那些?

元素类型

行内元素:

a	锚点	label	表格标签
em	强调	select	项目选择
strong	粗体强调	textarea	多行文本输入框
span	定义文本内区块	sub	下标
i	斜体	sup	上标
img	图片	q	短引用
b	粗体

块元素:

h1,h2,h3,h4,h5	标题	table	表格
div	常用块级	form	表单
p	段落	ul	非排序列表
dl	定义列表	ol	排序表单
dt		li
dd		fieldset	form控制组

空元素:

br

换行

hr

水平分割线

5.介绍一下你对浏览器内核的理解?

浏览器内核

浏览器最重要或者说核心的部分是"Rendering Engine",
可大概译为"渲染引擎",不过我们一般习惯将之称为"浏览器内核"。
负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript) 并渲染(显示) 网页。
所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

6.常见的浏览器内核有哪些?

浏览器内核

Trident内核	IE,MaxThon,TT,The World,360,搜狗浏览器等。	又称MSHTML]
Gecko内核	Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等。
Presto内核	Opera7及以上。	Opera内核原为 Presto,现为 Blink;]
Webkit内核	Safari,Chrome等。	Chrome的 Blink(WebKit的分支) ]
EdgeHTML内核	Microsoft Edge。	此内核其实是从MSHTML fork而来,删掉了几乎所有的IE私有特性]

7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 ?

html5特性 html5标签 html5标签兼容 废弃标签

HTML5已形成了最终的标准,概括来讲,它主要是关于图像,位置,存储,多任务等功能的增加。

新增的元素
绘画 canvas ,
媒体用于媒介回放的 video 和 audio 元素,
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除
内容元素,article、footer、header、nav、section。
表单控件,calendar、date、time、email、url、search。
控件元素,webworker, websockt, Geolocation。

新的技术
canvas,svg,webworker, websocket, Geolocation......

移出的元素
显现层元素: basefont,big,center,font, s,strike,tt,u
性能较差元素: frame,frameset,noframes。

8.简述一下你对HTML语义化的理解。

HTML语义化

(1) HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(2) 即使在没有样式CSS的情况下也能以一种文档格式显示,并且是容易阅读的;
(3) 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,有利于SEO;
(4) 使阅读源代码的人更容易将网站分块,便于维护和理解。

9.HTML5的离线存储怎么使用?能否解释一下工作原理?

离线存储

在用户没有连接英特网时,可以正常访问站点和应用;在用户连接英特网时,更新用户机器上的缓存文件。
原理:
HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(并非存储技术) ,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储下来。之后当网络处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
使用方法:
(1) 在页面头部像下面一样加入一个 manifest 的属性;
(2) 在 cache.manifest 文件里编写离线存储资源;

    CACHE MANIFEST
    #v0.11
    CACHE:
        js/app.js
        css/style.css
    NETWORK:
        resource/logo.png
    FALLBACK:
        //offline.html
复制代码

(3) 在离线状态时,操作 window.applicationCache 进行需求实现;

10.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

离线存储资源

在线情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件;
如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线情况下,浏览器就直接使用离线存储的资源。

11.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

本地存储

Web Storage有两种形式: LocalStorage(本地存储) 和sessionStorage(会话存储) 。 这两种方式都允许开发者使用js设置的键值对进行操作,在在重新加载不同的页面的时候读出它们。
这一点与cookie类似。
sessionStorage: 数据存储在窗口对象中,窗口关闭后对应的窗口对象消失,存储的数据也会丢失。 注意: sessionStorage 都可以用localStorage 来代替,但需要记住的是,在窗口或者标签页关闭时,使用sessionStorage 存储的数据会丢失。
区别
(1) 与cookie不同的是: Web Storage数据完全存储在客户端,不需要通过浏览器的请求将数据传给服务器,因此x相比cookie来说能够存储更多的数据,大概5M左右。
(2) LocalStorage和sessionStorage功能上是一样的,但是存储持久时间不一样。LocalStorage: 浏览器关闭了数据仍然可以保存下来,并可用于所有同源(相同的域名、协议和端口) 窗口(或标签页) ;
(3) 使用 local storage和session storage主要通过在js中操作这两个对象来实现,分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例,自然也具有Storage类的属性和方法。

12.iframe 有哪些缺点

iframe

(1) iframe会阻塞主页面的Onload事件;
(2) 搜索引擎的检索程序无法解读这种页面,不利于SEO;
(3) iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
(4) 使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好通过JavaScript动态给iframe添加src属性值,这样可以绕开以上两个问题。

13.Label的作用是什么?如何使用?

label

label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

    <label for="Name">Number:</label>
    <input type="text" name="Name" id="Name" />
    <label>Date:<input type="text" name="B" /></label>
复制代码

14.HTML5的form如何关闭自动完成功能?

form

给不想要提示的 form 或下面某个 input 设置为 autocomplete = off。 !!!!! 没有看懂是干嘛的

15.如何实现浏览器内多个标签页之间的通信?

标签页通信

调用 localStorage、cookies 等本地存储方式

16.webSocket 如何兼容低浏览器

websocket

Adobe Flash Socket  
ActiveX HTMLFile(IE)  
基于 multipart 编码发送 XHR  
基于长轮询的 XHR  
复制代码

17.页面可见性(Page Visibility) API可以有哪些用途?
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放。

18.如何在页面上实现一个圆形的可点击区域

圆

(1) border-radius
(2) 纯js实现,需要求一个点在不在圆上的简单算法、获取鼠标坐标等等
(3) map + area 或者 svg

19.实现不使border 画出 1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果

1px高

    <div style="height:1px;overflow:hidden;background:#ccc"></div>
    ?????还需修改font-size和line-height
复制代码

20.网页验证码是干什么用的?是为了解决什么安全问题?

验证码

可以防止: 恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式,我们利用比较简易的方式实现了这个功能。 这个问题可以由计算机生成并评判,但是必须只有人类才能解答。 由于计算机无法解答验证码的问题,所以回答出问题的用户就可以被认为是人类。

21.XHTML和HTML有什么区别 与 联系

XHTML

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
联系: XHTML是可拓展超文本标示语言，随着H5的发布XHTML小组被解散了

22.前端页面有哪三层构成,分别是什么?作用是什么?

MVC

结构层:搭建文档的结构。
表示层:设置文档的呈现效果。
行为层:使用 DOM 脚本去实现文档的行为。

23.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?

内核

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

24.什么是语义化的HTML?

语义化

直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情！
html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

25.HTML5 为什么只需要写 !DOCTYPE HTML？

HTML骨架

HTML5 不基于 SGML,因此不需要对DTD( XML构建模块 )进行引用,但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）;而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

26.Doctype作用？标准模式与兼容模式各有什么区别?

HTML骨架

!DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

27.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

HTML5新特性

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新标签,浏览器支持新标签后,还需要添加标签默认的样式:

28.请描述一下 cookies,sessionStorage 和 localStorage 的区别？

本地存储

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;5M
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;

29.如何实现浏览器内多个标签页之间的通信?

本地存储

调用localstorge、cookies等本地存储方式

---

Javacript

数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步加载、模板引擎、前端MVC、前端MVVM、路由、模块化、Http、Canvas、jQuery、ECMAScript 2015(ES6) 、Node.js、AngularJS、Vue、React......

1.document.write和 innerHTML的区别

重绘

document.write只能重绘整个页面 innerHTML可以重绘页面的一部分

2.通过什么检测浏览器?

浏览器内核

(1) navigator.userAgent 检测浏览器内核及版本 (2) 不同浏览器的特性,如addEventListener事件监听

3.JavaScript有哪几种数据类型?

数据类型

原始数据类型: Number、Boolean、String、Null、Undefined、Symbol、Object(引用数据类型)

Typeof求解后: number、string、boolean、undefined、symbol、object、function

4.截取字符串"abcdefghi"的"fghi"

substring截取指定位置

    var myvalue="abcdefghi";
    var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
    alert(jiequ);
复制代码

5.写出下面的运算结果

typeof

    alert(typeof(null)); // object
    alert(typeof(undefined)); // undefined
    alert(typeof(NaN)); // number
    alert(NaN==undefined); // false
    alert(NaN==NaN); // false
    var str="123abc";
    alert(typeof(str++)); // number
    alert(str);// NaN
复制代码

6.问执行完毕后 x, y, z 的值分别是多少?

函数返回值 没有return的函数返回undefined

    var x = 1, y = z = 0;
    function add(n) {
        n = n+1;
    }
    y = add(x);
    function add(n) {
        n = n + 3;
    }
    z = add(x);

>    x=1、y=undefined、z=undefined
复制代码

7.如何阻止事件的冒泡?

冒泡

    //阻止冒泡的方法
    function stopPP(e){
        var evt = e || window.event;
        //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
        evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
    }
复制代码

8.写出程序运行的结果?

for i的终值

    for(var i=0, j=0; i<10, j<6; i++, j++){
        k = i + j;
    } // k=10
复制代码

9.编写一个方法 求一个字符串的字节长度

字符串长度

假设: 一个英文字符占用一个字节,一个中文字符占用两个字节

    function getBytes(str){
        var len = str.length,
            bytes = len,
            i = 0;
        for(; i<len; i++){
            if (str.charCodeAt(i) > 255) bytes++;
        }
        return bytes;
    }
    alert(getBytes("玩,as"));
复制代码

10.JavaScript中如何对一个对象进行深度clone(克隆)?

深拷贝

    function cloneObject(o) {
        if( !o || typeof o !== 'object' ) { //object永远为true 
            // 这里判断的是不是Object的
            return o;
        }
        var c = 'function' === typeof o.pop ? [] : {};
        var p, v;
        for(p in o) {
            if(o.hasOwnProperty(p)) {
                v = o[p];
                if(v && 'object' === typeof v) {
                    c[p] = Ext.ux.clone(v);
                }
                else {
                    c[p] = v;
                }
            }
        }
        return c;
    };
复制代码

11.如何控制alert中的换行?

控制台符号

\n alert("p\np");
复制代码

12.请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:

URL序列化

    var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
    function parseQueryString(url){
        var params = {},
            arr = url.split("?");
        if (arr.length <= 1)
            return params;
        arr = arr[1].split("&");
        for(var i=0, l=arr.length; i<l; i++){
            var a = arr[i].split("=");
            params[a[0]] = a[1];
        }
        return params;
    }var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
    ps = parseQueryString(url);console.log(ps["key1"]);
复制代码

13.如何控制网页在网络传输过程中的数据量?

优化 网络传输

启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性
复制代码

14.以下代码运行结果

输出结果

    function say() {
        // Local variable that ends up within closure
        var num = 888;
        var sayAlert = function() { alert(num); }
        num++;
        return sayAlert;
    }
    var sayAlert = say();
    sayAlert();
>   输出: alert: 889
复制代码

15.请实现ECMAScript 5中的Object.getPrototypeOf() 函数

查找原型

function proto(object) {
    return !object  ? null
                    : '__proto__' in object ? object.__proto__
                                            : object.constructor.prototype
                                            /* not exposed? */
}
复制代码

16.如何实现Array.prototype.forEach?浏览器不识别的forEach的情况下

手动实现forEach

    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function(fn){
            for ( var i = 0; i < this.length; i++ ) {
                fn( this[i], i, this );
            }
        };
    }
    ["a", "b", "c"].forEach(function(value, index, array){
        assert( value, "Is in position " + index + " out of " + (array.length - 1) );
    });
复制代码

17.如何将 arguments 转为数组?

转数组

Object.prototype.slice.call(arguments);
复制代码

18.以下程序运行结果?

函数销毁 当函数是在赋值变量处定义时，赋值后 函数就被销毁

    var ninja = function myNinja(){
        alert(ninja == myNinja);
    };
    ninja();    // true
    myNinja();  // 报错(error - myNinja is not defined.)
复制代码

19.如何获取光标的水平位置?

光标

    function getX(e){
        e = e || window.event;
        //先检查非IE浏览器,在检查IE的位置
        return e.pageX || e.clentX + document.body.scrollLeft;
    }
复制代码

20.兼容浏览器的获取指定元素(elem) 的样式属性(name) 的方法

获取样式函数

    function getStyle(elem, name){
        if(elem.style[name]){//如果属性存在于style[]中,直接取
            return elem.style[name];
        }else if(elem.currentStyle){//否则 尝试IE的方法
            return elem.currentStyle[name];
        }else if(document.defaultView && document.defaultView.getComputedStyle){ //尝试W3C的方式
            name = name.replace(/([A-Z])/g, "-$1"); // W3C中为textAlign样式,转为text-align
            name = name.toLowerCase();
            var s = document.defaultView.getComputedStyle(elem, "");
            return s && s.getPropertyValue(name);
        }else{
            return null;
        }
    }
复制代码

21.Javascript中实现类似PHP的print_r函数

print_r 则是打印复合类型 如数组 对象

    function print_r(theObj) {
        var retStr = '';
         if(typeof theObj == 'object') {
              retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
              for(var p in theObj) {
                    if (typeof theObj[p] == 'object') {
                          retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
                          retStr += '<div style="padding-left:25px;">' +  print_r(theObj[p]) + '</div>';
                    } else {
                          retStr += '<div>['+p+'] => <b>' + theObj[p] +  '</b></div>';
                    }
               }
              retStr += '</div>';
          }
          return  retStr;
    }
复制代码

22.以下程序运行结果?

• 和 ++ parseInt进制

    var b = parseInt("01");//省略了进制参数，默认以字符串解析，0开头是8机制、0x是16进制
    alert("b="+b); 
    var c = parseInt("09/08/2009");//省略了进制参数，默认以字符串解析，0开头是8机制、0x是16进制
    alert("c="+c);
    // b=1、c=0。
复制代码

23.以下程序的运行结果?

声明提升

    var foo = 'hello';
    (function() {
        var foo= foo || 'world';//var foo被声明提升
        console.log(foo);
    })();
    // world
复制代码

24.如何规避javascript多人开发函数重名问题?

变量污染

(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀 (2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就行 (3) IIFE作用域 (4) 模块化开发

25.前端开发有哪些优化问题?

优化

---看图

26.Ajax请求总共有多少种callback

Ajax

onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
复制代码

27.请给出异步加载js方案,不少于两种

异步加载js

异步加载方式: defer,只支持IE。
async: 创建script,插入到DOM中,加载完毕后callBack,见代码。
复制代码

    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";
        if(script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" ||script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {//Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }
复制代码

28.函数记忆,判断是不是质数

质数

方法一:

    function isPrime1(n){
        if(n<=3){
            return true
        }else{
            for(var i=2;i<Math.sqrt(n);i++){
                if(n%i==0){
                return false;
                }
            }
            return true;
        }
    };
复制代码

方法二:hash

    var isPrime2=(function(){//hash
        var hash={};
        return function(n){
            if(n<=3){return true}
            else if(hash[n]!==undefined){
                return hash[n];
            }else{
                for(var i=2;i<Math.sqrt(n);i++){
                    if(n%i==0){return hash[n]=false}
                }
                return hash[n]=true;
            }
        }
    })();
复制代码

29.数组去重

数组去重

方法一:

var arr1=[1,2,3,2,1,2];
    function repeat1(arr){
        for(var i=0,arr2=[];i<arr.length;i++){
            if(arr2.indexOf(arr[i])==-1){
            arr2.push(arr[i]);
        }
    }//(遍历结束)
    return arr2;
}
复制代码

方法二:hash

function repeat2(arr){
    //遍历arr中每个元素,同时声明hash
    for(var i=0,hash={};i<arr.length;i++){
    //hash中是否包含当前元素值的建
    //如果不包含,就hash添加一个新元素,以当前元素值为key,value默认为1
        if(hash[arr[i]]===undefined){
            hash[arr[i]]=1;
        }
    }//(遍历结束)
      //将hash转为索引:
    var i=0;
    var arr2=[];
    for(arr2[i++] in hash);
    return arr2;
}
复制代码

方法三:

function repeat3(arr){
    return arr.sort()
          .join(",,")
          .replace(/(^|,,)([^,]+)(,,\2)*/g,"$1$2")
          .split(",,");
}
console.log(repeat3(arr1));
复制代码

ES6实现:

Array.from(new Set(array))
Let newArray = [...new Set(array)]
复制代码

30.插入排序

插入排序

var arr=[2,4,1,5,3];
    function insertSort(arr){
        //遍历arr中每个元素(i从1开始)
        for(var i=1;i<arr.length;i++){
        //将当前元素临时保存在变量t中
        var t=arr[i];
        var p=i-1;//声明变量p=i-1
        //循环:(arr[p]>t&&p>=0){
        while(arr[p]>t&&p>=0){
        //将p位置的值,赋值给p+1位置
            arr[p+1]=arr[p];
            p--;//p--
        }//(循环结束)
        arr[p+1]=t;//将t放在p+1的位置上
    }//(循环结束)
}
insertSort(arr);
console.log(String(arr));
复制代码

31.快速排序:

快速排序

    function quickSort(arr){
        //如果arr的length<=1
        if(arr.length<=1){
            return arr;//就直接返回arr
        }
        //计算参照位p
        var p=Math.floor(arr.length/2);
        var left=[];
        var right=[];
        //删除p位置的元素
        var center=arr.splice(p,1)[0];
        //遍历arr中每个元素
        for(var i=0;i<arr.length;i++){
            if(arr[i]>=center){
                right.push(arr[i]);
            }else{
                left.push(arr[i]);
            }
        }
        return quickSort(left).concat(center,quickSort(right));
    }
    var sortedArr=quickSort(arr);
    console.log(String(sortedArr));
复制代码

32.正则表达式 "ryan5 is6 not7 a8 good9 man10"

正则表达式

    var n=5;
    var str="ryan is not a good man";
    str=str.replace(/\b[a-z]+\b/g,function(kw){
        return kw+n++;
    });
    console.log(str);
复制代码

33.统计字符串中每种字符出现的次数,出现次数最多的是? 出现?次

字符次数

var str="helloworld";
复制代码

方法一: 用hash

    for(var i=0,hash={};i<str.length;i++){
        if(hash[str[i]]){
            hash[str[i]]++
        }else{
            hash[str[i]]=1;
        }
    }
    console.dir(hash);
复制代码

方法二: 用正则

    var arr=str.split("")
               .sort()
               .join("")
               .match(/([a-z])\1*/g)
               .sort(function(a,b){
        return b.length-a.length;
    });
    console.log("出现最多的是: "+arr[0][0]+"共"+arr[0].length+"次");
    var hash={};
    arr.forEach(function(val){
        hash[val[0]]=val.length;
    });
    console.dir(hash);
复制代码

34.数组降维

数组降维

    var arr=[
            [0,0,0,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,0,0,0],
    ];
    //method 1:
    for(var r=0,arr1=[];r<arr.length;r++){
        for(var c=0;c<arr[r].length;c++){
            arr1.push(arr[r][c]);
        }
    }
    console.dir(arr1);
    //method 2:
    for(var r=0,arr2=[];r<arr.length;r++){
        arr2=arr2.concat(arr[r]);
    }
    console.dir(arr2);
    //method 3:
    var arr2=[].concat.apply([],arr);
    console.dir(arr2);
复制代码

35.Function赋值

看不懂

var f=function(){var a=b=1;}
f();
console.log(b);//1
console.log(a);//报错
var f=function(){var a=b=1;}
setTimeout(f,0);
console.log(b);//报错
f();
var a, b=0, fn=function(){var a=b=2;}
fn();
console.log(a);//undefined
console.log(b);//2
复制代码

36.函数 currying (柯里华)

http://www.zhangxinxu.com/wordpress/2013/02/js-currying/

    var getN;
    function add(n){
        getN=function(){console.log(n);}
        return function(m){
            n+=m;
            arguments.callee.toString=function(){
                return n;
            }
            return arguments.callee;
        }
    }
    add(1)(2)(3);getN();//6
    add(1)(2)(3)(4);getN();//10
    alert(add(1)(2)(3));//6
    alert(add(1)(2)(3)(4));//10
复制代码

37.递归

递归

    var emp={
        work:function(){//3,2,1
            var  sum=0;//+3+2+1 +2+1  +1
            for(vari=0; i<arguments.length&&arguments[0]>0;i++){
                sum+=arguments[i]
                +arguments.callee(--arguments[i]);
            }
            return sum;
        }
    }
    console.log(emp.work(3,2,1));//10
复制代码

38.闭包

闭包

(1)

function fun(n,o){//外层函数
    console.log(o);
    return {
        fun:function(m){//内层函数 n
            return fun(m,n);
        }
    }
}
var a=fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
//undefined  0  0   0
var a=fun(0).fun(1).fun(2).fun(3);//undefined   0    1    2
var a=fun(0).fun(1);
a.fun(2);
a.fun(3);//undefined  0 1 1
复制代码

(2)

var a=0,b=0;
function A(a){
    A=function(b){alert(a+b++)};
    alert(a);
}
A(1);//1
A(12);//13
复制代码

39.OOP

面向对象

(1)

window.a=300;
function fn1(){
    this.a=100;
    this.b=200;
    return function(){
        alert(this.a)
    }.call(arguments[0]);
}
function fn2(){
    this.a=new fn1();
}
var a=new fn1().b;//300
var v=new fn1(fn2());//[object Object]
复制代码

(2)

var number=2;//4  8
var obj={
    number:4,//8
    fn1:(function(){
        //var number;
        this.number*=2;
        number*=2; //声明提前  undefined
        var number=3;
        return function(){
            this.number*=2;
            number*=3;
            alert(number);
        }
    })()
}
var fn1=obj.fn1;
alert(number);
fn1();
obj.fn1(); //4   9   27
alert(window.number);//8
alert(obj.number);//8
复制代码

(3)

function Foo(){
    getName=function(){alert(1);};
      return this;
  }
  Foo.getName=function(){alert(2);};
  Foo.prototype.getName=function(){
    alert(3);
  };
  var getName=function(){alert(4);};
  function getName(){ alert(5); };
  Foo.getName();//2
  getName();//4
  Foo().getName();//1
  getName();//1
  new Foo.getName();//2
  new Foo().getName();//3
  new new Foo().getName();//3
复制代码

(4)

var a=1;
var b={
    a:2,
    b:function(){
        console.log(this.a);//1
    }(),
    f:this.f=function(){
        console.log(this.a);
    }
};
function f(){
    console.log(3);
}
f();//1
b.f();//2
(b.f)();//2
(0,b.f)();//1
复制代码

(5)

var foo=function(){
    console.log(this.a);
}
var obj={a:2,foo:foo};
var a=10;
var bar=obj.foo;
var bar2=foo.bind(obj);
bar();//10
bar2();//2
foo();//10
obj.foo();//2
setTimeout(bar,0);//10
复制代码

(6)

function MyObj(){
    this.p.pid++;
}
MyObj.prototype.p={"pid":0}//2
MyObj.prototype.getNum=function(num){
    return this.p.pid+num;
}
var _obj1=new MyObj(); //创建新对象,继承原型pid+1
var _obj2=new MyObj(); //创建新对象,继承原型pid+2
console.log(_obj1.getNum(1)+_obj2.getNum(2));//7    2+1   +    2+2
复制代码

40.判断一个对象是不是数组类型,六种方法:

判断数组

(1)

    isPrototypeOf 判断父及对象   可检查整个原型链 //可能继承自数组
    console.log(Array.prototype.isPrototypeOf([])?"是数组":"不是数组");
    console.log(Array.prototype.isPrototypeOf({})?"是数组":"不是数组");
    console.log(Array.prototype.isPrototypeOf(function(){})?"是数组":"不是数组");
复制代码

(2)

    constructor 检查指定对象的构造函数 可检查整个原型链  //可能继承自数组
    var father={};
    var son={};
    father.__proto__=Array.prototype;
    son.__proto__=father;
    console.log(son.contructor==Array?"是数组":"不是数组")
    console.log({}.contructor==Array?"是数组":"不是数组");
    console.log(function(){}.contructor==Array?"是数组":"不是数组");
复制代码

(3)instanceof 检查一个对象是否是制定构造函数的实例 可检查整个原型链 //可能继承自数组

    var father={};
    var son={};
    father.__proto__=Array.prototype;
    son.__proto__=father;
    console.log(son instanceof Array?"是数组":"不是数组");
    console.log({} instanceof Array?"是数组":"不是数组");
    console.log(function(){} instanceof Array?"是数组":"不是数组");
复制代码

(4)强行用要检查的对象,调用原始的toString方法 不检查整个原型链

    //[object class]: class-Array Date Object
    //只能检查最初就是数组创建的对象。
    console.log(Object.prototype.toString.call([])=="[object Array]"?"是数组":"不是数组");
    console.log(Object.prototype.toString.call({}));
    console.log(Object.prototype.toString.call(function(){}));
    console.log(Object.prototype.toString.call(/\d/));
    var father={};
    var son={};
    father.__proto__=Array.prototype;
    son.__proto__=father;
    console.log(Object.prototype.toString.call(son)=="[object Array]"?"是数组":"不是数组");//不是
    //结论: 对象一旦创建,class属性就无法修改
           //修改继承关系,也无法修改class属性
复制代码

(5)

    Array.isArray(obj)  不检查整个原型链
        console.log(Array.isArray([]));
        console.log(Array.isArray({}));
    //如果浏览器不支持isArray
    if(Array.prototype.isArray===undefined){//if(!Array.isArray)
        //给?添加isArray方法
        Array.prototype.isArray=function(arg){
            //强行调用原始toString方法,和"[object Array]"比较
            return Object.prototype.toString.call(arg)
            =="[object Array]"?"是数组":"不是数组";
        }
    }
复制代码

41.自定义Object.create()——手写

创建对象

Object.create=function(father,props){
    console.log("我的create");
    /*使用setPrototypeOf方法
        var o=Object();//1. 创建空对象
        Object.setPrototypeOf(o,father);//2. 继承father
    */
    /*不使用setPrototypeOf方法
        function Constructor(){}
        Constructor.prototype=father;
        var o=new Constructor();
    */
    //3. 定义新属性
    Object.defineProperties(o,props);
    return o;
}
复制代码

42.深克隆原理

深拷贝

Object.clone=function(obj){//深克隆if(typeof(obj)=="object"){//如果obj是对象
    var o=//有必要区分数组和普通对象
    Object.prototype.toString.call(obj)=="[object Array]"?[]:{};
        for(var key in obj){//遍历obj的自有属性
            //如果key是obj的自有属性
            if(obj.hasOwnProperty(key)){
                o[key]=arguments.callee(obj[key]);//arguments.callee调的是当前的Object.clone函数
                }
        }
        return o;
        }else{//如果obj是原始类型的值,就直接返回副本
            return obj;
        }
    }
复制代码

43.如果浏览器不支持every属性,every的实现原理

js兼容 every

    if(Array.prototype.every===undefined){
       Array.prototype.every=function(fun){
        //遍历当前数组中每个元素
        for(var i=0;i<this.length;i++){
            if(this[i]!==undefined){//调用fun,依次传入当前元素值,位置i,当前数组作为参数  ,将返回值,保存在变量r中
            var r=fun(this[i],i,this);
            if(r==false){//如果r为false
               return false;//返回false
            }
            }
             }//(遍历结束)
         return true;//返回true
       }
    }
复制代码

44.如果浏览器不支持some属性,some的实现原理

js兼容 some

    if(Array.prototype.some===undefined){
       Array.prototype.some=function(fun){
          for(var i=0;i<this.length;i++){
          if(this[i]!==unefined){
            var r=fun(this[i],i,this);
                if(r==true){ return true; }
                  }
              }
          return false;
       }
    }
复制代码

45.浏览器不支持map属性,map的实现原理

js兼容 map

    if(Array.prototype.map===undefined){
       Array.prototype.map=function(fun){
        //创建空数组: newArr
        var newArr=[];
        //遍历当前数组中每个元素
        for(var i=0;i<this.length;i++){
           //如果当前元素不是undefined
           if(this[i]!==undefined){//判断稀疏数组//调用fun传入当前元素值,位置i,当前数组,将结果保存在r中
                //将newArr的i位置赋值为r
            var r=fun(this[i],i,this);
                    newArr[i]=r;
           }
        }//(遍历结束)
        return newArr;//返回newArr
       }
    }
复制代码

46.如果浏览器不支持reduce属性,reduce的实现原理

js兼容 reduce

    if(Array.prototype.reduce===undefined){
       Array.prototype.reduce=function(fun,base){
         base===undefined&&(base=0);
         for(var i=0;i<this.length;i++){
        if(this[i]!==undefined){
           base=fun(base,this[i],i,this);
        }
             }
         return base;
           }
    }
复制代码

47.如果浏览器不支持bind属性, bind函数的实现原理

js兼容 bind

       if(Function.prototype.bind===undefined){
       Function.prototype.bind=function(obj/*,参数列表*/){
        var fun=this;//留住this
                //*****将类数组对象,转化为普通数组
        var args=Array.prototype.slice.call(arguments,1);
        //args保存的就是提前绑定的参数列表
        /*function slice(1){
           var sub=[];
           for(var i=0;i<length;i++){
            sub.push(arguments[i]);
           }
           return sub;
        }*/
        return function(){
                   //将后传入的参数值,转为普通数组
           var innerArgs=Array.prototype.slice.call(arguments);//将之前绑定的参数值和新传入的参数值,拼接为完整参数之列表
           var allArgs=args.concat(innerArgs)
          //调用原始函数fun,替换this为obj,传入所有参数
          fun.apply(obj,allArgs);
        }
       }
}
复制代码

48.javascript的typeof返回哪些数据类型

typeof

undefined string boolean number symbol(ES6) Object Function

49.例举3种强制类型转换和2种隐式类型转换?

强制类型转换 隐式类型转换

强制 Number(参数)把任何类型转换成数值类型 parseInt（参数1，参数2）将字符串转换成整数 parseFloat()将字符串转换成浮点数字 string(参数)：可以将任何类型转换成字符串 Boolean()可以将任何类型的值转换成布尔值 隐式（== – ===）；

50.数组方法pop() push() unshift() shift()

数组方法

Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除

51.ajax请求的时候get 和post方式的区别?

get post

一个在url后面 一个放在虚拟载体里面 有大小限制 安全问题 应用不同 一个是论坛等只需要请求的，一个是类似修改密码的;

52.call和apply和bind的区别

call apply bind

apply和call功能一样，只是传入的参数列表形式不同：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 都是用来改变函数的this对象的指向的； 第一个参数都是this要指向的对象； 都可以利用后续参数传参；

bind是返回对应函数，便于稍后调用，apply、call是立即调用；

53.ajax请求时，如何解释json数据

JSON

使用eval parse,鉴于安全性考虑 使用parse更靠谱;

54.事件委托是什么

事件委派

利用事件冒泡的原理，自己的所触发的事件，让他的父元素代替执行！

55.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

闭包

56.添加 删除 替换 插入到某个节点的方法

DOM操作

 obj.appendChild()  obj.removeChild  obj.replaceChild  obj.insertBefore

57.说一下什么是javascript的同源策略？

同源策略

 一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合 那些算同源?????

58.谈谈This对象的理解。

this

 this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。  但是有一个总原则，那就是this指的是调用函数的那个对象。  this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

59.了解Node么？Node的使用场景都有哪些？

node

 NodeJS是近年来比较火的服务端JS平台，这一方面得益于其在后端处理高并发的卓越性能，另一方面在nodeJS平台上的npm、grunt、express等强大的代码与项目管理应用崛起，几乎重新定义了前端的工作方式和流程。  NodeJS的工作原理其实就是事件循环。可以说每一条NodeJS的逻辑都是写在回调函数里面的，而回调函数都是有返回之后才异步执行的。  使用场景：既然NodeJS处理并发的能力强，但处理计算和逻辑的能力反而很弱，因此，如果我们把复杂的逻辑运算都搬到前端（客户端）完成，而NodeJS只需要提供异步I/O，这样就可以实现对高并发的高性能处理。情况就很多啦，比如：RESTFUL API、实时聊天、客户端逻辑强大的单页APP，具体的例子比如说：本地化的在线音乐应用，本地化的在线搜索应用，本地化的在线APP等。

60.介绍js的基本数据类型

数据类型

Undefined、Null、Boolean、Number、String、
ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )
复制代码

61.介绍js有哪些内置对象？

内置对象

Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
参考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html
复制代码

62.说几条写JavaScript的基本规范？

js规范

1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
复制代码

 63.JavaScript原型，原型链 ? 有什么特点？

原型链

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype， 于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.proto

特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话， 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

    function Func(){}
    Func.prototype.name = "Sean";
    Func.prototype.getInfo = function() {
      return this.name;
    }
    var person = new Func();//现在可以参考var person = Object.create(oldObject);
    console.log(person.getInfo());//它拥有了Func的属性和方法
    //"Sean"
    console.log(Func.prototype);
    // Func { name="Sean", getInfo=function()}
复制代码

64.JavaScript有几种类型的值？，你能画一下他们的内存图吗？

数据类型 内存

栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
复制代码

64.如何将字符串转化为数字，例如'12.3b'?

字符串转数字

parseFloat('12.3b');
正则表达式，'12.3b'.match(/(\d)+(\.)?(\d)+/g)[0] * 1, 但是这个不太靠谱，提供一种思路而已。
复制代码

65.如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

字符串操作

function commafy(num){
    return num && num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
            return $2 + ',';
    });
}
复制代码

66.如何实现数组的随机排序？

随机

方法一：

    var arr = [1,2,3,4,5,6,7,8,9,10];
    function randSort1(arr){
        for(var i = 0,len = arr.length;i < len; i++ ){
            var rand = parseInt(Math.random()*len);
            var temp = arr[rand];
            arr[rand] = arr[i];
            arr[i] = temp;
        }
        return arr;
    }
    console.log(randSort1(arr));
复制代码

方法二：

    var arr = [1,2,3,4,5,6,7,8,9,10];
    function randSort2(arr){
        var mixedArray = [];
        while(arr.length > 0){
            var randomIndex = parseInt(Math.random()*arr.length);
            mixedArray.push(arr[randomIndex]);
            arr.splice(randomIndex, 1);
        }
        return mixedArray;
    }
    console.log(randSort2(arr));
复制代码

方法三：

    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);
复制代码

67.Javascript如何实现继承？

继承

1、构造继承 2、原型继承 3、实例继承 4、拷贝继承

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

    function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性
复制代码

69.javascript创建对象的几种方式？

创建对象

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。 1、对象字面量的方式 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2、用function来模拟无参的构造函数

    function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
    person.name="Mark";
    person.age="25";
    person.work=function(){
    alert(person.name+" hello...");
    }
    person.work();
复制代码

3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

    function Pet(name,age,hobby){
        this.name=name;//this作用域：当前对象
        this.age=age;
        this.hobby=hobby;
        this.eat=function(){
            alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
        }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法
复制代码

4、用工厂方式来创建（内置对象）

    var wcDog =new Object();
    wcDog.name="旺财";
    wcDog.age=3;
    wcDog.work=function(){
      alert("我是"+wcDog.name+",汪汪汪......");
    }
    wcDog.work();
复制代码

5、用原型方式来创建

    function Dog(){
    }
    Dog.prototype.name="旺财";
    Dog.prototype.eat=function(){
    alert(this.name+"是个吃货");
    }
    var wangcai =new Dog();
    wangcai.eat();
复制代码

6、用混合方式来创建

    function Car(name,price){
       this.name=name;
       this.price=price;
    }
    Car.prototype.sell=function(){
       alert("我是"+this.name+"，我现在卖"+this.price+"万元");
    }
    var camry =new Car("凯美瑞",27);
    camry.sell();
复制代码

---

其他

1.对Node的优点和缺点提出了自己的看法？

node

(优点） 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

（缺点） Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

2.你有哪些性能优化的方法？

性能优化

（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布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3.http状态码有那些？分别代表是什么意思？

状态码

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
复制代码

4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

页面过程

(1) 查找浏览器缓存;
(2) DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求;
(3) 进行HTTP协议会话;
(4) 客户端发送报头(请求报头);
(5) 文档开始下载;
(6) 文档树建立，根据标记请求所需指定MIME类型的文件;
(7) 文件显示;
(8) 浏览器这边做的工作大致分为以下几步：;
a.加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
b.解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
复制代码

5.说说最近最流行的一些东西吧？常去哪些网站？

流行

Node.js、MVVM、React-native,vue ,Weex等 CSDN,Segmentfault,博客园,Stackoverflow等

---

CSS

1.简要说一下CSS的元素分类

元素类型

块级元素:div,p,h1,form,ul,li; 行内元素 : span>,a,label,strong,em; 行内块元素:input,img

2.CSS隐藏元素的几种方法（至少说出三种）

隐藏

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互; Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏; Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在; Position:不会影响布局,能让元素保持可以操作; Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

3.CSS清除浮动的几种方法（至少两种）

清除浮动

使用带clear属性的空元素 使用CSS的overflow属性; 使用CSS的:after伪元素; 使用邻接元素处理;

4.CSS居中（包括水平居中和垂直居中）

居中

内联元素居中方案 水平居中设置: 1.行内元素 2.Flex布局 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

 垂直居中设置: 1.父元素高度确定的单行文本（内联元素） 2.父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样）,然后设置 vertical-align:middle; b:先设置 display:table-cell 再设置 vertical-align:middle;

块级元素居中方案 水平居中设置: 1.定宽块状元素 2.不定宽块状元素 a:在元素外加入 table 标签（完整的,包括 table、tbody、tr、td）,该元素写在 td 内,然后设置 margin 的值为 auto; b:给该元素设置 displa:inine 方法; c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置: 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性; 利用position:fixed（absolute）属性,margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中; 使用css3的新属性transform:translate(x,y)属性; 使用:before元素;

5.写出几种IE6 BUG的解决方法

ie6

双边距BUG float引起的 使用display 3像素问题 使用float引起的 使用dislpay:inline -3px 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active ie z-index问题 给父级添加position:relative png 透明 使用js代码 改 min-height 最小高度 !important 解决’ select 在ie6下遮盖 使用iframe嵌套 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px）

6.对于SASS或是Less的了解程度？喜欢那个？

sass less

7.Bootstrap了解程度

bootstrap

8.页面导入样式时,使用link和@import有什么区别？

引入css link @import

本质的区别:link属于XHTML标签,而@import完全是CSS提供的一种方式 加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。 兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持。@import只有在ie5以上才能识别,而link标签无此问题。 使用dom控制样式时的差别:当控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

9.介绍一下CSS的盒子模型？

盒模型

有两种, IE （怪异）盒子模型、标准 W3C 盒子模型; IE盒模型的content部分包含了 border 和 padding; 标准盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

选择符

 id选择器（ # myid）、类选择器（.myclassname）、标签选择器（div, h1, p）、相邻选择器（h1 + p）、子选择器（ul > li）、后代选择器（li a）、通配符选择器（ * ）、属性选择器（a[rel = "external"]）、伪类选择器（a: hover, li: nth - child）  可继承的样式: font-size font-family color;  不可继承的样式:border padding margin width height ;  优先级就近原则,同权重情况下样式定义最近者为准;

优先级为:
    !important >  id > class > tag
    important 比 内联优先级高
复制代码

CSS3新增伪类: p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type 选择其父元素的首个P元素 p:first-child 选择其父元素的首个p元素(一定是p才行) p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素,不能有其他元素) p:only-of-type选择其父元素的只有一个p元素(不能有第二个P元素,其他元素可以有)  选第N个 p:nth-child(n)   选择其父元素的第N个 刚好是p的元素 p:nth-last-child(n) ..............................................从最后一个子元素开始计数 p:nth-of-type(n)  选择其父元素的n个元素 p:nth-last-of-type(n) ........................从最后一个子元素开始计数

11.CSS3有哪些新特性？

css3新特性

CSS3实现圆角（border-radius:8px）,阴影（box-shadow:10px）; 对文字加特效（text-shadow、）,线性渐变（gradient）,旋转（transform）; transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba;

12.如何理解CSS的盒子模型？

盒模型

每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

13.link和@import的区别？

css引入 link @import

（1）link属于XHTML标签，而@import是CSS提供的。 （2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。 （3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。 （4）link方式的样式权重高于@import的权重。 （5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

14.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

选择符

id选择器（# myid）
类选择器（.myclassname）
标签选择器（div、h1、p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。
优先级为：
   !important >  id > class > tag
   important 比 内联优先级高
复制代码

CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。

15.如何居中div，如何居中一个浮动元素？

居中

给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; }

16.如何居中一个浮动元素

居中

确定容器的宽高，如宽500、高 300的层，设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%; }

17.经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？

css兼容

（1）png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。 （2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。 （3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。 （4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。 .bb{ background-color:#f1ee18; /所有识别/ .background-color:#00deff\9; /IE6、7、8识别/ +background-color:#a200ff; /IE6、7识别/ _background-color:#1e0bd1; /IE6识别/ }

18.常用Hack的技巧：

hack

（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； （2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。 （3）IE下，even对象有x,y属性，但是没有pageX,pageY属性； （4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。 （5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。 （6）超链接访问过后hover样式就不出现了

19.被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：

a 超链接

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？ display的值： block 像块类型元素一样显示。 none 缺省值。像行内元素类型一样显示。 inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 relative和absolute定位原点： absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 relative：生成相对定位的元素，相对于其正常位置进行定位。

20.为什么要初始化CSS样式？

重置样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 最简单的初始化方法就是：* {padding: 0; margin: 0;} （笔者不建议这样） 淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { 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; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

21.CSS是怎样定义权重规则的？

css权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值： /权重为1/ div{ } /权重为10/ .class1{ } /权重为100/ #id1{ } /权重为100+1=101/ #id1 div{ } /权重为10+1=11/ .class1 div{ } /权重为10+10+1=21/ .class1 .class2 div{ } 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

22.如何理解表现与内容相分离？

分离

表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。

23.如何定义高度为1px的容器？

小盒子

div{ heigh：1px; width:10px; background:#000; overflow:hidden } IE 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。

24.如何解决IE 6的3px问题？

ie兼容 3px

_zoom:1; margin-left: value; _margin-left: value-3px; Firefox下文本无法撑开容器的高度，如何解决？

25.清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

清除浮动

26.怎么样才能让层显示在Flash之上呢?

flash

解决的办法是给Flash设置透明属性

或者

27.cursor:hand在FF下不显示小手，如何解决？

ie6兼容 cursor

cursor; pointer;

28.在IE中内容会自适应高度，而FF不会自适应高度，怎么办？

高度自适应

在要自适应高度的层中加一个层，样式为 .clear{clear:both;font-size:0px;height:1px}， 这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类。 #test:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

29.用纯 CSS 创建一个三角形的原理是什么？

三角形

把上、左、右三条边隐藏掉（颜色设为 transparent） #demo { width:0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }

30.如何设计一个满屏“品”字布局？

品

简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 用float或inline使其不换行。

31.怎么让Chrome支持小于12px 的文字？

chrome字体大小

body{-webkit-text-size-adjust:none}

32.前端页面有哪三层构成，分别是什么？作用是什么？

MVC

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” 网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

33.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

: ::

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

34.现在HTML5中css3可以写出一个旋转的立方体，请写出要用到的CSS属性。

旋转立方体

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
-webkit-animation:  rot 4s linear infinite;
复制代码

35.介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass less

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。 Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 区别： (1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。 (2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。 (3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。 (4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

---

浏览器图标 <link rel="icon" href="favicon.ico"/>

BFC 子代选择器 margin-top误加 省略号 word-break: break-all html5特点 语义化、SEO、 h5的表单新属性 pleseholder、

转载于:https://juejin.im/post/5add5bb9f265da0b9c103af8