前端面试题

这里粘过来是为了方便自己找一些答案什么的~望见谅

1. css3如何实现图片旋转？

答：（参考）

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

CSS代码：

1 .rotate{
2     -ms-transform:rotate(90deg); /* IE 9 */
3     -moz-transform:rotate(90deg); /* Firefox */
4     -webkit-transform:rotate(90deg); /* Safari and Chrome */
5     -o-transform:rotate(90deg); /* Opera */
6 }

JS代码：

element.style.webkitTransform="rotate(-90deg)"
element.style.MozTransform="rotate(-90deg)"
element.style.msTransform="rotate(-90deg)"
element.style.OTransform="rotate(-90deg)"
element.style.transform="rotate(-90deg)";

2. JavaScript倒计时

用setInterval实现

<script type="text/javascript">
    $(function(){
        var second = 10;
        var div = $("div");
        var timer;
        timer = setInterval(function(){
            second--;
            if(second < 0){
                alert("倒计时结束！");
                clearInterval(timer);
                return;
            }
            div.html('还有'+second+'秒！');
        },1000);

    });
</script>

用setTimeout实现

<script type="text/javascript">
    $(function(){
        var second = 10;
        var div = $("div");
        var timer;
       
        function change(){
            second--;
            if(second>=0){
                div.html("还有"+second+"秒！");
                timer = setTimeout(change,1000);
            } else {
                clearTimeout(timer);
                alert("倒计时结束！")
            }
        }
        timer = setTimeout(change,1000);

    });
</script>

3. `setTimeout` 和 `setInterval` 的区别

setTimeout 指定在某时间段后调用一次，setInterval 调用多次。使用setInterval，需要手动的停止tick触发。而使用方法中嵌套setTimeout，可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。

4. JavaScript如何处理异常

try...catch...　　

try{
    ...
} catch (err){
    ... //弹出错误或异常处理
}

throw　　

<script type="text/javascript">
try{
    if(x>10)
        throw "err1";
    else if(x<0)
        throw "err2"

}catch(err){
    ...
}

.onerror

　　　　如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

<script>
    onerror = handleErr;
    function handleErr(msg,url,l){
        //处理错误
        return true or false;
    }    
</script>

eg：

<html>
    <head>
        <script type="text/javascript">
            onerror=handleErr
            var txt=""

            function handleErr(msg,url,l)
            {
                txt="There was an error on this page.\n\n"
                txt+="Error: " + msg + "\n"
                txt+="URL: " + url + "\n"
                txt+="Line: " + l + "\n\n"
                txt+="Click OK to continue.\n\n"
                alert(txt)
                return true
            }

            function message()
            {
                adddlert("Welcome guest!")
            }
        </script>
    </head>

    <body>
        <input type="button" value="View message" onclick="message()" />
    </body>

</html>

则弹出：

5. JSON 和 XML 的优缺点

XML的优缺点
1. XML的优点
  1. 　　格式统一，符合标准；
  2. 　　容易与其他系统进行远程交互，数据共享比较方便。
2. XML的缺点
  1. 　　XML文件庞大，文件格式复杂，传输占带宽；
  2. 　　服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
  3. 　　客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
  4. 　　服务器端和客户端解析XML花费较多的资源和时间。
.JSON的优缺点
1. JSON的优点：
  1. 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
  2. 易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
  3. 支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
  4. 在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
  5. 因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
2. JSON的缺点
  1. 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
  2. JSON格式目前在Web Service中推广还属于初级阶段。

6. JavaScript 如何实现继承

1. 构造函数伪装

调用父级的构造函数——为了继承属性
Persion.call(this, name, sex);

2. 原型链

通过原型来继承父级的方法
Worker.prototype=Persion.prototype;//这样是引用，会影响父类

for (var i in Person.prototype)
{
Worker.prototype[i] = Person.prototype[i];
}

<script>
    function Person(){
        this.sex = "female";
        this.age=18;
        this.shouting = function(){
            console.log("父类的方法");
        }
    }
    //继承
    function Worker(){
        this.base = Person;
    }
    Worker.prototype = new Person;
    //为子类添加新的方法
    Worker.prototype.typeC = function(){
        console.log("Hello, 码农！")
    };
    (function(){
        var a = new Worker();
        console.log(a.sex);         //调用父类的属性
        console.log(a.age);         //调用父类的属性
        a.shouting();               //调用父类的方法
        a.typeC();                  //调用子类的方法
    })(); 
</script>

输出：

female
index_3.html:99 18
index_3.html:84 父类的方法
index_3.html:94 Hello, 码农！

　　JavaScript中创建自定义对象：

　　引入概念：原型（prototype）。我们可以简单的把prototype看做是一个模版，新创建的自定义对象都是这个模版（prototype）的一个拷贝（实际上不是拷贝而是链接，只不过这种链接是不可见，给人们的感觉好像是拷贝）。

　　通过prototype创建自定义对象的一个例子：

<script>
    //构造函数
    function Person(name,sex){
        this.name=name;
        this.sex=sex;
    }
    //定义Person的原型，原型中的属性可以被自定义对象引用
    Person.prototype = {
        getName: function(){
            return this.name;
        },
        getSex: function(){
            return this.sex;
        }
    }
    //创建自定义对象（实例化类）
    var zhang = new Person("zhang","man");
    console.log(zhang.getName());       //zhang
    
</script>

　　为了证明prototype模版并不是被拷贝到实例化的对象中，而是一种链接的方式，请看如下代码：

<script> 
    function Person(name,sex){
        this.name=name;
        this.sex=sex;
    }
    Person.prototype.age=20;
    var zhang = new Person("zhang","man");
    console.log(zhang.age);     //20
    //覆盖prototype中的age属性
    zhang.age = 19;
    console.log(zhang.age);     //19
    delete zhang.age;
    //在删除实例属性age后，此属性值又从prototype中获取
    console.log(zhang.age);         //20
    
</script>

<script> 
    function Person(name, age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function(){
        console.log('hello, my name is '+this.name);
    };
    function Man(name,age){
        Person.apply(this,arguments);
    }
    Man.prototype = new Person();
    Man.prototype.sayMan = function(){
        console.log('name is ' + this.name);
    }
    var man1 = new Man('joe');
    var man2 = new Person('Amy');
    Person.prototype.say2 = function(){
        console.log("name is "+this.name);
    }
    console.log(man1.name);     //joe
    man1.say();               //hello, my name is joe               
    man2.say();               //hello, my name is Amy
    man1.sayMan();            //name is joe
    //man2.sayMan();            //man2.sayMan is not a function
    man1.say2();                //name is joe
    man2.say2();                //name is Amy   
</script>

　　最流行的：寄生组合继承

<script> 
    function Person(name, age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function(){
        console.log('hello, my name is '+this.name);
    };
    function Man(name,age){
        Person.apply(this,arguments);
    }
    Man.prototype = Object.create(Person.prototype);
    Man.prototype.constructor = Man;
    var man1 = new Man("joe");  
    console.log(man1.name);         //joe
    man1.say();                     //hello, my name is joe

</script>

7. 对闭包的理解

在程序语言范畴内的“闭包”指的是函数把其中的变量作用域都“包”在该函数的作用域内，形成一个“包”，外部函数无法访问内部变量。所以严格意义上来说，JavaScript 中的函数都是闭包。但我们常说的闭包，通常是指为了让外部函数访问到内部函数中变量，使内部函数返回一个函数，在其中操作内部变量。

8. RESTful 的操作名

PUT：创建新资源，修改已有资源
GET：获取资源
DELETE：删除某个资源
POST：创建资源、提交表单、添加资源状态

9. HTTP 404、302、500、403 状态名是什么意思

200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
302 该资源原本确实存在，但已经被临时改变了位置；或者换个说法，就是临时的存在于某个临时 URL 下。通常会发送 Header 来暂时重定向到新的新位置。
301 Moved Permanently // - 资源的URI已被更新

10. 你认为前端是做什么的？

主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。

狭义的前端是实现设计师的设计稿；广义的前端是所有跟用户打交道的环节。

11. 模块化了解吗？

http://www.cnblogs.com/doublenet/p/4918306.html

12. `position` 的几种值？

fixed, absolute, static, relative

13. 如果一个元素 `absolute`，没设 `left`、`top`，位置是哪里？

相当于 static 的默认位置

14. `width:100px; padding:50px; border:1px; margin:50px` 问 border 之间的距离？

200px, IE下某些版本是100px。如果指定了box-sizing: border-box，则距离都是 100px。

15. `var a=["a","b","c","d"]` 每过 1 秒 `alert` 一下数组中的值

方法1：

<script> 
    var a = ["a", "b", "c", "d"];
    var i = 0;
    var timer = setInterval(function(){
        if(i < a.length)
        {
            alert(a[i++]);
        } else {
            clearInterval(timer);
        }
    },1000);
</script>

方法2 用setTimeout

<script> 
    var a = ["a", "b", "c", "d"];
    var i = 0;
    var timer = null;

    function aler(){
        if(i<a.length){
            alert(a[i++]);
            timer = setTimeout(aler, 1000);
        } else {
            clearTimeout(timer);
            alert("wanle");
        }
    }
    timer = setTimeout(aler,1000);
</script>

使用闭包：

<script> 
    var a = ["a", "b", "c", "d"];
    var i = 0;
    for(var i = 0; i<a.length; i++){
        (function(j){
            setTimeout(function(){
                alert(a[j]);
            },1000*j);
        })(i);
    }
</script>

16.Ajax 请求需要做哪些事？

创建ajax对象：new XMLHttpRequest() 或 new ActiveXObject("Microsoft.XMLHTTP");
连接服务器: open(method , url, 是否异步)
发送请求：send()
接收返回：onreadystatechange

<script> 
 　　//创建Ajax对象
    var oAjax=null;
    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //为解决ie6下不兼容问题
    }
    //连接服务器
    oAjax.open('GET','abc.txt',true);       //open(方法，url，是否异步)

    //发送请求
    oAjax.send();

    //接收返回
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4);        //完成.
        {
            if(oAjax.status==200);      //200表示成功。
            {
                alert('成功！'+oAjax.responseText);
            }
        }
    };

</script>

17. 如何加快页面加载速度？

http://www.cnblogs.com/MarcoHan/p/5295398.html

减少 HTTP 访问次数、
CDN（内容发布网络）
minify、
服务器增加缓存、
CSS 放前面 JS 放后面、
图片压缩、
CSS Sprite:　　
1. 通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
避免使用CSS表达式
使用外部的CSS和JavaScript
减少DNS查找

18. 为什么要减少 HTTP 访问次数？

浏览器进程请求链接的数目是有限的，如果有很多 HTTP 请求，有些就得等着；另外，建立 HTTP 链接的开销比较大，需要三次握手之类，而相对地，一次连接中文件大小的边际成本就很小。

只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。

19. 从浏览器输入 URL 到页面渲染发生了什么事？

参考：http://www.cnblogs.com/kongxy/p/4615226.html

在浏览器中输入url，WebKit 调用其资源加载器加载该 URL 对应的网页
应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
应用层客户端发送http请求
1. http请求包括请求报头和请求主体
2. 请求报头包括请求的方法（GET/POST）、目标url、遵循的协议（http/https/ftp...），返回的信息是否需要缓存，以及客户端是否需要发送cookie等
传输层TCP传输报文（三次握手）
网络层IP协议查询MAC地址
数据到达数据链路层
服务器接收数据
服务器响应请求
服务器返回响应文件
页面渲染

当用户输入网页 URL 的时候，WebKit 调用其资源加载器加载该 URL 对应的网页。

加载器依赖网络模块建立连接，发送请求并接收答复。

WebKit 接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的。

网页被交给 HTML 解释器转变成一系列的词语（Token）。

解释器根据词语构建节点（Node），形成 DOM 树。

如果节点是 JavaScript 代码的话，调用 JavaScript 引擎解释并执行。

JavaScript 代码可能会修改 DOM 树的结构

如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前 DOM 树的创建，直到 JavaScript 的资源加载并被 JavaScript 引擎执行后才继续 DOM 树的创建。摘自《WebKit技术内幕》另外，网上看到颗粒度非常细的回答，表示不明觉厉！

20. 在 network 中看到很多 JavaScript 是并行发的，但是这就叫异步加载吗？

21. CSS 的加载是异步的吗？表现在什么地方？

22. JavaScript 的多个模块怎么组织？

posted on 2016-07-26 22:00 杠子阅读(667) 评论(0) 编辑收藏举报

刷新页面返回顶部

杠子