前端面试题笔记 - Githubissues

前端面试课程笔记

面试题要学习的范围

基础知识

原型、原型链
作用域、闭包
异步、单线程
js应用
DOM操作
Ajax
事件绑定
开发环境
版本管理
模块化
打包工具
运行环境
页面渲染
性能优化
前端安全性知识

先从几道面试题说起

js中使用typeof能得到的哪些类型?
何时使用===,何时使用==?
window.onload和DOMContentLoaded的区别?
用js创建10个a标签，点击的时候弹出来对应的序号
简述如何实现一个模块加载器，实现类似require.js的作用
实现数组的随机排序

思考：

拿到面试题，你第一时间看到的是什么?
如何看待网上搜出来的看也看不完的题海?
如何对待接下来遇到的面试题?

如何搞定所有的面试题?

拿到面试题，你第一时间看到的是什么? --> 考点
如何看待网上搜出来的看也看不完的题海? --> 不变应万变
如何对待接下来遇到的面试题? --> 题目到知识再到题目

举例：

js中使用typeof能得到的哪些类型? --> 考点：js变量类型
何时使用===,何时使用==? --> 考点：强制类型转换
window.onload和DOMContentLoaded的区别? --> 浏览器的渲染过程
用js创建10个a标签，点击的时候弹出来对应的序号 --> 考点：作用域、闭包、自定义属性
简述如何实现一个模块加载器，实现类似require.js的作用 --> 考点：js模块化
- 实现数组的随机排序 --> js基础算法

js基础知识

变量类型、变量计算

变量类型：值类型vs引用类型

var a = 100;
var b = a;
a = 200;
console.log(b);

var a = {age:200};
var b = a;
b.age = 21;
console.log(a.age);

引用类型：对象、数组、函数

typeof undefined;
typeof 'abc'
typeof 123;
typeof true;
typeof {};
typeof [];
typeof null;
typeof console.log;

变量计算 - 强制类型转换

字符串拼接
==运算符
if语句
逻辑运算

常见面试题

js中使用typeof能得到的哪些类型

var a = 100 + 10;
console.log(a);
var b = 100 + '10';
console.log(b);

100 == '100';//true
0 == '';//true
null == undefined;//true

var a = true;
if(a){

}

var b = 100;
if(b){

}

var c = '';
if(c){

}

console.log(10 && 0);
console.log('' || 'abc');
console.log(!window.abc);

//判断一个变量会被当作true或false

var a = 100; console.log(!!a);


- 何时使用===何时使用==
```javascript
//问题：何时使用===何时使用==
if(obj.a == null){
    //这里相当于obj.a === null ||  obj.a === undefined,简写形式  
    //这是jquery源码中推荐的写法
}

js中有哪些内置函数
js变量按照存储方式区分有哪些类型,并描述其特点
Object
Array
Boolean
Number
String
Function
Date
RegExp

Error


//js变量按照存储方式区分哪些类型，并描述其特点

//值类型 var a = 10; var b = a; a = 11; console.log(b); //10

//引用类型 var obj1 = {x:100}; var obj2 = obj1; obj1.x = 200; console.log(obj2.x);//200

- 如何理解json
```javascript
//JSON只不过是一个js对象而已
JSON.stringify({a:1,b:2});
JSON.parse('{"a":10,"b":2}');

原型和原型链

function Foo(name,age){
    this.name = name;
    this.age = age;
    this.class = 'class-1';
    // return this;默认有这一行
}
var f = new Foo('zhangsan',20);

扩展

var a = {}其实是var a = new Object()的语法糖
var a = []是var a = new Array()的语法糖
function Foo(){}其实是var Foo = new Function(*){}
使用instanceof判断一个函数是一个变量的构造函数

原型规则：原型规则是学习原型链的基础

所有的引用类型(对象、数组、函数)都具有对象特性，即可自由扩展属性(除了null)
所有的引用类型(数组、对象、函数)都有一个proto属性，属性值是一个普通对象
所有的引用类型(数组、对象、函数)，Proto属性值指向它的构造函数的prototype值
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，就会去它的proto,即它的构造函数prototype身上去找

面试题

如何准确判断一个变量是一个数组类型
```
var arr = [];
arr instanceof Array
```
写一个原型链继承的例子
描述new一个对象的过程
zepto(或其他框架)源码中如何使用原型链

性能优化

这本身就是一个综合性问题
没有标准答案，如果非要写得全面，能写一本书
只关注核心点就行了

原则

多使用内存、缓存或者其他方法
减少CPU计算，减少网络I/O请求

从哪里入手

加载页面和静态资源
页面渲染

加载资源优化

静态资源的压缩和合并
静态资源的缓存
使用CDN让资源加载更快
使用SSR后端渲染，数据直接输出到HTML中

渲染优化

CSS放前面，js放后面
懒加载(图片懒加载，下拉加载更多)

减少DOM查询，对DOM查询做缓存


for(var i=0;i<document.getElementsByTagName('p').length;i++){

}

// 不如 var pList = document.getElementsByTagName('p'); for(var i=0;i<pList.length;i++){

}


- 减少DOM操作，多个操作尽量合并在一起执行 --> 使用document.createDocumentFragment创建DOM碎片
- 事件节流
```javascript
var textarea = document.getElementById('text');
var timeId;
textarea.addEventListener('keyup',function(){
    if(timeId){
        clearTimeout(timeId)'
    }
    timeId = settimeout(function(){}{

    },100)
})

尽早执行操作(如DOMContendLoaded)
从输入url到得到html的详细过程
- 浏览器根据DNS服务器得到域名的ip地址
- 向这个ip的机器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容

前端安全性(一般问的可能性不是特别大，一般是在面试快结束的时候问)

XSS跨战请求攻击
- 在新浪博客写一篇文章，同时偷偷插入一个 Githubissues.
- Githubissues is a development platform for aggregating issues.

zhengwei1949 / myblog

前端面试题笔记 #30