前端面试题个人总结

前端面试题

在知乎上看到别人贴的面试体，自己总结了一下。

对CSS规范的了解
CSS编码规范：
语法：
1. 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
2. 为选择器分组时，将单独的选择器单独放在一行。
3. 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
4. 声明块的右花括号应当单独成行。
5. 每条声明语句的 : 后应该插入一个空格。
6. 为了获得更准确的错误报告，每条声明都应该独占一行。
7. 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
8. 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
9. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
10. 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
11. 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
12. 为选择器中的属性添加双引号，例如，input[type=”text”]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
13. 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

    /* Bad CSS */
    .selector, .selector-secondary, .selector[type=text] {
      padding:15px;
      margin:0px 0px 15px;
      background-color:rgba(0, 0, 0, 0.5);
      box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    }

    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }

css声明顺序
  相关的属性声明应当归为一组，并按照下面的顺序排列：
  1. Positioning 定位属性。如position, left, top, z-index等
  2. Box Model  盒子模型属性。如display, float, width, height, margin, padding等属性
  3. Typographic 文字相关属性。如font, color, text-*, line-height等属性
  4. Visual 视觉属性。如background, border, box-shadow, border-radius等
    由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
    .declaration-order {
      /* Positioning */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;

      /* Box-model */
      display: block;
      float: right;
      width: 100px;
      height: 100px;
      margin: 0;
      padding: 0;

      /* Typography */
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      color: #333;
      text-align: center;

      /* Visual */
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;

      /* Misc */
      opacity: 1;
    }

不要使用@import
  与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
    1. 使用多个 <link> 元素
    2. 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

媒体查询(Media query) 代码所处的位置
  将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
  如果你把他们分开了，将来只会被大家遗忘。
    .element { ... }
    .element-avatar { ... }
    .element-selected { ... }

    @media (min-width: 480px) {
      .element { ...}
      .element-avatar { ... }
      .element-selected { ... }
    }

单行规则声明
  对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
    /* 一条声明的样式只写在一行 */
    .span1 { width: 60px; }
    .span2 { width: 140px; }
    .span3 { width: 220px; }

    /* 多条声明的样式，每一条声明写在一行 */
    .sprite {
      display: inline-block;
      width: 16px;
      height: 15px;
      background-image: url(../img/sprite.png);
    }

简写形式的属性声明
  在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
    1. padding
    2. margin
    3. font
    4. background
    5. border
    6. border-radius
      /* 不好的代码 */
      .element {
        margin: 0 0 10px;
        background: red;
        background: url("image.jpg");
        border-radius: 3px 3px 0 0;
      }
      /* 好的代码 */
      .element {
        margin-bottom: 10px;
        background-color: red;
        background-image: url("image.jpg");
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }

class的命名
  1. class 名称中只能出现小写字符和横线（例如，.btn 和 .btn-danger）。
  2. 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
  3. class 名称应当尽可能短，并且意义明确。
  4. 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式的名称。
  5. 基于最近的父 class 或基本 class 作为新 class 的前缀。
  6. 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
    /* 不好的代码 */
    .t { ... }
    .red { ... }
    .header { ... }

    /* 好的代码 */
    .tweet { ... }
    .important { ... }
    .tweet-header { ... }

选择器
  1. 对于通用元素使用 class ，这样利于渲染性能的优化。
  2. 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
  3. 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
  4. 只有在必要的时候才将 class 限制在最近的父元素内
    /* 不好的代码 */
    span { ... }
    .page-container #stream .stream-item .tweet .tweet-header .username { ... }
    .avatar { ... }

    /* 好的代码 */
    .avatar { ... }
    .tweet-header .username { ... }
    .tweet .avatar { ... }

代码组织
  1. 以组件为单位组织代码段。
  2. 制定一致的注释规范。
  3. 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
  4. 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

CSS3动画的实现
1.transform 变形
.div{
transform:translate(x,y);
}
.div{
transform:scale(x,y);//xy方向倍数
}
.div{
transform:rptate(-30deg);//角度
}
.div{
transform:skew(x,y);//xy方向倾斜角度
}

2.transition 过渡
transition: width 3s ease(快-慢-快)/linear(线性匀速)/ease in(慢-快)/ease out(快-慢)

3.animation 动画
@keyframes 自定义名称{
from/to/百分百{
样式属性：样式；
}
}

手写类继承
(1)构造继承
(2)原型继承
(3)实例继承
(4)拷贝继承
//原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
function Parent() {
this.name = ‘song’;
}
function Child() {
this.age = 28;
}
Child.prototype = new Parent(); //通过原型,继承了Parent
var demo = new Child();
alert(demo.age);
alert(demo.name); //得到被继承的属性

call apply继承
function a(){
alert(“a”);
}
function b(){
}
b.call(a());
b.apply(a());
b();

手写数组去重

function deleteArr(arr){
  for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;j++){
      if(arr[i]==arr[j]){
         arr.splice(i,1);
         j=0;
         i=0;
      }
    }

  }
  console.log(arr);
}
deleteArr(arr);

var arr=[3,2,5,5,8,8,8,9,10,1,2];
var a=arr.filter(function(items,index,self) {
  return self.indexOf(items)===index;
});
console.log(a);

如何遍历对象的属性
js for in
jq Object.each=function(index,items){
console.log(items[index]);
}

new关键字的过程
(1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。

判断变量类型，如何判断变量是函数
表达式 返回值

typeof undefined  'undefined'
typeof null 'object'
typeof true 'boolean'
typeof 123  'number'
typeof "abc"  'string'
typeof function() {}  'function'
typeof {} 'object'
typeof [] 'object'
typeof unknownVariable  'undefined'

function a(){};
console.log(typeof a==='function');//true;

如何判断一个变量是数组

var arr = [1,2,3,1]; 
alert(arr instanceof Array); // true 

var arr = [1,2,3,1]; 
alert(arr.constructor === Array); // true 

function isArrayFn (o) { 
return Object.prototype.toString.call(o) === '[object Array]'; 
} 
var arr = [1,2,3,1]; 
alert(isArrayFn(arr));// true 

call和apply的作用，区别

call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不  同；

语法：

 .call(对象[,参数1，参数2,....]);//此地参数是指的是对象的参数，非方法的参数；
 .apply(对象,参数数组)//参数数组的形式:[参数1，参数2,......]

什么是JSON？

前面简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。

JSON的优点：

1、基于纯文本，跨平台传递极其简单；
2、Javascript原生支持，后台语言几乎全部支持；
3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；
4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；
5、容易编写和解析，当然前提是你要知道数据结构；

js实现css的:hover效果

   window.onload=function(){
   var a=document.getElementById("div1");
   a.onmouseover=function(){
    this.className="in";
    // alert(11);
   }
   a.onmouseout=function(){
    this.className="out";
    // alert(22);
   }
}

只能加没有的属性。

解释事件代理，事件流模型
Q：事件的委托（代理 Delegated Events）的原理以及优缺点

A：委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，

优点是：

（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

缺点是：

事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

js
var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
var button = e.target;
if(!button.classList.contains("active"))
button.classList.add("active");
else
button.classList.remove("active");
});
jq
$(function(){
$('.ul').on('click','.li',function(e){
  var li=e.target;//ul下面的每个li
  console.log(e.target);
     $(li).addClass('active');
});

Q：描述下js里面的事件流

A：DOM2级事件模型中规定了事件流的三个阶段：捕获阶段、目标阶段、冒泡阶段，低版本IE（IE8及以下版本）不支持捕获阶段

捕获事件流：Netscape提出的事件流，即事件由页面元素接收，逐级向下，传播到最具体的元素。

冒泡事件流：IE提出的事件流，即事件由最具体的元素接收，逐级向上，传播到页面。

display属性的值和介绍
block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none缺省值。象行内元素类型一样显示。
inline行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table此元素会作为块级表格来显示。
inherit规定应该从父元素继承 display 属性的值。

响应式布局的方法，并详细解释

媒体查询重新定义不同分辨率下的css样式
背景图background-size：100%/contain;

box-sizing的属性值及区别
box-sizing:content-box|border-box|inherit;
content-box撑起来
border-box挤进去
inherit继承父级

移动端调试的方法
chrome开发者模式

有几种Doctype，Doctype的作用
标准，混杂，准标准模式，超级标准模式
严格模式和混杂模式如何区分，有何意义
（1）、声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 < !DOCTYPE HTML>？

 HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

为什么要跨域，跨域是什么

域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

解决方案：
1、js向服务器发送请求，然后让服务器去另一个域上获取数据后返回。（用于你无法控制另一个域） 比如php中利用cUrl。
2、放置跨域文件.
3、用JSONP。虽然不能跨域进行通信，但是可以引入跨域的js文件。

是否了解viewport

viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
 < meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

前端性能优化

  （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指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。