如何对网站的文件和资源进行优化？
1. 文件合并，目的是减少http请求
2. 文件压缩 目的是直接减少文件下载的体积
3. 缓存的使用（并且多个域名来提供缓存）
4. 使用 CDN （内容分发网络）来托管资源
es6箭头函数的特点
需要注意的是， 箭头函数没有自己的this、arguments、super、new.target，它们分别指向外层函数的相应变量。
1. 可以在函数中直接设置默认值。
2. 当要执行的代码块只有一条return语句时，可省略大括号和return关键字：
3. 当传入的参数只有一个时，可以省略小括号：
4. 当不需要参数时，使用空的圆括号
cookie，localstorage，sessionstorage
cookie数据存放在客户的浏览器上，cookie不是很安全，大小只有3kb。
localstorage浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）永久存储，永不失效，除非手动删除
数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。就是浏览器窗口关闭就失效了
数据类型
number，Boolean，string，object，null，undefined。
gulp和webpack
gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
vuex的原理
三次握手，为什么要三次握手？
第一次握手：建立连接时，客户端发送请求到服务器
第二次握手：服务器收到请求，回复客户端
第三次握手：客户端收到服务端的响应，在向服务端发送确认信息，表示已经收到，然后服务端和客户端就可以开始传送数据。
三次握手是为了确认客户端跟服务器都能接受到对方的信息。
JavaScript的typeof返回哪些数据类型？
undefined
string
boolean
number
symbol(ES6)
Object
Function
jQuery有些些选择器？
1. 基本选择器
#id
.class
element
*
2. 层次选择器：
parent > child
prev + next
prev ~ siblings
3. 基本过滤器选择器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
4. 属性过滤器选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
如何利用jQuery来向一个元素中添加和移出css类？
Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类
gulp，grunt，webpack，Yeoman的优点？
gulp优点：
- 使用方便
- 构建快速
- 易于学习
webpack优点
- loader转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
- Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
- Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
vue的响应式原理？
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue的computed 与 methods的区别？
methods是方法，只要调用它，函数就会执行。
计算属性基于依赖缓存，只有相关依赖发生改变才会重新取值。只要message没有发生改变，计算属性会立即返回之前的计算结果，而不必执行函数。
vuex的设计原理
var，let各有什么优缺点，使用箭头函数有什么优缺点？
let 允许把变量的作用域限制在块级域中。
与var的区别在于var 声明要么是全局变量或者是局部变量，而无法变为块级的
闭包问题
var a = [];
for(var i=0; i<10; i++){
a[i] = function () {
console.log(i)
}
}
a[6]() // 10
let会形成闭包，而var不会；正确做法：
var a = [];
for(var i=0; i<10; i++){
(function(idx){
a[i] = function () {
console.log(idx);
}
})(i)
}
a6 // 6
什么是mvc，MVP，MVVM框架
输入url，到页面展示发生了什么？
- DNS解析
- TCP连接
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- 连接结束
为什么说JavaScript单线程，什么是任务队列，什么是事件轮询？
JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题
页面布局中，左边固定，右边随意
vue中数据传递的方式有哪几种？
1.父子传值
第一步： 在父元素中绑定一个参数 我这里的是： :id="updateId"
第二步： 在子元素中接受，使用props接收。
2.子向父传值
第一步： 在子组件中触
3.同级传参
两种方式
1.query穿参，或者params传参
使用 this.$router.push({path: '/', query: {参数名: '参数值'})
this.$router.push({name: '/', params: {参数名: '参数值'})
注意： 使用params时不能使用path
接收： var a = this.$route.query.参数名
var b = this.$route.params.参数名
css3新增伪类
Element1 ~ element2：选择前面有element1的所有element2元素
[attr ^= val] 属性值以val开头的元素
[attr $= val] 属性值以val结尾的元素
[attr *= val] 属性值包含val的元素
element:first-of-type: 父元素中第一个element元素
element:lastt-of-type: 父元素中最后一个element元素
element:only-of-type: 父元素中唯一一个element元素
element: :nth-of-type(n): 父元素中第n个element类型的element
element:nth-last-of-type(n): 父元素中倒数第n个element类型的element
element:only-child: 父元素中只有一个子元素，且该子元素为element的element
element:last-child: 父元素中最后一个子元素，且该子元素为element的element
element:nth-child(n): 父元素中第n个子元素是element的element
element:nth-last-child(n) 父元素中倒数第n个子元素是element的element
:root 选择文本的根元素
element:empty 没有子元素的element元素
element:enable 选择每个已启动的元素
element:disable 选择每个已禁止的元素
element:chacked 选择每个被选中的元素
element:target 选择当前活动的元素
防止重复发送ajax请求的解决方案？
1.按钮提交
在按钮提交之后和AJAX提交之前将按钮设置为禁用
在提交成功之后重新启用该按钮
即使AJAX失败也需要将按钮设置为可用状态，因为有可能是网络问题导致的失败，所以需要将按钮设置为可用
2. 非按钮提交
设置一个对象来控制是否进入AJAX过程
如果正在提交则直接返回，停止执行
标记当前状态为正在提交状态
进入AJAX提交过程
在提交成功之后将标志标记为可提交状态
AJAX失败也需要将标志标记为可提交状态
基于jQuery编写ajax异步获取数据的完整代码
$.ajax({
type : "GET",
url : "a.php",
dataType : "jsonp",
success : function (data) {
$.each(data.items, function (i, item) {
$("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
if (i == 3) {
return false;
}
});
}
});
网友评论