面试题集

HTML部分

1.XHTML和HTML有什么区别

• xhtml必须被正确的嵌套
• xhtml必须被关闭
• 标签名必须要小写
• xhtml文档必须拥有根元素

2.严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

• <!DOCTYPE>申明位于文档中的最前面，处于html标签之前，告知浏览器的解析器，用什么文档类型打开。
• 严格模式的排版和js运作模式是以该浏览器支持的最高标准运行；
• 混杂模式页面以宽松的向后兼容的方式显示；
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
• 用于声明文档使用那种规范一般为严格，过渡基于框架的html文档，加入xml可以触发

3.常见的兼容性问题

• png24位的图片在ie6浏览器中出现背景，解决方案：改成png8
• 默认浏览器的margin和padding不同，解决方案：加一个全局的margin:0;padding:0;
• ie6的双边距，块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置大，解决方案:在float的标签样式控制中加入display:inline
• 最新的面试总结：https://github.com/Xing-Chuan/blog/blob/master/works/Web%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93-2017-05.md
• ie下可以使用获取常规属性的的方法来获取自定义的属性，也可以通过getAttribute()来获取，Firefox下只能使用getAttribute()获取自定义属性。解决方案：统一通过getAttribute()获取。
• ie下，event对象有x,y属性，但是没有pagex,pagey属性，Firefox下，event对象由pageX,pageY属性，但没有x,y属性。解决方案：条件注释
• Chrome中文界面下默认将会小于12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none
• 超链接访问后hover样式就不出现了，被点击访问过的样式不在具有hover和active,解决方案：改变css属性排列的顺序：L-V-H-A

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

• canvas,video,audio,text-shadow,box-shadow,boder-radius,gradient,transform,grba

移除了的元素：

• frame,frameset,noframes,center,font,u,tt,big,basefont
  兼容性问题：
• ie8,ie7,ie6支持通过document.createElement方法产生标签
• 浏览器支持新标签后，还需要添加标签默认的样式
• 使用html5shim框架 如何区分：doctype声明/新增的结构元素/功能元素

5.语义化的理解

• 用正确的标签做正确的事情
• 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

  6.HTML5的离线储存

• localStorage 长期存储数据，浏览器关闭后数据不丢失
• sessionStorage 数据在浏览器关闭后自动删除

6.css选择符有哪些？哪些属性可以继承？

• id选择符，class选择符，标签选择符，通用选择符
• font-size,font-family

  7.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 盒子模型有两种一种是IE盒子模型和W3C盒子模型
• 盒子模型包括:content,padding,margin,border
• 区别：IE的content部分包括了padding和margin

7.纯css写一个三角形

div{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

javascript部分

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

1.对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2.无参的构造函数

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 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();

2 css写一个品字布局

html:
 <div class="header">头</div>
    <div class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="clear"></div>
    </div>
css:
 * {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .header {
        background-color: gray;
        position: absolute;
        top: 0;
        bottom: 50%;
        left: 0;
        right: 0;
    }
    
    .main .left,
    .main .right {
        background: #a23;
        position: absolute;
        bottom: 0;
        left: 0;
        top: 50%;
        right: 0;
    }
    
    .main .left {
        right: 50%;
    }
    
    .main .right {
        background: #e11;
        left: 50%;
    }

3.javascript作用域链

• 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
• 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数。

4.javascript的作用域和变量申明提升？

• javascript的变量申明具有hosting机制，javascript在执行的时候，会把所有变量的申明都提升到当前作用域的最前面。当前作用域内的声明都会提升到作用域的最前面，包括变量和函数的申明。

5.什么是闭包？有什么作用？

• 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的常见方式就是在一个函数中创建另一个函数，通过另一个函数访问这个函数的局部变量，突破作用域，将函数内部的变量和方法传递到外部。
• 闭包的特性：
  1.函数内再嵌套函数
  2.内部函数可以引用外层的参数和变量
  3.参数和变量不会被垃圾回收机制回收

6.js延迟加载的方式有哪些？

• defer和async、动态创建dom、按需异步载入js

7.ajax是什么？如何创建ajax?

• 异步传输+js+xml
• 异步就是想服务器发送请求的时候，不必等待结果，而是同时做其他的事情，等到有了结果它自己会根据设定进行后续操作。页面不会发生整页刷新，提高用户体验。
• 过程:
  1.创建xmlhttprequest对象
  2.创建一个新的http请求，并指定该http请求的方法、url及验证信息
  3.设置响应http请求状态变化的函数
  4.发送http请求
  5.获取异步调用返回的数据
  6.使用js和dom实现局部刷新

8.同步和异步的区别？

• 同步：浏览器访问服务器请求，用户看到页面刷新，重新发请求，页面刷新，新内容出现，用户看到新内容，进行下一步操作
• 异步:浏览器访问服务器，用户正常操作，浏览器后端进行请求，等请求完，页面不刷新，看到新内容。

9.模块化怎么开发？

立即执行函数，不暴露私有成员

10.如何编写高性能的js

1.尽量不要用for-in循环访问数组，建议用for循环
2.建议将对象进行缓存处理，特别是dom访问是比较耗资源的
3.建议不要在函数内进行过深的嵌套判断
4.避免循环引用，防止内存泄漏
5.建议避免在函数内返回一个未申明的变量，会污染外部变量
6.var申明变量，建议写在多行

11.统计一个字符串出现最多的字母

var str = 'afjkjhhklkaakakljkjaakllaaaa';
    function findzifu(str) {
        if (str.length == 1) {
            return str;
        }
        let charobj = {};
        for (let i = 0; i < str.length; i++) {
            if (!charobj[str.charAt(i)]) {
                charobj[str.charAt(i)] = 1;
            } else {
                charobj[str.charAt(i)] += 1;
            }
        }
        let max = '',
            maxvalue = 1;
        for (var k in charobj) {
            if (charobj[k] >= maxvalue) {
                max = k;
                maxvalue = charobj[k];
            }
        }
        return max+':'+maxvalue+'次';
    }
    console.log(findzifu(str));

12.去掉一组整型数组重复的值

var arr = [1, 13, 1, 23, 435, 3];
   let unique = function(arr) {
       let hashTable = {};
       let data = [];
       for (let i = 0, l = arr.length; i < l; i++) {
           if (!hashTable[arr[i]]) {
               hashTable[arr[i]] = true;
               data.push(arr[i]);
           }
       }
       return data;
   }
   console.log(unique(arr));

13.排序算法

var arr = [1, 2, 34, 56, 7, 8, 9, 0];
    function bubbler(arr) {
        for (let i = 0, l = arr.length; i < l; i++) {
            for (let j = i + 1; j < l; j++) {
                if (arr[i] > arr[j]) {
                    let tem = arr[i];
                    arr[i] = arr[j];
                    arr[j] = tem;
                }
            }
        }
        return arr;
    }
    console.log(bubbler(arr));

14.解释 function foo() {} 与 var foo = function() {} 用法的区别

• 方法一：foo在进入函数执行上下文开始执行代码的时候，foo是undefiend,直到执行完var foo=function(){}，才会赋值
• 方法二：在进入函数执行上下文开始执行代码的时候，foo已经是函数了

15.请尽可能详尽的解释 Ajax 的工作原理。

• 创建ajax对象
• 判断数据传输类型(get/post)
• 打开连接 open()
• 发送 send()
  当ajax对象完成第四步数据接收完成，判断http响应状态200-300之间或304执行回调函数

Jquery部分

1.jquery.extend 与 jquery.fn.extend的区别？

• jquery.extend(object),它是为jquery类添加类方法，可以理解为添加静态方法
• jquery.fn.extend(object);
• $.fn是jquery的命名空间，fn上的成员会对jquery实例每个有效

2.谈一下Jquery中的bind(),live(),delegate(),on()的区别？

• bind()是直接绑定在元素上；
• live()是通过冒泡的方式来绑定在元素上，更适合列表类型，支持动态数据
• delegate()则是更精确的小范围使用事件代理，性能优与live()
• on()则是最新的一种新事件绑定机制

3.针对 jQuery性能的优化方法？

a.总是使用id来查找元素
b.在class前面使用tags
c.缓存jquery对象
d.更好的利用链
e.限制直接对dom操作
f.事件委托
g.压缩js

其他框架

1.Node.js的适用场景

1.restful API这是nodejs最理想的应用场景，可以处理数万条链接，本身没有太多的逻辑，只需请求api即可
2.统一Web应用的UI层
3.大量的ajax请求的应用

2.解释一下 Backbone 的 MVC 实现方式？

我们用Backbone.Model表示应用中所有数据，models中的数据可以创建、校验、销毁和保存到服务端。当模型实例化时，他的initialize方法可以接受任意实例参数，其工作原理是backbone模型本身就是构造函数，所以可以使用new生成实例
Backbone.Collection就是一个Model对象的有序集合。因为Model是一条数据记录，也就是说，Collection相当于是一个数据集。具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存models的集合类
ollection.model覆盖此属性来指定集合中包含的模型类。可以传入原始属性对象（和数组）来 add, create,和 reset，传入的属性会被自动转换为适合的模型类型。Backbone.View中可以绑定dom元素和客户端事件。页面中的html就是通过views的render方法渲染出来的，当新建一个view的时候通过要传进一个model作为数据

3.什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

1.什么是前端路由？
路由是根据不同的 url 地址展示不同的内容或页面。前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。
2.什么时候用前端路由？
在单页面应用，大部分页面结构不变，只改变部分内容的使用
3.优缺点：

• 优点：
• 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
• 缺点：
• 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
• 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

4.react-router 路由系统的实现原理？

• 实现URL与UI界面的同步。其中在react-router中，URL 对应 Location 对象，而UI是由react components 来决定的，这样就转变成 location与components 之间的同步问题。

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

• 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
• 当需要设置的样式很多时设置className而不是直接操作style。
• 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

• 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。

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

• 查找浏览器缓存
• DNS解析，查找该域名对应的IP地址，重定向 ，发出第二个get请求
• 进行http协议会话
• 客户端发送报头
• 文档开始下载
• 文档树建立，根据标记请求所需指定MIME类型的文件
• 文件显示
• 浏览器大致做的工作包括以下几个：
• 加载：根据请求的url进行域名解析，向服务器发送请求，接受文件(html,css,js,图片)
• 解析:对加载到的资源进行语法解析，建议相应的内部数据结构属性表，css样式规则等

vue框架和其他框架比较

React和Vue有许多相似之处

• 使用Virtual DOM
• 提供了响应式和组件化的视图组件
• 将注意力集中保持在核心库，伴随在此，有配套的路由和负责处理全局状态的管理库

  性能上：

  • 渲染性能：javascript开销直接与求算必要DOM操作的机制相关，尽管vue和react都使用了virtual dom实现这一点，但vue的virtual dom 实现更加轻量化。
  • 更新新能：在react中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树；在vue中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重新渲染。