前端面试题 - yulilong/resume GitHub Wiki
https是什么？为什么HTTPS比较安全？中间的加密过程是怎么样的？
TCP三次握手
对称加密与非对称加密有什么区别
session与cookie的区别？ session如何做到保护用户状态
回调地狱你是怎么解决的？
使用promise
https实现原理
https原理通俗了解：
https://www.cnblogs.com/zhangshitong/p/6478721.html
深入理解HTTPS原理、过程与实践：
https://zhuanlan.zhihu.com/p/26682342
HTTPS系列干货（一）：HTTPS 原理详解：
https://zhuanlan.zhihu.com/p/27395037
Https的交互流程
https://blog.csdn.net/github_37855556/article/details/70231535
浏览器输入url后发生了什么
HTTP状态码
前端性能优化
CSS放前面，JS放后面，压缩。
跨域
JSONP相关原理
cookie相关
百度的资源放在了别的域名呀，如baidu.com 资源放在了img.badu.com, 优化cookie
变量提升，闭包，作用域，class相关
变量提升：
var x = 3;
function func(randomize) {
if (randomize) {
var x = Math.random(); // 这个变量提升到了整个函数
return x;
}
return x; // 这个变量提升了，导致调用时没有使用全局的x
}
func(false); // undefined
函数和作用域：
JS高级相关
JS继承
JS类多重继承的实现方法是怎么样的
js里面的this指针是什么
apply，call和bind有什么区别
defineProperty, hasOwnProperty, isEnumerable都是做什么用的
手写JS发布订阅
手写封装一个事件通用类
Array的API， Object的API
Array的filter,some,every,map,foreach都是干嘛的？
Object的 assign是干嘛的？
promise实现原理是什么
手写 Object深复制
CSS
flex
transform
重构、回流
手CSS性能优化
数组字拼接
var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];
arr1.push.apply(arr1, arr2); // arr1 is now ['a', 'b', 'c', 'd']
// ES6 - 扩展操作符：
let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];
arr1.push(...arr2); // arr1 is now ['a', 'b', 'c', 'd']
手写一个类的继承
function Animal (name) {
this.name = name || 'Animal';
this.sleep = function() { console.log(this.name + '已经睡了') }
}
Animal.prototype.eat = function(food) { console.log(this.name + '开始吃' + food) }
// 通过 prototype实现继承
function Dog () {}
Dog.prototype = new Animal();
Dog.prototype.name = 'Dog';
var dog = new Dog();
console.log(dog.name)
console.log(dog.eat('fish'));
console.log(dog.sleep());
console.log(dog instanceof Animal); //true
console.log(dog instanceof Dog); //true
// 通过 call实现
function Cat(name) {
Animal.call(this);
this.name = name || 'pite'
}
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
下面的类用ES6去实现
function Person(name) {
this.name = name;
}
Person.prototype.describe = function () {
return 'Person called '+this.name;
};
// ES6 语法
class Person {
constructor(name) {
this.name = name;
}
describe() {
return 'Person called '+this.name;
}
}
// ES6类的继承
class Employee extends Person {
constructor(name, title) {
super(name); // 调用父类的构造方法
this.title = title;
}
}
写一个函数
-
定义这样一个函数:
function repeat (func, times, wait){}
函数能返回一个新函数，如：var repeatedFun = repeat(alert, 10, 5000)
调用这个 repeatedFun ("hellworld")
会alert十次 helloworld, 每次间隔5秒
function repeat (func, times, wait) { return function() { var handle, i = 0, arg = arguments handle = setInterval(function() { if (i ++ === times) { clearInterval(handle); return; } func.apply(null, arg) }, wait) } } var repeatFun = repeat(console.log, 4, 1000); repeatFun("hellworld");
JS的单例模式
var Singleton = function(name) {
this.name = name; this.instance = null;
};
Singleton.prototype.getName = function() { console.log(this.name, 2); };
// 传统方式
Singleton.getInstance = function(name) {
if (!this.instance) { this.instance = new Singleton(name); }
return this.instance;
};
var a = Singleton.getInstance('seven1');// Singleton {name: "seven1", instance: null}
var b = Singleton.getInstance('seven2');// Singleton {name: "seven1", instance: null}
console.log(a===b); //true
// 利用闭包的特性创建单例,同时符合惰性单例的特性
Singleton.getInstance = function(name) {
var instance;
return function(name){
if (!instance) { instance = new Singleton(name); }
}
}();
var a = Singleton.getInstance('seven1');
var b = Singleton.getInstance('seven2');
console.log(a===b); //true
// 参考链接：https://blog.csdn.net/yisuowushinian/article/details/52003127
js面向对象之公有、私有、静态属性和方法
// 公有属性和方法
function User(name){
this.name = name;//公有属性
}
//公有方法
User.prototype.say = function(){ return 'hello ' + this.name; }
var user = new User('frank');
console.log(user.say()); //frank
console.log(user.name)
// 私有属性和方法
function User(name){
var name = name; // 私有属性
var say = function(){ console.log('hello ' + name) } // 私有方法
say();
}
var user = new User('frank');
console.log(user.say()); // error
console.log(user.name) // error
// 静态属性和方法:无需实例化就可以调用的方法就叫静态方法，
function User(){}
User.age = 20; // 静态属性
User.getName = function() {return 123;}// 静态方法
console.log(User.age)
console.log(User.getName())
// 静态类
var user = {
init:function(name){ this.name = name; },
getName:function(){ return this.name; }
}
user.init('jack');
console.log(user.getName()); // jack
参考链接：http://www.jb51.net/article/64278.htm
轻分享-从12K到20K，前端面试分享会1：看到43：29