网易前端面试题
前端面试题总结 - 去土耳其啊的文章 - 知乎 https://zhuanlan.zhihu.com/p/83252221
一、浏览器本地存储？javascript
二、web storage和cookie的区别php
3.请描述一下 cookies、 sessionStorage和localstorage区别？css
四、常见的HTTP状态码？（后面ajax请求会写到）html
五、bootstrap响应式实现的原理?前端
百分比布局+媒体查询vue
六、Vue请求数据的方式:html5
Vue-resource,Axios,fetch三种方式.java
Vue-resource方式:vue自身不带处理http请求,若是要使用http请求,必须先要引入vue-resource.js库,它能够经过XMLHttpRequest发起请求并处理响应.相似于jQuerynode
get类型语法:
this.$http.get('url',{params:{key1:val1,key2:val2...}}).then((ok)=>{
console.log(ok);
},(err)=>{
console.log(err);
})
post类型语法:
this.$http.post('url',{key1:val1,key2:val2…},{emulateJSON:true}).
then((ok)=>{
console.log(ok)
},(err){
console.log(err)
})复制代码
Axios的方式:react
Axios是第三方插件,不只能在vue中使用,还能在其余第三方库中使用,例如react
get类型:
axios.get("http://localhost:3000/get?uname=abc").then((ok) => {
console.log(ok);
}).catch((err) => {
console.log(err);
})//传值方式为在url后拼接 ? 加 key=val
post类型:
var param = new URLSearchParams(); //改变发送数据的方式
// 设置发送数据的内容
param.append("uname", "szcszc");
axios.post("http://localhost:3000/post", param).then((ok) => {
console.log(ok);
}).catch((err) => {
console.log(err);
})
在post传值时,若是直接将值像get那样传递的话后端是没法收到的,由于ajax收到值的类型是form data格式,
而Axios在发送数据的时候使用的方式是request payload格式
因此后台没法正常接收,解决方法是使用URLSearchParams对象修改操做 URL传递参数的方法
综合写法:
// axios的综合写法
// 既能够是get也能够是post
axios({
url: "http://localhost:3000/get?uname=sss", //get发送数据方式1
// param:{uname:"zzz"} get发送数据方式2
methods: "get"
}).then((ok) => {
console.log(ok);
})
//post的写法
var param = new URLSearchParams();
param.append("uname", this.text);
axios({
url: "http://localhost:3000/post",
method: "post",
// post发送数据的时候使用data属性
data: param
}).then((ok) => {
console.log(ok);
}) 复制代码
七、如何优化页面，加快页面的加载速度（面五次有一次问到的几率）
（1）优化图片格式和大小；
（2）开启网络压缩；
（3）使用浏览器缓存；
（4）减小重定向请求；
（5）使用CDN存储静态资源；
（6）减小DNS查询次数；
（7）压缩css和js内容；
八、评测你写的前端代码性能和效率？（问到一次）
A: Chtome DevTools 的Timeline:排查应用性能的最佳工具。
B: Chtome DevTools 的Audits:对页面性能进行检测，根据测试结果进行优化。
C:第三方工具：Yslow。
九、iframe的优缺点？（问到一次）
1.<iframe>优势： *解决加载缓慢的第三方内容如图标和广告等的加载问题
*Security sandbox
*并行加载脚本
2.<iframe>的缺点： *iframe会阻塞主页面的Onload事件；
*即时内容为空，加载也须要时间
*没有语意
十、Http与Https的区别
- HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
- HTTP 是不安全的，而 HTTPS 是安全的
- HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
- 在OSI 网络模型中，HTTP工做于应用层，而HTTPS 的安全传输机制工做在传输层
- HTTP 没法加密，而HTTPS 对传输的数据进行加密
- HTTP无需证书，而HTTPS 须要CA机构wosign的颁发的
十一、vuex的属性
- state：声明定义数据
- getters：存放有依赖关系的数据，相似于computed计算属性
- mutation：同步的修改state中的数据
- actions：异步修改数据
- modules：让每个模块都有本身的state，getters，mutation，actions
十二、vue双向绑定的原理
Vue实现双向绑定的原理就是利用了Object.defineProperty()这个方法从新定义了对象获取属性值（get）和设置属性值（set）的操做来实现的。
1三、h5新标签
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main www.w3school.com.cn/tags/tag_ma…
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其余控件的预约义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
section
nav <nav> 标签订义导航连接的部分。
aside ：<aside> 的内容可用做文章的侧栏。
article 标签规定独立的自包含内容。
footer
1四、vue全家桶：
- Vue-cli项目构建工具
- vue-router 路由
- vuex状态管理
- axios http 请求工具
- webpack
1五、MVVM思想:Vue.js是一套构建用户界面的MVVM框架
MVVM分为三部分:分别是M(model,模型层),V(View,视图层),VM(ViewModel,V与M链接的桥梁,也能够看作为控制器MVC的C层)
- M:模型层,主要负责业务数据相关
- V:视图层,负责视图相关,主要是HTML+CSS
- VM:V与M沟通的桥梁,负责监听M或V的修改,是实现MVVM双向绑定的要点;所以开发者只须要关注业务逻辑,不须要手动操做DOM,不须要关注数据状态的同步问题,复杂的数据状态维护彻底由MVVM来统一管理.
MVP思想:MVP的全称为Model-View-Presenter,Model提供数据,View负责显示,Presenter负责逻辑的处理
MVP与MVC的最大的区别:在MVP中View并不直接使用Model,它们之间的通讯数据是经过Presenter来进行的,而在MVc中View会直接从Model中读取数据而不是经过Controller
Vue数据驱动:经过控制数据的变化来显示Vue的数据驱动，是视图的内容随着数据的改变而改变
1六、合并数组的方法
- concat
var a = [1,2,3]
var b = [4,5,6]
var c = a.concat(b) //c = [1,2,3,4,5,6]复制代码
- apply
var a = [1,2,3]
var b = [4,5,6]
var c = a.push.apply(a,b)复制代码
- 数组合并去重
let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr = arr1.concat(arr2) //合并数组
let arrNew = new Set(arr) //经过set集合去重
Array.from(arrNew) //将set集合转化为数组//call的实现思路
Function.prototype.myCall = function (context){
if (typeof this !== 'function') {
throw new TypeError('Error')
}
var context = context || window
//给context添加一个属性
context.fn = this
//经过参数伪数组将context后面的参数取出来
var args = [...arguments].slice(1)
var result = context.fn(...args)
//删除 fn
delete context.fn
return result
}复制代码
1七、垂直居中的方式
- absolute+transform：绝对定位+转换
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
rigth: 50%;
transfrom: translate(-50%，-50%)
}复制代码
- flex + justify-content + align-items
.parent {
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}复制代码
1八、call,apply,bind的区别
- call和apply都是为了解决改变this的指向。做用都相同，只是传参的方式不一样。除了第一个参数外，call能够接受一个参数的列表，apply只接受一个参数的数组
call的实现思路
Function.prototype.myCall = function (context){
if (typeof this !== 'function') {
throw new TypeError('Error')
}
var context = context || window
//给context添加一个属性
context.fn = this
//经过参数伪数组将context后面的参数取出来
var args = [...arguments].slice(1)
var result = context.fn(...args)
//删除 fn
delete context.fn return result
}复制代码
apply的实现思路
//apply的实现思路
Function.prototype.myApply = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
var context = context || window
//为context添加一个属性
context.fn = this
var result
//判断是否存在第二个参数
//若是存在就将第二个参数也展开
if(arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}复制代码
bind的实现思路：bind返回了一个函数，对于函数来讲有两种调用方式，一种是直接的调用，一种是经过new的方式
Function.prototype.myBind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
const _this = this
const args = [...arguments].slice(1)
//返回一个函数
return function F () {
if (this instanceof F) {
return new _this(...args, ...arguments)
}
return _this.apply(context,args.concat(...arguments))
}
}复制代码
1九、使用axios？
vue是虚拟DOM操做的，JQuery.ajax和都须要操做DOM，axios自己就能够解决回调地狱的问题
20、new操做的过程
1. 新生成了一个对象
2. 连接到原型
3. 绑定this
4. 返回新对象 其实咱们彻底能够本身实现一个new的过程
function createNew() {
let obj = {}
let Sunday = [].shift.call(arguments)
obj.__proto__ = Sunday.prototype
let result = Sunday.apply(obj,arguments)
return result instanceof Object ? result : obj
}复制代码
2一、vuex原理
vuex的原理其实很是简单，它为何能实现全部的组件共享同一份数据？
由于vuex生成了一个store实例，而且把这个实例挂在了全部的组件上，全部的组件引用的都是同一个store实例。
store实例上有数据，有方法，方法改变的都是store实例上的数据。因为其余组件引用的是一样的实例，因此一个组件改变了store上的数据，
致使另外一个组件上的数据也会改变，就像是一个对象的引用。
2二、vue怎么实现页面的权限控制
利用 vue-router 的 beforeEach 事件，能够在跳转页面前判断用户的权限（利用 cookie 或 token），是否可以进入此页面，若是不能则提示错误或重定向到其余页面，在后台管理系统中这种场景常常能遇到。
2三、真实DOM和虚拟DOM的区别
虚拟DOM不会进行排版与重绘操做
真实DOM频繁排版与重绘的效率是至关低
虚拟DOM进行频繁修改，而后一次性比较并修改真实DOM中须要改的部分，最后并在真实DOM中进行排版与重绘，减小过多DOM节点排版与重绘损耗
虚拟DOM有效下降的重绘与排版，由于最终与真实DOM比较差别，能够只渲染局部
2四、跨域（几率90%，此问题想到一位奇葩的面试官，记忆犹新！）
- JSONP
// jsonp的原理很简单，就是利用 <script> 标签没有跨域的限制的漏洞。当须要通信时，经过 <script> 标签指向一个须要访问的地址，并提供一个回调函数来接收数据。
// JSONP使用简单而且兼容性不错，可是只限于get请求
核心思想：网页经过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。
①原生实现：
<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type="text/javascript">
function dosomething(res){
// 处理得到的数据
console.log(res.data)
}
</script>复制代码
② jQuery ajax：
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback", // 自定义回调函数名
data: {}
});复制代码
③ Vue.js
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})复制代码
二、CORS
CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
一、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
二、带cookie跨域请求：先后端都须要进行设置
【前端设置】根据xhr.withCredentials字段判断是否带有cookie
①原生ajax
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
复制代码
② jQuery ajax
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
data: {},
xhrFields: {
withCredentials: true // 前端设置是否带cookie
},
crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
});
复制代码
③vue-resource
Vue.http.options.credentials = true复制代码
④ axios
axios.defaults.withCredentials = true复制代码
三、设置document.domain解决没法读取非同源网页的 Cookie问题
浏览器是经过document.domain属性来检查两个页面是否同源，所以只要经过设置相同的document.domain，两个页面就能够共享Cookie（此方案仅限主域相同，子域不一样的跨域应用场景。）
// 两个页面都设置
document.domain = 'test.com';复制代码
四、跨文档通讯 API：window.postMessage()
调用postMessage方法实现父窗口test1.com向子窗口test2.com发消息（子窗口一样能够经过该方法发送消息给父窗口）
它可用于解决如下方面的问题：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
// 父窗口向子窗口发消息(第一个参数表明发送的内容，第二个参数表明接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');复制代码
调用message事件，监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 发送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 发送的消息
},false);复制代码
2五、请简述JavaScript中的this。
函数的调用方式决定了this的值。
this取值符合如下规则：
一、在调用函数时使用new关键字，函数内的this是一个全新的对象。
二、若是apply、call或bind方法用于调用、建立一个函数，函数内的 this 就是做为参数传入这些方法的对象。
三、当函数做为对象里的方法被调用时，函数内的this是调用该函数的对象。好比当obj.method()被调用时，函数内的 this 将绑定到obj对象。
四、若是调用函数不符合上述规则，那么this的值指向全局对象（global object）。浏览器环境下this的值指向window对象，可是在严格模式下('use strict')，this的值为undefined。
五、若是符合上述多个规则，则较高的规则（1 号最高，4 号最低）将决定this的值。
六、若是该函数是 ES2015 中的箭头函数，将忽略上面的全部规则，this被设置为它被建立时的上下文。
2六、JS哪些操做会形成内存泄露
1）意外的全局变量引发的内存泄露
function leak(){
leak="xxx";//leak成为一个全局变量，不会被回收
}复制代码
2）闭包引发的内存泄露
3）没有清理的DOM元素引用
4）被遗忘的定时器或者回调
5）子元素存在引发的内存泄露
2七、如何肯定this指向
若是要判断一个运行中函数的 this 绑定，就须要找到这个函数的直接调用位置。找到以后就能够顺序应用下面这四条规则来判断 this 的绑定对象。
一、由 new 调用？绑定到新建立的对象。
二、由 call 或者 apply （或者 bind ）调用？绑定到指定的对象。
三、由上下文对象调用？绑定到那个上下文对象。
四、默认：在严格模式下绑定到 undefined ，不然绑定到全局对象。
必定要注意，有些调用可能在无心中使用默认绑定规则。若是想“更安全”地忽略 this 绑定，你可使用一个 DMZ 对象，好比 ø = Object.create(null) ，以保护全局对象。
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法做用域来决定this ，具体来讲，箭头函数会继承外层函数调用的 this 绑定（不管 this 绑定到什么）。这其实和 ES6 以前代码中的 self = this 机制同样
2八、箭头函数和普通函数有什么区别
- 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，用call applybind也不能改变this指向
- 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
- 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替。
- 不可使用yield命令，所以箭头函数不能用做 Generator 函数。
- 箭头函数没有原型对象prototype
2九、闭包
闭包是指有权访问另一个函数做用域中的变量的函数.能够理解为(可以读取其余函数内部变量的函数)
闭包的做用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,可是闭包可让做用域里的变量,在函数执行完以后依旧保持没有被垃圾回收处理掉
.闭包的缺陷
闭包会致使内存占用太高,由于变量都没有释放内存
闭包的用途:
1.读取函数内部的变量
2.让变量始终保持在内存中，延长变量的生命周期
闭包造成缘由？
30、如何实现原型继承？
先更改子类的原型prototype指向一个New父类()对象。
子类.prototype = new 父类()
再给子类的原型设置一个constructor指向子类
子类.prototype.constructor = 子类
// 人类 → 父类
function Person() {
this.name = '名字';
this.age = 10;
this.gender = '男';
}
Person.prototype.sayHi = function () { console.log('你好'); };
Person.prototype.eat = function () { console.log('我会吃。。。'); };
Person.prototype.play = function () { console.log('我会玩'); };
// 学生类 → 子类
function Student() {
this.stuId = 1000;
}
// 子类的原型prototyp指向父类的一个实例对象
Student.prototype = new Person();
// 添加一个constructor成员
Student.prototype.constructor = Student;
// 如何实现原型继承：
// 给子类的原型prototype从新赋值为父类的一个实例对象。
// 利用了原型链上属性或方法的查找规则。
// 建立一个学生对象
var stu1 = new Student();
console.log(stu1.constructor)复制代码
class继承
- 在es6中可使用class去实现继承，而且实现起来很简单
class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true复制代码
- class 实现继承的核心在于使用 extends 代表继承自哪一个父类，而且在子类构造函数中必须调用 super，由于这段代码能够当作 Parent.call(this, value)。
31.讲讲输入完网址按下回车，到看到网页这个过程当中发生了什么
a. 域名解析
b. 发起TCP的3次握手
c. 创建TCP链接后发起http请求
d. 服务器端响应http请求，浏览器获得html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
32.谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon作成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减小DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
33.es6新语法
声明与表达式： let与const
let命令： 代码块内有效；
不能重复声明；
迭代计数使用；
无变量提高；
const命令：暂时性死区；
声明一个只读的常量，一旦声明，常量的值就不能改变；
*let是更完美的var，不是全局变量，具备块级函数做用域,大多数状况不会发生变量提高。
const定义常量值，不可以从新赋值，若是值是一个对象，能够改变对象里边的属性值。
var 和 let的区别: var 是在全局范围内有效、let代码块内有效
var 能够声明屡次、 let只能声明一次；
let 不存在变量提高，var 会变量提高；
示例：
console.log(a); //ReferenceError: a is not defined
let a = "apple";
console.log(b); //undefined
var b = "banana";复制代码
变量 b 用 var 声明存在变量提高，因此当脚本开始运行的时候，b 已经存在了，可是尚未赋值，因此会输出 undefined。
变量 a 用 let 声明不存在变量提高，在声明变量 a 以前，a 不存在，因此会报错。
const 命令
暂时性死区:
var PI = "a";
if(true){
console.log(PI); // ReferenceError: PI is not defined
const PI = "3.1415926";
}复制代码
ES6 明确规定，代码块内若是存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就造成一个封闭做用域。代码块内，在声明变量 PI 以前使用它会报错。
3四、Promise 对象
是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。
状态的特色
Promise 异步操做有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操做的结果，任何其余操做都没法改变这个状态。
Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。
状态的缺点
没法取消 Promise ，一旦新建它就会当即执行，没法中途取消。
如不设置回调函数，Promise 内部会抛出的错误，不会反应到外部。
当处于 pending 状态时，没法得知目前进展到哪个阶段（刚刚开始仍是即将完成）。
then 方法
then 方法接收两个函数做为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
then 方法的特色
在 JavaScript 事件队列的当前运行完成以前，回调函数永远不会被调用。
35.请你谈谈Cookie的弊端
a. 每一个特定的域名下最多生成的cookie个数有限制
b. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
c. cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节
d. 安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。
36.对BFC规范的理解
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
利用BFC能够闭合浮动，防止与浮动元素重叠。
37.项目中遇到过的难题？
38.你常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？
39.列举IE与其余浏览器不同的特性？
a. IE的排版引擎是Trident
b. Trident内核曾经几乎与W3C标准脱节
c. Trident内核的大量 Bug等安全性问题没有获得及时解决
d. JS方面，有不少独立的方法，例如绑定事件的attachEvent、建立事件的createEventObject等
e. CSS方面，也有本身独有的处理方式，例如设置透明，低版本IE中使用滤镜的方式
40.什么叫优雅降级和渐进加强？
渐进加强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
41.WEB应用从服务器主动推送Data到客户端有那些方式？
a. html5 websoket
b. WebSocket 经过 Flash
c. XHR长时间链接
d. XHR Multipart Streaming
e. 不可见的Iframe（一个没有前端的公司，java面我，问我iframe的缺点！！不会，而后他说这是后端写的……）
f. 标签的长时间链接(可跨域)
42.请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
4三、.ajax的步骤
什么是ajax?
ajax(异步javascript xml) 可以刷新局部网页数据而不是从新加载整个网页。
如何使用ajax?
第一步，建立xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，好比IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}复制代码
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性得到服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，咱们想要服务器响应执行一些功能就须要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
44.一次js请求通常状况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
45.一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，若是为幻灯片、相册等，将当前展现图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，若是图片为css图片的话。
d. 若是图片过大，可使用特殊编码的图片
4六、.谈谈之前端角度出发作好SEO须要考虑什么？
a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 连接交换和连接普遍度（Link Popularity）
f. 合理的标签使用
4七、get、 post的区别
get获取数据；post提交数据
get 用于获取信息，是无反作用的，是幂等的，且可缓存
post 用于修改服务器上的数据，有反作用，非幂等，不可缓存
get 传参方式是经过地址栏URL传递，能直接看到get传递的参数，post传参方式参数URL不可见，
get 把请求的数据在URL后经过？链接，经过&进行参数分割。
post 将从参数存放在HTTP的包体内
get 对传递的数据长度受URL的限制，URL最大长度是2048个字符。
post 没有长度限制
get后退不会有影响，post后退会从新进行提交
get请求能够被缓存，post不能够被缓存
get请求只支持URL编码，post支持多种编码方式
get请求的记录会留在历史记录中，post请求不会留在历史记录
get只支持ASCII字符，post没有字符类型限制
4八、var a;
console.log(a) 求结果？缘由？
输出：undefind, a只声明，没有赋值
4九、transform和transition的区别？
50、mounted中经常使用的方法？
5一、钩子函数（问了无数次）
5二、1.清除浮动的方法？(屡次出如今面试题)
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div没法自动获取到高度的问题。
2，结尾处加空div标签 clear:both
原理：添加一个空div，利用css提升的clear:both清除浮动，让父级div能自动获取到高度
3，父级div定义 伪类:after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题
4，父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
5三、position有哪些属性？
5四、隐藏一个div有几种方法？
5五、登录注册怎么作？
5六、计算属性和监听器有什么区别？computed、watch
当须要在数据变化时执行异步或开销较大的操做时，用侦听。
模板中显示内容，不作任何复杂的计算（或者逻辑），这个时候就能够用到计算属性
5七、v-for渲染列表是key是用来作什么的？
为了高效的更新虚拟DOM
5八、数据请求在生命周期哪个阶段？
通常在 created（或beforeRouter）里面就能够，若是须要页面加载完成以后的话就用
mounted。
在created的时候，视图中的html并无渲染出来，因此此时若是直接去操做html的dom节点，必定找不到相关的元素
而在mounted中，因为此时html已经渲染出来了，因此能够直接操做dom节点
5九、给DOM元素绑定事件有哪些方法？
a、在DOM元素中直接绑定；
b、在JavaScript代码中绑定；
c、绑定事件监听函数。
60、数组里面有哪些遍历方法？es6
for(){} 遍历
forEach 遍历
for-in 遍历
for-of 遍历
every()、some()、filter()、map()、reduce（）、reduceRight()
6一、用js能够实现的动画 为何要用css？
css渲染的动画不占用js主线程
6二、ajax请求数据从新处理和拦截器？
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception {
//获取断定登录的session是否存在
String token = (String) request.getSession().getAttribute("token");
String postId = (String) request.getSession().getAttribute("postId");
if(token == null || token == ""){
String XRequested =request.getHeader("X-Requested-With");
if("XMLHttpRequest".equals(XRequested)){
response.getWriter().write("IsAjax");
}else{
response.sendRedirect("/m-web/user/toLogin");
}
return false;
}
if(postId == null || postId == ""){
String XRequested =request.getHeader("X-Requested-With");
if("XMLHttpRequest".equals(XRequested)){
response.getWriter().write("IsAjax");
}else{
response.sendRedirect("/m-web/user/toLogin");
}
return false;
}
return true;
}复制代码
一、判断 String XRequested =request.getHeader("X-Requested-With") 的值，目的是判断是不是ajax请求。
二、response.getWriter().write("IsAjax");写出一个响应的数据给ajax，这样就能够在ajax里面作判断
判断的方式存在两种方式：
1）直接在ajax里面作判断（不建议）
success:function(data){
if(data == "IsAjax"){
window.location.href="m-web/user/toLogin"
return;
}
}复制代码
2）改jQuery源码而后在作压缩，是针对全局的方式来修改的（建议）
if ( isSuccess ) {// if no content
if ( status === 204 || s.type === "HEAD" ) {
statusText = "nocontent";
// if not modified
} else if ( status === 304 ) {
statusText = "notmodified";
// If we have data, let's convert it } else { statusText = response.state; success = response.data; error = response.error; isSuccess = !error; //解决ajax拦截问题 var result = responses.text; if(result.indexOf("IsAjax")>=0){ window.location.href="m-web/user/toLogin"; return; } } }复制代码
6三、bootstrap中栏栅的24个是怎么作的？24个col不加数字就能够
6四、轮播图是怎么考虑的 什么逻辑？
6五、git的经常使用操做？
命令操做、远程Git和local的同步实现流程：
一、把git上的代码clone到本地
$ git clone http:xxxx(地址，能够http也能够ssh)
二、clone到本地之后、使用branch -a 查看远程全部分支
$ git branch -a
三、如若你有分支：master branch1 branch2 ，使用checkout用来切换分支。还能够用第2条指令去建立本地分支目录和远程的保持一致，而且切换远程分支到本地分支目录
$ git checkout branch1
$ git checkout -b branch1 origin/branch1
四、在本地修改完代码后、保存全部的项目
$ git add .
五、保存完成后能够提交到本地
$ git commit -m '提交说明'
六、最后提交git服务器，要加上分支的名字，默认master目录不加。
$ git push origin branch1
6六、const定义对象可否改变？
能够的 。 定义的对象仍是存储在堆当中
6七、vue-router的原理
说简单点，vue-router的原理就是经过对URL地址变化的监听，继而对不一样的组件进行渲染。
每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式
6八、生命周期？
实例在被建立前通过的一系列初始化过程叫生命周期
生命周期钩子:在生命周期中被自动调用的函数叫作生命周期钩子
6九、前台发送数据到后端,而且后端给前端返回数据
后台 server.js
var express = require("express");
var app = express();
// 经过post的方法获取页面的信息
// 1.npm下载bodyParser 2.引用
var bodyParser = require("body-parser");
// 3.设置
var uE = bodyParser.urlencoded({ extended: false });
// 中间件解决跨域问题
app.use(function(req, res, next) {
// 解决跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
next();
})
app.get("/", function(req, res) {
// 接收前台发过来的数据
//用get的方式获取前台的数据使用req.query.xxx
console.log(req.query.num);
res.send("我是get的接口");
})
// 4.把解析功能传入
app.post("/post", uE, function(req, res) {
//用post的方式获取前台数据使用req.body.xxx
console.log(req.body.num);
res.send({
status: 200,
content: "我是post的接口"
});
})
app.listen(3001);
复制代码
前台index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<button>点我进行数据请求</button>
<script>
$("button").eq(0).on("click", function() {
$.ajax({
url: "http://localhost:3001/post",
type: "post",
data: {
num: 123
},
success(data) {
console.log(data);
}
})
})
</script>
</body>
</html>复制代码
70、express
express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性和丰富的 HTTP 工具
功能： 一、扩展了web所须要的基本功能
二、丰富了HTTP工具
三、能够快速搭建一个网站
var express=require("express");
// 初始化express
var app=express();
// 定义中间件（每一次接收到请求后都会先通过中间件）
app.use(function(req,res,next){
console.log("你好")
next()//下一步
})
// 建立服务
app.get("/",function(req,res){
res.send("aaaaaaa");
})
// 路由的使用
app.get("/index",function(req,res){
res.send("我是index")
})
app.get("/home",function(req,res){
res.send("我是home")
})
app.get("/post",function(req,res){
res.send("我是get的post")
})
app.get("/a*",function(req,res){
res.send("我是路径通配符选择的")
})
// 接受一个post请求
app.post("/post",function(req,res){
res.send("我是一个post请求")
})
app.listen(3000)复制代码
7一、路由登陆注册
登陆页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录页面</title>
</head>
<body>
<form action="http://localhost:3001/login">
<input type="text" name="uname"/>
<input type="text" name="upwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>复制代码
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
</head>
<body>
<form action="http://localhost:3001/zhuce">
<input type="text" name="uname"/>
<input type="text" name="upwd"/>
<input type="submit" value="注册">
</form>
</body>
</html>复制代码
server.js
在浏览器输入localhost:/端口号/zhuce 或者(login)
var http=require("http");
var url=require("url");
http.createServer(function(req,res){
res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});
// 解决二次请求
var pathurl=url.parse(req.url);
if(pathurl.pathname=="/favicon.ico"){
return;
}
// 路由
if(pathurl.pathname=="/login"){
res.end("您执行了登录的后台功能");
}else if(pathurl.pathname=="/zhuce"){
res.end("您执行了注册的后台功能");
}else{
res.end("您的请求有误 请核实后在进行请求");
}
}).listen(3001)复制代码
7二、AJAX
Async javascript and XML 异步的js和xml 局部刷新
若是没有局部刷新整个HTML页面都会刷新，这样比较占网速（浪费流量），页面比较慢。
console.log(1);
var timer = window.setTimeout(function(){console.log(2)},0);
console.log(3);复制代码
服务器端返回给客户端通常都是JSON格式的字符串或者xml格式的数据
xml:可扩展的标记语言
<production>
<price>100元</price>
<name>洗衣机</name>
</production> 复制代码
建立ajax
//1.建立ajax的实例
let xhr = new XMLHTTPRequest();//后边的()可写可不写
let xhr = new XMLHTTPRequest；
//2.请求配置项
xhr.open([请求方式],[请求路径],[ASYNC,默认是true],[USERNAME],[USERPASS]);
//请求方式 下边全部的请求方式都可以给服务器发送请求，也能够从服务器获取内容
//get/delete/head/options..
//post/put
//get/post
//通常来说get用来从服务器获取内容 获取的多，给的少
//post：获取的少给的多
//delete:从服务器删除一些内容
//head:只获取服务器响应头信息
//options:客户端对服务器的测试请求
//当前给服务器发送请求的时候若是用的get通常给服务器传递阐述用?传参
https://hellojoy.jd.com:443/?itemid=12560&babelChannel=1500725&activityId=2wbhW341AywcD3Xyv9sR5MhCPFAL&linkIds=4713019,2828306,3986352&source=02
//3.发送请求
xhr.send([请求主体]);//发送给服务器的内容放到请求主体中
//4.监听通信的内容
//readySate:ajax请求状态
UNSENT: 0 ajax实例尚未建立
OPENED: 1 参数开始配置
HEADERS_RECEIVED: 2 客户端已经开始接收服务器端响应头信息 （返回状态码，日期....）
LOADING: 3 正在准备加载服务器端响主体内容
DONE: 4 响应主体的内容已经获取完毕了
//status:HTTP网络状态码
200：ok请求状态成功（虽然请求成功了，可是拿到的内容不必定是你想要的）
301：永久从定向（永久转移）
307 Internal Redirect：临时重定向 把http转为htts
304 Not Modified :从缓存当中获取
302 Move Temporarily 临时转移（负载均衡） 当服务器的并发数不能承受的时候，把部分访问转移其它服务及集群
404:not Found 找不到
400：请求参数错误
500 Internal Server Error 未知错误
503 Service Unavailable 服务器超负荷
//onreadystatechanage监听状态改变
xhr.onreadystatechanage = ()=>{
if(！/^(2|3)\d{2}$/.test(xhr.sataus))return;
if(xhr.readyState ==2){
}
if(xhr.satus ==200 &&xhr.readyState == 4){
}
}复制代码
- 1. 网易前端面试题目
- 2. 前端网络面试题
- 3. 记一次网易前端面试
- 4. 【前端面试题】经典的前端面试20题，实用、易用、好用
- 5. 【面试】前端面试题
- 6. 网易内推（网易金融）前端面试
- 7. 去阿里、网易、滴滴前端面试碰到的问题
- 8. 2019年网易前端工程师面试题及答案解
- 9. 网易前端面试题总结，你见过几个？
- 10. 2017网易实习前端面试题讨论
- 更多相关文章...
- • XSD 简易元素 - XML Schema 教程
- • Lua 调试(Debug) - Lua 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Git可视化极简易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
- 1. 网易前端面试题目
- 2. 前端网络面试题
- 3. 记一次网易前端面试
- 4. 【前端面试题】经典的前端面试20题，实用、易用、好用
- 5. 【面试】前端面试题
- 6. 网易内推（网易金融）前端面试
- 7. 去阿里、网易、滴滴前端面试碰到的问题
- 8. 2019年网易前端工程师面试题及答案解
- 9. 网易前端面试题总结，你见过几个？
- 10. 2017网易实习前端面试题讨论