面试题收集

发表于 | 分类于

前言

​ 本篇博客说是面试题收集，其实多是在复习前端知识时的个人知识点集锦（当然面试也经常提及），大多为记忆性的，因为实际工作中往往是只注重结果而不太关心该知识点是否掌握，于是很多不常用到的知识点时常忘记，所以就写了这篇博客用来收录这些知识点（长期更新）

HTML 和 CSS 知识点总结

CSS中link和@import的区别

1
2
3
4
1. Link属于html标签，而@import是CSS中提供的
2. 在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
3. @import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
4. Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

盒模型

1
2
1. IE盒模型  宽width = 内容 + 内边距 + 边框
2. W3C盒模型 宽width = 内容

字体

1
1. 综合写法： font: font-style font-weight font-size/line-height font-family;

背景

1
2
1. 综合写法： background: background-color background-image background-repeat background-attachment (没有强制书写的顺序)
2. 背景剪切： background-clip ： border | padding | content

盒子阴影

1
box-shadow: h-shadow v-shadow blur spread color inset[outset]可选

清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
1. .clearfix:after {
         content: "."; 有内容了盒子就被撑起高度
         height: 0;
         display: block;
         clear: both;
         visibility: hidden;
     }
     .clearfix {
         *zoom: 1;
     }

2.   浮动元素末尾添加<div style=”clear:both”></div>或者br标签亦可

H5 \ CSS3新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1. <audio>、<video>媒体标签元素
	<audio controls> 		// 支持的格式包括 MP3、Wav 和 Ogg
      <source src="jamshed.mp3" type="audio/mpeg"> 
       Your browser does'nt support audio embedding feature. 
    </audio>
    注： video元素同上  // 支持的格式包括：MP4、WebM 和 Ogg

2. canvas 绘画元素
3. article、footer、header、nav、section语义化标签 	html5shim框架可以解决H5标签兼容问题
4. calendar、date、time、email、url、search 表单控件

5. localStorage 本地离线存储对象, sessionStorage 页面会话存储对象
	注：为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
6. webworker, websockt, Geolocation 新增技术

7. CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器  多背景 rgba

DOM 和 BOM 知识点总结

事件绑定和普通事件区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1. 普通事件绑定只执行一次，如：
	普通添加事件的方法：
    var btn = document.getElementById("hello");
    btn.onclick = function(){
        alert(1);
    }
    btn.onclick = function(){
        alert(2);
    }
    执行上面的代码只会alert 2 
 2. 事件绑定方式添加事件：
    var btn = document.getElementById("hello");
    btn.addEventListener("click",function(){
        alert(1);
    },false);
    btn.addEventListener("click",function(){
        alert(2);
    },false);
    执行上面的代码会先alert 1 再 alert 2
 总结：普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的事件绑定，（addEventListener）方式添加事件可以添加多个。
    addEventListener不兼容低版本IE
    普通事件无法取消
    addEventLisntener还支持事件冒泡+事件捕获

事件委托

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 简单的一个例子
<div id="box">
  <input type="button" id="add" value="编辑" />
  <input type="button" id="remove" value="删除" />
</div>
window.onload = function(){
  var oBox = document.getElementById("box");
  oBox.onclick = function (ev) {
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLocaleLowerCase() == 'input'){
      switch(target.id){
        case 'add' :
          alert('添加');
          break;
        case 'remove' :
          alert('删除');
          break;
      }
    }
  }
}

DOM元素被删除，监听器是否被删除

1
2
3
4
5
6
7
8
1. 如果被删除的DOM元素是无引用的，该元素就会被gc（garbage collection）
var b = document.createElement('p');
a.removeChild(b);
b = null;

2. 如果有仍然指向所述元素的引用，则该元素及其事件侦听器保留在存储器中
var b = document.createElement('p');
a.removeChild(b);

阻止事件冒泡和默认事件

1
cancelBubble()只支持IE,return false,stopPropagation()

window.onload和document.ready的区别

1
2
3
4
1. window.onload 是在dom文档树加载完和所有文件加载完之后执行的一个函数
2. Document.ready原生种没有这个方法，jquery中有 $(document).ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）
3. $(document).ready要比window.onload先执行
4. window.onload只能出来一次，$(document).ready可以出现多次

JavaScript知识点总结

判断变量是否为数组数据类型

1
2
3
4
5
6
7
1. obj instanceof Array 在IE某些版本中不支持
2. Es5新增 Array.isArray()，兼容写法：
	if(typeof Array.isArray==="undefined"){
      	Array.isArray = function(arg){
            return Object.prototype.toString.call(arg)==="[object Array]"
        };  
    }

创建函数的几种方式

1
2
3
4
5
6
7
8
9
10
1. 函数声明式
	function func1(arg1, arg2) {
      return arg1 + arg2
	}
2. 函数表达式 / 匿名式 
	var func2 = function(arg1, arg2) {
      return arg1 + arg2
	}
3. 函数对象方式（不推荐）
	var func3 = new Function(arg1, arg2, "return arg1 + arg2")

JSONP的原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
简述：现在本地定义一个接收数据的函数，当本地请求服务器上的js文件，服务器返回的js文件中的代码是对本地函数的调用，参数是服务器想要返回的数据
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?			code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>
https://blog.csdn.net/binggoogle/article/details/50687145

JS本地对象、内置对象、宿主对象

1
2
3
4
5
6
1. 本地对象（可实例化对象）
	Array、Object、RegExp、Date等
2. 内置对象（不可实例化对象）
	Gload、Math
3. 宿主对象（浏览器自带对象）
	document、window、navigator、history、location、screen

模块异步加载

1
2
3
4
5
6
7
8
9
10
/*
1. 原因：模块的异步加载（防止Dom渲染过慢）

2. <script src="js/require.js" defer async="true" ></script>
   注： 上面标签里的async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
 
3. <script src="js/require.js" data-main="js/main"></script>
   注： data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

相关文章： http://www.ruanyifeng.com/blog/2015/05/require.html 阮老师博客

es5和es6导入导出

1
2
3
4
es5的引入也就是导入使用的是require(),es6中使用import...from...来实现导入
es5的导出使用的是module.exports(),es6中使用export default

上面的导入导出功能为成对出现，不能混用

hasOwnProperty 和 in 的区别

1
// 	in会判断对象原型链上是否存在该属性

按位非运算符 “~”

注：挺有意思哈哈ing…甜点

1
2
3
4
5
6
7
8
9
10
/* 	~ null 写法相当于 -(null + 1)
	优点： 可以使代码简洁、效率高；
	缺点： 不易读
	场景：
			~[1,3,4].indexOf(8)	不存在会返回0（所以可以用来判断元素是否存在）
			!!(-1) === true
			~~(-7.02)  替代  parseInt取整

/*注： 位运算
	对于32位有符号整数，最高位为符号（即左边起第一个数），正数最高位0，负数最高位1，负数按二进制补码存储（0的补码：1，反之亦如此）。NaN和Inifinity在位操作中都被当成0对待

JS阻塞DOM渲染的原因

文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中的JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。

原因：JS执行时可能会修改DOM结构，则JS执行完之前，后续所有资源的下载是没有必要的，这也是JS阻塞后续资源下载的根本原因

解决：script标签放在最下面，或者添加defer属性

CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

CSS不会阻塞DOM解析，但是会阻塞DOM树渲染

DOM Tree和CSS Tree会组合成render tree

Set数据结构

用法：可以用于数组去重，但不会进行类型转换

1
2
3
4
let array = [1, 1, '1', 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
console.log(set); // => Set {1, '1', 2, 3, 4, 5}
console.log([...set]); // => [1, '1', 2, 3, 4, 5]

前端优化

减少页面加载时间

1
2
3
4
5
1、压缩css、js文件
2、合并js、css文件
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作
5. 减少http请求

web性能调试优化（达哥）

1
2
3
4
5
6
7
8
/* 前端优化经验  可以了解下 
   1. performance.timing     查看页面耗时
   2. h5获取电池电量Api       (没记住、前端可以获取用户手机电量针对性的做出一些优化)
   3. 多普乐测速      可以获取DNS解析时间、用户带宽
   4. link标签预解析DNS		<link rel="dns-prefetch">
   5. 域名收敛    将域名都收敛到服务器域名下
   6. 页面加载速度工具：Google pagespeed  (会给出页面要优化的点)
   7. 远程调试工具：web inspector remote

网络知识

常识

// 很多情况下有些知识点虽然知道，但是自己却表示不清，还是掌握的有问题…

  • IP地址的作用：标识当前网络（内网、外网）中，计算机的唯一身份
  • 端口号：端口号和应用程序有关联，每一个应用程序，只能独占一个端口号
  • 静态资源：无需数据交互，服务器直接把资源读取，并响应给客户端的资源（如：.js .css .jpg .html）
  • 动态资源：一些资源在服务器上并没有现成的，需要服务器做一层处理，最后把处理的结果返回给客户端的资源（如：根据用户操作不同，返回不同的数据）