前端开发面经
Posted 西开空间站
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发面经相关的知识，希望对你有一定的参考价值。
1.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5，以及浏览器对页面的渲染顺序
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket,Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何区分： DOCTYPE声明新增的结构元素功能元素
2.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为4个步骤：
（2）， 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，`Web`服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析`HTML`生成`DOM Tree`，其次会根据CSS生成CSS Rule Tree，而`javascript`又可以根据`DOM API`操作`DOM`
3.CSS3新特性
颜色：新增RGBA、HSLA模式
文字阴影(text-shadow)
边框：圆角（border-radius）边框阴影：box-shadow
盒子模型：box-sizing
背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
渐变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
在CSS3中唯一引入的伪元素是::selection
4.Javascript创建对象的方式有哪些？
1，工厂模式 ：①无法确定对象的类型（因为都是Object）。
②创建的多个对象之间没有关联。
2，构造函数模式：
与工厂模式相比：
1、没有显式的创建对象
2、直接将属性和方法赋给了this对象
3、没有return语句
要创建person的实例，必须使用new操作符，以这种方式调用构造函数实际上会经历4个步骤：
1、创建一个新对象
2、将构造函数的作用域赋给新对象
3、执行构造函数中的代码
4、返回新对象
创建自定义的构造函数可以将它的实例标识为一种特定的类型。
构造函数的缺点：
每个方法都有在每个实例上重新创建一遍。person1和person2都有一个sayName()的方法，但两个方法不是同一个Function实例。不同实例上的同名函数是不相等的。
创建两个完成同样任务的Function实例没有必要，而且还有this对象在，不需要在执行代码前就把函数绑定在特定对象上，可以像下面这样。
3，原型模式
function createObj(){} createObj.prototype.name = 'Tom'; createObj.prototype.sex = 'man'; createObj.prototype.sayName = function(){ alert(this.name); } var person = new createObj(); |
缺点：①无法传入参数，不能初始化属性值。
②如果包含引用类型的值时，改变其中一个实例的值，则会在所有实例中体现。
4，混合构造函数和原型模式
这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点
使用此模式可以让每个实例都会有自己的一份实例属性副本，但同时又共享着对方法的引用
这样的话，即使实例属性修改引用类型的值，也不会影响其他实例的属性值了
function Person(name) { this.name = name this.friends = ['Shelby', 'Court'] } Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person() var person2 = new Person() person1.friends.push('Van') console.log(person1.friends) //["Shelby", "Court", "Van"] console.log(person2.friends) // ["Shelby", "Court"] console.log(person1.friends === person2.friends) //false |
5，动态原型模式
function createObj(name, sex){ this.name = name; this.sex = sex; if(typeof this.sayName != 'function'){ createObj.prototype.sayName = function(){ alert(this.name); } } } var person = new createObj('Tom', 'man'); |
说明：if语句中只会调用一次，就是在碰到第一个实例调用方法时会执。此后所有实例都会共享该方法。在动态原型方法下，不能使用对象字面量重写原型。
6，寄生构造函数模式
这种模式的基本思想就是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新建的对象
function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return o } var person1 = new Person('Jiang', 'student') person1.sayName() |
这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样
构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值
7，稳妥构造函数模式
首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。
稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)，或防止数据被其他应用程序改动时使用
稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数
function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(name) } return o } var person1 = Person('Jiang', 'student') person1.sayName() |
和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义
5.深拷贝浅拷贝
深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
所谓 深浅拷贝：
6.es6中的...扩展运算符是浅拷贝还是深拷贝？一个对象，你有几种方法实现它的深拷贝？
//深拷贝方法一
var $ = require('jquery');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);// false
//深拷贝方法二
使用Object.create()方法
//深拷贝方法三
手动复制属性
7.一个顶级对象里面嵌套子对象，子对象里面嵌套孙对象，怎么获取一个对象的深度？
obi1 = {
name: 'xx',
children: {
name: 'x2',
children: {
name: 'x3'
}
}
}
var num = 1;
function getDeepLength(o) {
for (var i in o) {
if (typeof o[i] == 'object') {
console.log(o[i]);
num++;
getDeepLength(o[i])
}
}
return num;
}
console.log(getDeepLength(obi1))//3
8.前端性能优化的一些方法
详见：https://www.cnblogs.com/xiaohuochai/p/9178390.html
9.TCP和UDP的区别
主要是保证传输数据的正确性方面
详见：https://blog.csdn.net/zhang6223284/article/details/81414149
框架方面
重点自己项目用的框架要了解清楚，涉及到的都要说的上来
例如VUE 的话，要了解传值方式和路由原理以及8种生命周期，数据双向绑定原理
项目相关
这里说几个我面试经常问到的项目。
- 仿饿了么购物车(本地购物车和全局购物车和本地存储)；
- Chrome插件开发lettalk；
- rn开发的一个简单的社交app；
- 仿vue mvvm框架(阅读vue源码时候仿的)；
- 仿Jquery类库(阅读jquery源码时候仿的)；
加入西开 ，一起成就更完美的自己吧！
以上是关于前端开发面经的主要内容，如果未能解决你的问题，请参考以下文章