- 优化网站性能及有哪些方法？
a、减少http 请求数量
b、资源合并与压缩
c、将外部脚本置底
d、懒加载
e、代码优化
f、将 css 放到 head 中
g、避免重复的资源请求
- 从浏览器地址栏输入URL 到显示网页，这个是怎么实现的
1.域名解析，把域名解析ip地址 DNS域名解析系统
2.把ip发送到网络供应商 去找那个对应的主机服务器
3.TCP的三次握手 建立连接
4.开始发送请求 取回入口文件index.html
5.开始解析入口文件，并且取回需要的资源sources
6.进行渲染
- HTML5的新特性
1）新的语义标签属和属性
1.<header>头部标签
2.<nav>导航标签
3.<content>内容标签
4.<section>定义文档某个区域
5.<aside>侧边栏标签
6.<footer>尾部标签
2）表单新特性
3）视频和音频
4）Canvas绘图
5）SVG绘图
6）地理定位
7）拖放API
- CSS3的新特性
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;
旋转 transform: rotate（20deg）；
倾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
缩放 transform: scale（。5）；
平滑过渡 transition: all .3s ease-in .1s;
- Dom事件和标准IE事件的区别
1.事件流的区别
<body>
<div>
<button>点击这里</button>
</div>
</body>
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。
3.事件对象定位(获取)
IE：事件对象是window对象的一个属性event，event只能在事件发生时访问，事件处理函数执行完毕，事件对象被销毁。
DOM：event对象必须作为唯一的参数传递给事件处理函数，且必须为第一个参数。
4.获取目标(target)
IE：var oTarget=event.srcElement;
DOM：var oTarget=event.target;
5.阻止事件默认行为
IE：event.returnValue=false;
DOM：event.preventDefault();
6.停止事件复制（冒泡）
IE：event.cancelBubble=true;
DOM：event.stopPropagation();
- Dom的ready和onload事件区别
ready： 在DOM文档结构准备完毕后就可以对DOM进行操作；
onload：当页面完全加载后（整个document文档包括图片、javascript文件、CSS文件等外部资源)，就会触发window上面的load事件。
循环遍历数组的三种方法
方法一：for循环
方法二：forEach循环
方法三：for...in循环
- Dom基本操作
对节点(Node)的增删改查
方法类document.getElementById( );
docuemnt.getElementsByTagName( );
document.getElementsByName( );
docuemnt.getElementsByClassName( );
document.querySelector( ); //query系列是副本，不会实时变动
document.querySelectorAll( );
非方法类
(1)遍历(NODE)节点树(兼容性好，文本节点和注释节点也算)
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling
(2)遍历
增
document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();
插
parentnode.appendChild( );//可理解成数组的push方法
parentnode.insertBefore(a, b);//在PARENTNODE上插入a，在b之前
删
parentnode.removeChild(); //谋杀，只是被剪切出来了，没有完全销毁
child.remove();//自杀，自我销毁，彻底被删除
替换
parent.replace(new, origin); //用新的new去置换旧origin
- display的几中属性
none : 此元素不会被显示
block： 此元素将显示为块级元素
inline： 默认， 此元素会被显示为内联元素，元素前后没有换行符
inline-block： 行内块元素（css2.1新增的值）
- position 的几种属性值
absolute： 生成绝对定位的元素， 相对于static 定位以外的第一个父元素定位
fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位
relative： 生成相对定位的元素，相对于其正常位置进行定位
static： 默认值，没有定位
inherit： 规定应从父元素继承 position 属性的值
- 跨域的几种解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
使用Nginx转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
- 浏览器兼容性的解决方案
- 文字在div中垂直居中的方法（多种），定宽和不定宽呢
- 新闻分页模块的前端布局如何实现？滚屏图片模块如何实现？
- js的原型链原理和结构图？js类的封装和继承？
- js实现ajax请求
- js实现websocket请求
- js的闭包是什么？有什么作用？会有什么问题？
可以理解为定义在一个函数内部的函数。 闭包就是将函数内部和函数外部连接起来的一座桥梁。
作用： 一是可以读取函数内部的变量； 二是 让这些变量的值始终保持在内存中
使用闭包的注意点：
· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，
所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存
泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数
当作对象（object）使用，把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），这时一定要小心，
不要随便改变父函数内部变量的值。
- vue的生命周期
1）beforeCreate： 实例组件刚创建，元素DOM和数据都还没有初始化
2）Created： 数据Data 初始化完成，DOM未渲染
3）beforceMount：Dom未完成挂载，数据也初始化完成
4）Mounted： 数据和DOM都完成挂载
5）beforeUpdate：数据更新之前
6）Updated： 数据更新完毕
7）beforeDestroy： 销毁前
8） destroy： 销毁后
- function func(){}和var func = function(){}的区别是什么？
在Javascript中，函数及变量的声明都将被提升到函数的最顶部，也就是说我们可以先使用后声明,
但函数表达式和变量表达式只是将函数或者变量的声明提升到函数顶部，函数表达式和变量的初始化将不被提升
var func=function(){} 这种叫做函数表达式 必须先定义后使用
function func(){}这种是函数声明 可以先使用后定义 它会对函数的声明进行一个提升
- query中 . g e t ( ) 提 交 和 .get()提交和 .get()提交和.post()提交有区别吗？
相同点：都是异步请求的方式来获取服务端的数据；
异同点：
1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
- ES6的特性（promise）
在这里插入代码片
- 网页的性能优化（网络请求层面、js代码层面）
- JavaScript 中的定时器有哪些？ 他们的区别及其用法
setTimeout 只执行一次
setInterval 会一直重复执行
- vue-router怎么控制页面的切换
匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内
容,每次 hash 值的变化，还会触发hashchange 这个事件，通过
这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便
可以监听hashchange来实现更新页面部分内容的操作.
- vue实现双向数据绑定的原理
就是利用了Object.defineProperty()这个方法重新定义了
对象获取属性值(get)和设置属性值(set)的操作来实现的。
在MDN上对该方法的说明是: Object.definePropert/()方法
会直接在一个对象上定义一个新属性,或者修改一个对象的
现有属性,并返回这个对象。
- http请求的过程是怎样的？有哪些常见的状态（200、404、3xx、5xx）
2开头 （请求成功）表示成功处理了请求的状态代码。
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
- 什么是闭包
含义：闭包指的是函数内部可以访问其他作用域内变量的函数
闭包的特点：
1.外层函数嵌套内层函数，外层函数将内层函数的值返回出去
2.闭包能够访问其他作用域内的变量
3.函数的参数和变量不会被垃圾回收机制回收
4.允许私有成员存在
闭包的缺点
由于闭包不会被垃圾回收机制回收的这个特点
导致当你不再使用这个闭包时闭包的参数和变量
仍然存储在内存当中 容易造成内存泄漏
工作中什么情况下要用到闭包？
在我们工作中使用闭包的常见场景是用来模拟一个块级作用域（匿名自执行函数）和对一些函数的参数结构进行缓存，但是因为闭包容易造成内存泄漏的特点我们在使用完闭包之后要手动将结果进行清除
手写一个闭包
function a(){
var n=0;
function b(){
n++;
console.log(n)
}
return b;
}
var c=a();
c();
为什么闭包不会被垃圾回收机制回收？
在js当中如果一个对象不再引用或者两个对象互相引用但是不被其它第三者引用那么这个对象就会被垃圾回收机制回收，但是在闭包中 函数a和函数b都是互相引用且b又被函数外部的c所引用 所以闭包不会被垃圾回收机制回收
原型和原型链
跨域
什么是跨域？
跨越指的是 在js中由于浏览器的同源策略限制一个网站不能访问另外一个网站的脚本，同源策略本质上是浏览器的安全策略
如何跨域？‘
1.jsonp跨域（需要前后端配合才能实现）
前端使用 script标签的scr属性 后端需要使用res.jsonp返回数据
jsonp只在GET请求下使用，POST请求不能使用
原理： Ajax请求受到同源策略影响，不允许进行跨域请求，而script标签scr属性中的链接可以访问跨域的js脚本，所以利用这个特性可以获取到跨域的数据
2.使用代理跨域
3.core（跨域资源共享）
如何跨域
代理跨域
原理：使用代理请求服务器然后返回给前端来绕过同源策略
nodejs中使用http-proyx-midleware中间件代理实现跨域
后端也可以使用nginx
前端还可以使用webpack实现代理
使用方法
//安装http-proyx-midleware插件
在项目根目录打开命令行工具
输入安装
npm install http-ptoyx-midleware -S
//引入模块
var app = require('express');
var proyx = require('http-proyx-midleware')
//注册
app.use('/user',proyx{
target:"http://xxx"//接口地址
changeOrigin:true
})
3.正向代理和反向代理
1.正向代理
正向代理中服务器并不知道是那个客户端发起的请求因为他的所有请求都是来自代理服务器，所以说在正向代理中客户端对于服务器来说是不可见的
2。反向代理
反向代理与正向代理相反，反向代理不需要在客户端去设置，在反向代理的过程中客户端只需要请求这个代理服务器，而代理服务器根据相应的设置去请求相应的服务器，因此在反向代理中服务器对于客户端来说是不可见的
CORE (跨域资源共享)只需要后端工程师来完成
原理：在请求头中写入说明此接口为安全的语句，使得浏览器的同源策略能够放行
es6新增语法
箭头函数，模板字符串，...运算符，模块化，pormise函数，calss类
数组的常用API
push() 向数组的末尾添加一个元素
unshift（）向数组的第一位添加一个元素
pop（）删除数组的最后一个元素
shift（）删除数组的第一位元素
join() 用于将数组里的对象放入一个字符串并且用指定分隔符相连
splice（）用于在数组的指定index处添加或者删除指定数量的元素
深浅拷贝
我们知道在JavaScript当中数据类型分为基本数据类型和引用数据类型
基本数据类型如：Numer，String，布尔值，undefined，null，symol
基本数据类型的值是存储在栈当中通过变量名能够直接访问到
引用数据类型指的是：Object类型 如果细分的话还分为 Array，Functin，Object。。。，引用数据类型的值是存储在堆当中，通过存储在变量名当中的指向堆的地址来访问到
因此如果我们将一个对象直接赋值给一个变量那么我们就是只是将地址赋值过去，此时就是引用拷贝 如果我们去修改新的对象的话 旧的对象也会改变 因为本质上他们都是共享的一块堆内存
而浅拷贝和引用拷贝的区别就是浅拷贝是按位拷贝 浅拷贝会拷贝一个和旧对象一样的对象，如果旧对象的属性值是基本数据类型的话我们去修改新对象的话旧对象是不会发生改变的而旧对象的属性值是引用数据类型的话则就是拷贝的地址，我们去修改这个引用数据类型的话 旧对象也会发生改变
深拷贝就是会复制一份和之前对象一模一样的新对象，新旧对象之间没有联系，当我们去修改新对象无论属性值是基本数据类型还是引用数据类型旧对象都不会发生改变
什么是防抖截流
get和post的区别
由于GET请求的参数都是在url地址栏可以直接看到因此GET相对POST请求来说安全性低
GET请求回退是无害的而POST请求回退时会重新请求
GET请求只支持URL编码格式，而POST请求是支持多种编码格式
GET请求会被浏览器的历史记录默认保存而POST请求除非手动设置是不会被浏览器所缓存的
GET请求的参数是放在URL地址栏里而POST请求是request.body中
GET请求是有长度限制的（长度限制取决于浏览器的规定），而POST请求没有限制
cookie和session
为什么要使用cookie或者session？
我们知道http请求是无状态的，它不能保存请求发送过来的数据，因此当我们在用户登录时如果刷新页面或者退出浏览器那么就会导致在重新打开网站时就又要重新输入用户名密码，这极大的影响了用户体验和实际效果所以我们要使用cookie或者session来保存
cookie和session的区别
cookie是有大小限制的一般不能够超过4KB，而session理论上是没有大小限制的（大小限制取决于服务器所分配的大小）
cookie是存储在客户端 而session是存储在服务器端
由于cookie是存储在客户端浏览器上的可以从浏览器直接获取到cookie信息因此相对来说cookie没有session安全
那什么时候使用cookie什么时候使用session
由于session是存储在服务器上的安全性比cookie高但是如果存储大量的session在服务器上的话会占用过多的服务器资源 因此我们把如用户登录的密码等这种重要的信息就存储在session而其它信息则可以存在cookie
什么是pormise
定义：promise是es6新增的语法 作用是用来解决层层嵌套的回调函数
promise是一个构造函数 通过new 关键字来创建
promise函数有三种状态：进行时（padding）成功后（resolved）失败后（rejected）
手写一个pormise
const promise = new Promise((resolve, reject) => {
// 异步操作的代码
if (success){
resolve(value);
} else {
reject(error);
}
});
vue计算属性和watch属性
计算属性computed和watch属性都是用来监听vue组件中的变化并执行相应的操作的
他们的区别在于监听的对象不同：computed是监听依赖值的变化，当依赖值发生变化会自动计算依赖值变化之后的结果，当依赖值没有发生变化时会自动读取之前缓存的进行快速的渲染，而wacth则是监听属性值的变化当属性值发生变化的时候自动执行相应的监听回调和逻辑
使用场景：当我们需要在属性值发生变化时执行相应的异步操作或者开销比较大的操作的时候我们用watch比较好因为computer属性必须是同步的，而当我们需要得到依赖值发生变化后的结果 如：购物车的加减和总金额的变化
js中如何实现继承
可以使用es6新增的class继承
原型继承
一个简单的原型继承
function Father(){
this.age = 18;
}
function Son(){
this.name = “zs”
}
Son.prototype = new Father();
var s = new Son();
console.log(s.age)
图片懒加载原理
new关键字具体都干了什么
- 创建一个新对象
- 将新对象的_proto_指向构造函数的prototype对象
- 将构造函数的作用域赋值给新对象 （也就是this指向新对象）
- 执行构造函数中的代码（为这个新对象添加属性）
- 返回新的对象
vue中v-if和v-show有什么区别
首先 v-if和v-show都能用于对指定元素的显示和隐藏操作 但是他们在实现的方法上略有不同
- v-if是通过对dom的销毁和重建来实现元素的显示和隐藏
- v-show则是通过修改元素的display属性来达到显示和隐藏
还在更新中～～～～
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
