前端面试题个人总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36008914/article/details/66538385

前端面试题

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

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

没有更多推荐了,返回首页