前端面试总结（面向校招）
一.Vue相关
1.vue中的MVVM模式（优势？）即Model-View-ViewModel
javascript
Model表明数据模型，也能够在Model中定义数据修改和操做的业务逻辑。php
View表明UI组件，它负责将数据模型转化成UI展示出来。 css
ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步Viewhtml
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。前端
ViewModel经过双向数据绑定把View层和Model层链接了起来，而View和Model之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，不须要手动操做DOM,不须要关注数据状态的同步问题，复杂的数据状态维护彻底由MVVM来统一管理。vue
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面全部VieDOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。html5
优势：1.分离视图（View）和模型（Model）,下降代码耦合2.提升可测试性3.自动更新domjava
2.Vue实现数据双向绑定的原理node
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应监听回调。git
<body>
<div id="app"><input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValuedocument.getElementById('show').innerHTML =
newValue
}
})
document.getElementById('txt').addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
复制代码
3.Vue组件间的参数传递
1.父组件与子组件传值父组件传给子组件：子组件经过props方法接受数据;
2.非父子组件间的数据传递，兄弟组件传值eventBus，就是建立一个事件中心，至关于中转站，能够用它来传递事件和接收事件。项目比较小时，用这个比较合适。
4.vue等单页面应用及其优缺点
5.vue中 key 值的做用？
1 .Vue.set(object, key, value) -适用于添加单个属性
2 Object.assign() -适用于添加多个属性
7.watch 和computed
watch是一个对象，键是须要观察的表达式，值是对应回调函数,当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操做；
computed计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会从新求值。computed中的属性不能与data中的属性同名，不然会报错。
小题总结：
1.什么是vue生命周期？
答：Vue实例从建立到销毁的过程，就是生命周期。从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为Vue的生命周期。
2.vue生命周期的做用是什么？
3.vue生命周期总共有几个阶段？
4.第一次页面加载会触发哪几个钩子？
5.DOM渲染在 哪一个周期中就已经完成？
6. css只在当前组件起做用
2. v-if 和 v-show 区别
3. vue.js的两个核心是什么？
4. vue几种经常使用的指令
5.如何定义过滤器：{{msg| flut }}
6. Vue的路由实现：hash模式 和 history模式
7. vue-cli如何新增自定义指令
8.组件：
1 全局组件 2 局部组件，
1.全局：全局组件在全部的vue实例中均可以使用
Vue.component('my-component', {data(){return ‘data必须是一个函数’}})
2.局部：components: {'my-component': {template:}}
二.ES6部分
1.箭头函数：
2.Symbol()
每一个从Symbol()返回的值都是惟一的（目的：做为对象属性的标识符）直接使用Symbol()建立新的symbol变量，可选用一个字符串用于描述。当参数为对象时，将调用对象的toString()方法。var sym = Symbol({name:'ConardLi'}); // Symbol([object Object])
var o = new Object
o[Symbol.iterator] = function() {
var v = 0
return {
next: function() {
return { value: v++, done: v > 10 }
}
}
};
for(var v of o){
console.log(v)} // 0,1...9
复制代码
3.Promise
4.for...in循环实际是为循环可枚举对象而设计的，for...of循环并不能直接使用在普通的对象上，但若是咱们按对象所拥有的属性进行循环，可以使用内置的Object.keys(obj)方法.
5. generator中断执行代码的特性，控制异步代码的执行顺序：（Generator函数返回的Iterator对象）
三.HTTP协议相关 TCP/UDP OSI模型 进程/线程
http（超文本传输协议）协议的特色：无链接，无状态，简单快速，灵活
无链接：限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接。采用这种方式能够节省传输时间。将资源释放出来服务其余客户端。
无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即咱们给服务器发送 HTTP 请求以后，服务器根据请求，会给咱们发送数据过来，可是，发送完，不会记录任何信息。
组成：请求（请求行，请求头（key:val），空行，请求体） 响应报文（状态行，响应头，空行，响应体）
get post区别：
GET和POST最大的区别主要是GET请求是幂等性（对同一URL的多个请求应该返回一样的结果。）的，POST请求不是.
url长度限制的缘由：浏览器。早期的浏览器会对URL长度作限制，服务器。URL长了，对服务器处理也是一种负担。
常见状态码：
301：表示永久重定向，表示请求的资源分配了新url，之后应使用新url
302：表示临时性重定向，请求的资源临时分配了新url，本次请求暂且使用新url。
302：与301的区别是，302表示临时性重定向，重定向的url还有可能还会改变。
303：表示请求的资源路径发生改变，使用GET方法请求新url。她与302的功能同样，可是明确指出使用GET方法请求新url。
304：客户端发送附带条件的请求时（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个）服务器端容许请求访问资源，但因发生请求未知足条件的状况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过时的缓存）
400 ：表示请求的报文中存在语法错误，好比url含有非法字符
http1.1 / http2.0相关
HTTP 1.1支持长链接和请求的流水线处理，在一个TCP链接上能够传送多个HTTP请求和响应，减小了创建和关闭链接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，必定程度上弥补了HTTP1.0每次请求都要建立链接的缺点。
影响http网络请求的缘由：带宽，延迟（浏览器阻塞，DNS查询，TCP链接）
新的二进制格式，HTTP1.x的解析是基于文本。基于文本协议的格式解析存在自然缺陷，文本的表现形式有多样性，要作到健壮性考虑的场景必然不少，二进制则不一样，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。
多路复用，即链接共享，即每个request都是是用做链接共享机制的。一个request对应一个id，这样一个链接上能够有多个request，每一个链接的request能够随机的混杂在一块儿，接收方能够根据request的 id将request再归属到各自不一样的服务端请求里面。
header压缩，HTTP1.x的header带有大量信息，并且每次都要重复发送，HTTP2.0使用encoder来减小须要传输的header大小，通信双方各自cache一份header fields表，既避免了重复header的传输，又减少了须要传输的大小。
服务端推送 同SPDY同样，HTTP2.0也具备server push功能。
HTTPS和HTTP的区别主要以下：
一、https协议须要到ca申请证书（做用：可实现网站身份验证和数据加密传输双重功能。），通常免费证书较少，于是须要必定费用。
二、http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
三、http和https使用的是彻底不一样的链接方式，用的端口也不同，前者是80，后者是443。
四、http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
TCP三次握手与四次挥手(ACK：确认序号有效，SYN：发起一个新链接,FIN:释放一个链接,序号：Seq序号）
TCP三次握手：1) Client向server发送SYN；2) Server接收到SYN，回复Client一个SYN-ACK；3) Client接收到SYN_ACK，回复Server一个ACK。
四次挥手：第一次挥手：客户端发送一个FIN，用来关闭客户端到服务器的数据传送,此时客户端还可 以接受数据。第二次挥手：服务器收到FIN包后，发送一个ACK给对方而且带上本身的序列号seq,服务端就进入了CLOSE-WAIT（关闭等待）状态。第三次挥手：服务器发送一个FIN，用来关闭服务器到客户端的数据传送,服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认第四次挥手：客户端收到FIN后，发送一个ACK给服务器，客户端就进入了TIME-WAIT（时间等待）状态。通过2∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。服务器只要收到了客户端发出的确认，当即进入CLOSED状态。
TCP(传输控制协议)/UDP(用户数据报协议)的区别
一、TCP面向链接（如打电话要先拨号创建链接）;UDP是无链接的，即发送数据以前不须要创建链接
二、TCP提供可靠的服务。也就是说，经过TCP链接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保 证可靠交付
3.TCP面向字节流，其实是TCP把数据当作一连串无结构的字节流;UDP是面向报文的每一条TCP链接只能是点到点的UDP支持一对一，一对多，多对一和多对多的交互通讯
4.TCP首部开销20字节;UDP的首部开销小，只有8个字节
5.TCP的逻辑通讯信道是全双工的可靠信道，UDP则是不可靠信道
OSI：
应用层:FTP（文件传输协议）DNS（域名解析协议）SMTP（简单邮件传输协议）POP3（简单邮件下载协议）http:超文本传输协议、https：安全超文本传输协议
表示层 数据格式化，代码转换，数据加密 没有协议
会话层 解除或创建与别的接点的联系 没有协议
传输层 提供端对端的接口 TCP，UDP
网络层 为数据包选择路由 IP，ICMP，RIP，OSPF，BGP，IGMP
数据链路层 传输有地址的帧以及错误检测功能 ARP，RARP（地址解析协议，逆向地址xxxx）
物理层 以二进制数据形式在物理媒体上传输数据
TCP/IP五层协议：物理层、数据链路层、网络层、传输层、 应用层。
进行和线程的区别：
进程是资源（CPU、内存等）分配的基本单位，它是程序执行时的一个实例。程序运行时系统就会建立一个进程，并为它分配资源，而后把该进程放入进程就绪队列，进程调度器选中它的时候就会为它分配CPU时间，程序开始真正运行。
线程是程序执行时的最小单位，它是进程的一个执行流，是CPU调度和分派的基本单位，一个进程能够由不少个线程组成，线程间共享进程的全部资源，每一个线程有本身的堆栈和局部变量。线程由CPU独立调度执行，在多CPU环境下就容许多个线程同时运行。一样多线程也能够实现并发操做，每一个请求分配一个线程来处理。
区别：
- 进程是资源分配的最小单位，线程是程序执行的最小单位。
- 进程有本身的独立地址空间，每启动一个进程，系统就会为它分配地址空间，创建数据表来维护代码段、堆栈段和数据段，这种操做很是昂贵。而线程是共享进程中的数据的，使用相同的地址空间，所以CPU切换一个线程的花费远比进程要小不少，同时建立一个线程的开销也比进程要小不少。
- 线程之间的通讯更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通讯须要以通讯的方式（IPC)进行。不过如何处理好同步与互斥是编写多线程程序的难点。
- 可是多进程程序更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉并不会对另一个进程形成影响，由于进程有本身独立的地址空间。
Service Worker 一个介于客户端和服务器之间的一个代理服务器。可以实现的最主要的功能——静态资源缓存
四.原型原型链相关
1.字面量var o = {} var o1 = new Object({})
2.显示的构造函数
3. var p = {} , var o = Object.create(p) ---> o.__proto__ == p
（普通函数.__proto__==Function.prototype,普通函数是Function的一个实例）
instanceof：判断实例的__proto__和构造函数的prototype是否引用的同一个地址
new运算符
（1）建立一个新对象，继承自构造函数的prototype
（2）构造函数执行，this和新对象相关联（this指向这个新实例）
（3）若是构造函数返回一个对象（var o = Object.create(func.prototype)），那么这个对会取代new出来的结果，若是没有返回对象（没有返回，或返回原始类型）那么返回新建立的象
五.面向对象
function Animal1(name){
this.name = name
}
es6: class Anima2l { constructor(){this.name = name }复制代码
var anim = new Animal1() / new Animal2复制代码
（1）借助构造函数实现继承
function Parent1(){
this.name = ‘parent1’
}
function Child1(){
Parent1.call(this);
this.type = ‘child1’
}复制代码
function Parent2() {
this.name = 'parent2';this.list = [1, 2, 3];
}function Child2() {
this.type = 'child2'
}
Child2.prototype = new Parent2();
Child2.prototype.constructor = Child2;
var s1 = new Child2();var s2 = new Child2();
s1.list.push(4);
console.log(s2.list) // [1,2,3,4]s1.__proto__ === s2.__proto__ //true复制代码
function Parent3() {
this.name = 'parent3';
this.list = [1, 2, 3];
}
function Child3() {
Parent3.call(this);
this.type = 'child3'
}
//建立一个空对象，对象的原型指向
Child3.prototype = Object.create(Parent3.prototype)
Child3.prototype.constructor = Child3;复制代码
（4）ES6的继承
class Parent6{
constructor(name){
this.name = name}
say(){console.log(this.name)}}
class Son6 extends Parent6{
constructor(name,age){
super(name);this.age = age;
}}复制代码
六.通讯类
1.什么是同源策略及限制
（2）DOM没法得到。
2.先后端如何通讯
Ajax(同源下)
Web Socket CROS
3.如何建立Ajax
var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.send(); xhr.onreadystatechange(function () { if (xhr.status == 4 && (xhr.state == 200 || xhr.state == 206)) { } else { } }) // Promise封装json
const getJson = function (url) {
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function () {
if (xhr.status == 4 && (xhr.state == 200 || xhr.state == 206)) {
resolve(this.response);
} else {
reject(new Error(this.statusText))
}
}
xhr.send();
});
return promise;
}
getJSON("/posts.json").then(function (json) {
console.log('Contents: ', json);
}, function (error) {
console.error('出错了', error);
});
复制代码
4.跨域的几种方式
JSONP
function jsonp(url, callback) {
var oScript = document.createElement('script');
//判断有没有传第二个参数
if (typeof callback === 'function') {
url = url.split('?')[0];
var fnName = 'JsonpFn' + (new Date()).getTime();
url += '?callback=' + fnName;
window[fnName] = callback;
}
oScript.src = url;
document.body.appendChild(oScript);
document.body.removeChild(oScript)
}
var url = 'http://localhost/JSONP/php/jsonp.php?callback'
jsonp(url, function (data) {
console.log('匿名函数', data)
})
复制代码
HASH(#后面的东西,hash改变，页面不会刷新)
postMessage
WebSoket
CROS(支持跨域的Ajax)
5.什么是cookie？cookie是如何操做的，与session的区别？
---------------------
* 首先由服务器经过响应头把Cookie传输给客户端，客户端会将Cookie保存起来。
* 当客户端再次请求同一服务器时，客户端会在请求头中添加该服务器保存的Cookie，发送给服务器。
* Cookie就是服务器保存在客户端的数据！
* Cookie就是一个键值对！！！
cookie.setMaxAge(60*60);//过时时间为1小时
---------------------
Cookie是把用户的数据写给用户的浏览器。
Session技术把用户的数据写到用户独占的session中。
Session对象由服务器建立，开发人员能够调用request对象的getSession方法获得session对象
6.1. //字符串转对象 JSON.parse(json)
// 对象转字符串 JSON.stringify(json)
七.安全相关
CSRF:跨站请求伪造
XSS:跨域脚本攻击（反射型（非持久型）、存储型（持久型）、基于DOM。）
1.HttpOnly防止劫取Cookie
2.输入检查
3.输出检查
八.渲染机制，js运行机制，页面性能，错误监控
DOCTYPE：声明文档类型DTD <!DOCTYPE html> 4.1的严格模式（不能使用废弃元素）和非严格模式
js运行机制console.log(‘a’);setTimeout(()=>{console.log(‘b’)},0);while(1){}/只输出a异步任务的放入时间和执行时间
1.资源压缩合并，减小http请求(1.精灵图 2.内联图片 & base64 3. 合并脚本和样式表)
nodejs 提供了html-minifier工具(或者使用在线网站进行文件合并)
html压缩 css压缩 js压缩（压缩无用的空格 css语义合并 无效的字符）
2.使用CDN（内容分发网络）经过将静态资源(例如javascript，css，图片）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提高用户的访问速度，还能节省服务器的带宽消耗，下降负载。
3.非核心代码异步加载 动态脚本加载,defer,async(只适用于外部脚本，脚本会被延迟到整个页面都解析完毕后再运行：defer属性，至关于告诉浏览器当即下载，但延迟执行它是按照加载顺序执行脚本的。标记为async的脚本并不保证按照它们的前后顺序执行,只要它加载完了就会马上执行)
4.利用浏览器缓存
5.预解析DNS：预先告知浏览器某些资源可能在未来会被使用到。 经过 DNS 预解析来告诉浏览器将来咱们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就能够尽快地完成 DNS 解析。
---------------------------------------------------------------------------------------------
content 方面
- 减小 HTTP 请求：合并文件、CSS 精灵、inline Image
- 减小 DNS 查询：DNS 查询完成以前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询
- 避免重定向：多余的中间访问
- 使 Ajax 可缓存
- 非必须组件延迟加载
- 将来所需组件预加载
- 减小 DOM 元素数量
- 将资源放到不一样的域下：浏览器同时从一个域下载资源的数目有限，增长域能够提升并行下载量
- 减小 iframe 数量
- 不要 404
Server 方面
- 使用 CDN
- 添加 Expires 或者 Cache-Control 响应头
- 对组件使用 Gzip 压缩
- 配置 ETag
- Flush Buffer Early
- Ajax 使用 GET 进行请求
- 避免空 src 的 img 标签
Cookie 方面
- 减少 cookie 大小
- 引入资源的域名不要包含 cookie
css 方面
- 将样式表放到页面顶部
- 不使用 CSS 表达式
- 使用不使用@import
- 不使用 IE 的 Filter
Javascript 方面
- 将脚本放到页面底部
- 将 javascript 和 css 从外部引入
- 压缩 javascript 和 css
- 删除不须要的脚本
- 减小 DOM 访问
- 合理设计事件监听器
图片方面
- 优化图片：根据实际颜色须要选择色深、压缩
- 优化 css 精灵
- 不要在 HTML 中拉伸图片
- 保证 favicon.ico 小而且可缓存
错误监控
try..catch window.onerrer
object.onerror
document.getElementById("debounce").addEventListener("click",debounce(sayDebounce));
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);}, 1000);};}
function sayDebounce() {console.log("防抖成功！");}
//节流function throttle(func) {
var canRun = true;return function () {
if(canRun == false)return ;
canRun = false;
setTimeout(()=>{func.apply(this,arguments);canRun = true;},1000);}}复制代码
九.垃圾回收：
2.闭包带来的内存泄漏
3.用一个变量暂存节点,接下来使用的时候就不从DOM中去获取.可是在移除DOM节点的时候却忘记了解除暂存的变量对DOM节点的引用,也会形成内存泄漏
4.没有清理定时器。
十.js变量及存储：
存放在堆内存中（存储的值大小不定，可动态调整，空间较大，运行效率低，没法直接操做内部存储，使用引用地址存取，经过代码进行分配空间）
ECMAScript中全部的函数的参数都是按值传递的；
null和undefined的区别：
null表示把一个变量赋值为null,表示为空值，null转换为数字为0
undefined表示没有被赋值的属性，就等于undefined，undefined转换为数字为NaN
typeof null ->Object typeof undefined -> undefiend
0.1+0.2 !== 0.3?
装箱：把基本数据类型转换为对应的包装类型。
十一.DOM相关
事件流
事件流又称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)。
<body>
<!--行内绑定：脚本模型-->
<button onclick="javascrpt:alert('Hello')">Hello1</button>
<!--内联模型-->
<button onclick="showHello()">Hello2</button>
<!--动态绑定-->
<button id="btn3">Hello3</button>
</body>
<script>
/*DOM0：同一个元素，同类事件只能添加一个，若是添加多个，
* 后面添加的会覆盖以前添加的*/
function shoeHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello");
}
/*DOM2:能够给同一个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("hello1");
});
btn3.addEventListener("click",function () {
alert("hello2");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
})
}
</script>复制代码
事件级别
DOM0：element.onclick = function(){}
DOM2：element.addEventListener(‘click’,function(){}),false)//第三个参数：冒泡仍是捕获
DOM3：element.addEventListener(‘click’,function(){}) //默认false为冒泡
事件委托
事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件.
在绑定大量事件的时候每每选择事件委托。
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
...
</ul>
<script type="text/javascript">
//父元素
var dom= document.getElementById('parent');
//父元素绑定事件，代理子元素的点击事件
dom.onclick= function(event) {
var event= event || window.event;
var curTarget= event.target || event.srcElement;
if (curTarget.tagName.toLowerCase() == 'li') {
//事件处理
}
}
</script>复制代码
优势:
- 节省内存占用，减小事件注册
- 新增子对象时无需再次对其绑定事件，适合动态添加元素
局限性:
- focus、blur 之类的事件自己没有事件冒泡机制，因此没法委托
- mousemove、mouseout 这样的事件，虽然有事件冒泡，可是只能不断经过位置去计算定位，对性能消耗高，不适合事件委托
Event对象：
DocumentFragment：文档片断接口，表示一个没有父级文件的最小文档对象
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i++){
let node = document.createElement("p");
node.innerHTML = i;
fragment.appendChild(node);
}
document.body.appendChild(fragment);复制代码
十二.前端须要注意哪些 SEO
- 合理的 title、description、keywords：搜索对着三项的权重逐个减少，title 值强调重点便可，重要关键词出现不要超过 2 次，并且要靠前，不一样页面 title 要有所不一样；description 把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面 description 有所不一样；keywords 列举出重要关键词便可
- 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
- 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
- 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
- 少用 iframe：搜索引擎不会抓取 iframe 中的内容
- 非装饰性图片必须加 alt
- 提升网站速度：网站速度是搜索引擎排序的一个重要指标
css hack 原理及经常使用 hack
原理：利用不一样浏览器对 CSS 的支持和解析结果不同编写针对特定浏览器样式。常见的 hack 有 1）属性 hack。2）选择器 hack。3）IE 条件注释
- IE 条件注释：适用于[IE5, IE9]常见格式以下
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->复制代码
十三.html5相关
------------------------------------------------------------------------------------------------
一、Doctype做用？标准模式与兼容模式有什么区别？
- 声明位于HTML文档的第一行，处于标签以前。用来告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现
- 标准模式：排版和js运做方式都是以该浏览器支持的最高标准运行。
- 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法运行。
- 例子：一、width不一样 在严格模式中，width是内容宽度(content)，可是在兼容模式中，width是(元素的实际宽度),(怪异盒模型是margin以外是width的范围)
- ------------------------------------------------------------------------------------------
<!doctype>声明必须处于 HTML 文档的头部，在<html>标签以前，HTML5 中不区分大小写<!doctype>声明不是一个 HTML 标签，是一个用于告诉浏览器当前 HTMl 版本的指令- 现代浏览器的 html 布局引擎经过检查 doctype 决定使用兼容模式仍是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
- 在 HTML4.01 中
<!doctype>声明指向一个 DTD，因为 HTML4.01 基于 SGML，因此 DTD 指定了标记规则以保证浏览器正确渲染内容 - HTML5 不基于 SGML（标准通用标记语言），因此不用指定 DTD（文档类型定义）
常见 dotype：
- HTML4.01 strict：不容许使用表现性、废弃元素（如 font）以及 frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML4.01 Transitional:容许使用表现性、废弃元素（如 font），不容许使用 frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML4.01 Frameset:容许表现性元素，废气元素以及 frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> - XHTML1.0 Strict:不使用容许表现性、废弃元素以及 frameset。文档必须是结构良好的 XML 文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML1.0 Transitional:容许使用表现性、废弃元素，不容许 frameset，文档必须是结构良好的 XMl 文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.0 Frameset:容许使用表现性、废弃元素以及 frameset，文档必须是结构良好的 XML 文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> - HTML 5:
<!doctype html>
- HTML4.01 strict：不容许使用表现性、废弃元素（如 font）以及 frameset。声明：
二、html5为何只须要写
HTML5不基于SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为
因此，html5只有一种：<!DOCTYPE> 可是html4.01有三种，分别是strict（不包含展现性和弃用元素，不容许框架集）、transitional（包含展现性和弃用元素，不容许框架集）、frameset（容许框架集）
3.html5有哪些新特性、移除了那些元素
绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage，长期存储，浏览器关闭以后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，好比 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；复制代码
4.iframe有那些缺点？
- iframe会阻塞主页面的Onload事件；
- 搜索引擎的检索程序没法解读这种页面，不利于SEO;
- iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。
- 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript
- 动态给iframe添加src属性值，这样能够绕开以上两个问题。
6.display: none;与visibility: hidden;的区别
联系：它们都能让元素不可见
区别：
- display:none;会让元素彻底从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。
- display: none;是非继承属性，子孙节点消失因为元素从渲染树消失形成，经过修改子孙节点属性没法显示；visibility: hidden;是继承属性，子孙节点因为继承了 hidden 而消失，经过设置 visibility: visible，可让子孙节点显示。
- 修改常规流中元素的 display 一般会形成文档重排。修改 visibility 属性只会形成本元素的重绘。
- 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容
7.什么是 FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。解决方法：把样式表放到文档的head
8.如何建立块级格式化上下文(block formatting context),BFC 有什么用
建立规则：
- 根元素
- 浮动元素（
float不是none） - 绝对定位元素（
position取值为absolute或fixed） display取值为inline-block,table-cell,table-caption,flex,inline-flex,grid之一的元素overflow不是visible的元素
做用：
- BFC这个元素的垂直方向会发生重叠
- BFC区域不会与浮动元素的box重叠
- BFC在页面里是一个独立的容器，外面的元素不会影响里面的元素
- 计算BFC高度时，浮动元素也会参与计算
9.外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个 margin，叫作外边距折叠。规则以下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
- 浮动元素/inline-block 元素/绝对定位元素的 margin 不会和垂直方向上的其余元素的 margin 折叠
- 建立了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠
- 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
10.meta标签
meta经常使用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面）搜索引擎和其它网络服务。<meta name=" " content=" ">
1. keywords 用于告诉搜索引擎，你网页的关键字
<meta name="keywords" content="这是要搜索的关键字">
复制代码
2.description用于告诉搜索引擎，你网站的主要内容
<meta name="description" content="网站的主要内容"> 复制代码
3.author -- >做者
4.Set-Cookie(cookie设定)
说明：若是网页过时。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例复制代码
5.viewport移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1.0">复制代码
十四.src和href的区别？
src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，知道将该资源加载、编译、执行完毕，因此通常js脚本会放在底部而不是头部。
href是指向网络资源所在位置（的超连接），用来创建和当前元素或文档之间的链接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会中止对当前文档的处理
十五.输入URL到页面解析的过程：
dns解析，TCP连接，发送http请求，服务器响应请求并返回http报文，浏览器渲染界面，连接结束。
-处理HTML标记并构建DOM树。
-处理CSS标记并构建CSSOM树。
-将DOM与CSSOM合并成一个渲染树。(render tree)
-根据渲染树来布局，以计算每一个节点的几何信息。（生成布局）
-将各个节点绘制到屏幕上。
尽可能使用class进行样式修改，而不是直接操做样式
减小DOM的操做，可以使用字符串一次性插入
十六. cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。
- cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
- cookie数据大小不能超过4k。
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
- sessionStorage 数据在当前浏览器窗口关闭后自动删除。
- cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭
十七.移动端适配问题
1.PPI | DPI，屏幕每英寸的像素数量，即像素密度。
公式： DPI= 对角线分辨率 / 屏幕尺寸(勾股定理求对角线分辨率)
2.设备像素比dpr DPR = 设备像素 / CSS像素
设备像素（物理像素）和CSS像素的比值(设备独立像素)。
DPR也有对应的javascript属性window.devicePixelRatio
3.meta标签 <meta name="viewport" content="name1=value1,name2=value2">
| Name | Value | Description |
|---|---|---|
| width | 正整数或device-width | 设置布局视口的宽度，单位为像素 |
| height | 正整数或device-height | 定义布局视口的高度，单位为像素（未实行） |
| initial-scale | [0.0-10.0] | 定义初始页面（布局视口）缩放值 |
| minimum-scale | [0.0-10.0] | 定义用户缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义用户放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否容许用户手动缩放页面，默认值yes |
问题：
1.图片模糊问题
缘由：位图由一个个像素点构成，在dpr > 1的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值。
解决：尽量让一个屏幕像素来渲染一个图片像素，因此，针对不一样DPR的屏幕，咱们须要展现不一样分辨率的图片。（1） media查询（只适用于背景图）
（2）image-set : background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
(只适用于背景图)复制代码
（3）img标签的srcset属性：<img src="conardLi_1x.png" srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
（4）SVG的全称是可缩放矢量图，文本文件，放大不会失真
2.横屏检测
//js方法
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋转180度
console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
console.log('横屏');
}
});
//css方法
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋转180度
console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
console.log('横屏');
}
});
复制代码
3.vw,vh
vw(Viewport's width)：1vw等于视觉视口的1%vh(Viewport's height):1vh为视觉视口高度的1%vmin:vw和vh中的较小值vmax: 选取vw和vh中的较大值
缺点：
px转换成vw不必定能彻底整除，所以有必定的像素差。- 好比当容器使用
vw，margin采用px时，很容易形成总体宽度超过100vw，从而影响布局效果。固然咱们也是能够避免的，例如使用padding代替margin，结合calc()函数使用
4. 1px问题
（1）border-image (2)background-image (3)伪类 + transform（4）svg(5)viewport
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}复制代码
十八.if中的函数提高
(function(){
console.log(a);
if(false){
console.log(a());
function a(){
console.log('true');
}
}
a();
})();
复制代码
chrome运行结果：
undefined
Uncaught TypeError: a is not a function
函数提高发生在全部代码执行以前，因此，尽管a 的定义过程写在了 if 分支中，可是理论上或者说ES6以前， 它是不会影响函数声明提高的，而如今，在做用域顶部 console.log(a) 输出 undefined , 而执行 a() 发生TypeError。 咱们稍做以下修改：
(function(){
console.log(a);
if(true){
console.log(a());
function a(){
console.log('true');
}
}
a();
})();
复制代码
chrome运行结果：
undefined
true
true
再作一次修改：
(function(){
'use strict';
if(true){
console.log(a());
function a(){
console.log('true');
}
}
console.log(a);
})();
复制代码
chrome运行结果：
true
Uncaught ReferenceError: a is not defined
现代浏览器的JS引擎已经支持块做用域了， 只是在非严格模式下，只有函数名变量声明会提高到当前闭包的顶部，这也是无论if 分支是否成立，在它以前 console.log(a) 都会输出 undefined 的缘由。 而函数定义提高只提高到了if 的块做用域内，这就是在if 为真时，在if块内且在函数声明以前 console.log(a()) 会输出 true 的缘由。 可是在严格模式下， 函数名变量的提高也只提高到了if 块的顶部。这就是在严格模式下，在if 块外部对a 进行RHS引用是报 TypeError 的缘由。
十九.ES6新增的语法
1. let const
2.模板字符串
3.箭头函数
4.symbol
5.set,map
6.promise
7.async await
8.class
9.扩展运算符
10.结构解析
11.函数默认值
12.for of
二十.git的常见命令
1.分布式开发，多我的员协调工做 2.有效的监听谁作的修改 3.本地 <->远程
------------------------------------------------------------------------------------------------
HR面
１.职业竞争力
２.职业规划
（１）但愿本身作什么，但愿公司给你一个什么样的平台
（２）你喜欢什么样的公司
（３）你但愿在短时间内达到什么水平
- 1. 2018web前端校招面试总结
- 2. 2019校招 前端面试题总结
- 3. 前端面试题(校招)
- 4. 校招-顺丰前端面经总结
- 5. 面向校招 HTTP与前端缓存知识点总结
- 6. 面向校招：HTTP与前端缓存知识点总结
- 7. 校招前端笔试面试回顾
- 8. 2019 秋招前端面试总结
- 9. 前端秋招面试总结
- 10. 前端校招准备--HTTP相关面试题总结
- 更多相关文章...
- • PHP 面向对象 - PHP教程
- • Lua 面向对象 - Lua 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 算法总结-双指针
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 2018web前端校招面试总结
- 2. 2019校招 前端面试题总结
- 3. 前端面试题(校招)
- 4. 校招-顺丰前端面经总结
- 5. 面向校招 HTTP与前端缓存知识点总结
- 6. 面向校招：HTTP与前端缓存知识点总结
- 7. 校招前端笔试面试回顾
- 8. 2019 秋招前端面试总结
- 9. 前端秋招面试总结
- 10. 前端校招准备--HTTP相关面试题总结