面试题整理
Get和Post都是向服务器发送的一种请求，只是发送机制不同。
1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。在Ajax请求中，
这种区别对用户是不可见的。
2."GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接
关系。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。
3. GET方式请求的数据会被浏览器缓存起来，其他人可以从浏览器的历史记录中读取到这些数据，例如账号和密码等
。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
4. 使用get请求时,服务器端使用Request.QueryString来获取参数,使用post请求时,服务器端使用
Request.Form来获取参数，为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中.当请求无副作
用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。
a.请求的结果有持续性的副作用，例如，数据库内添加新的数据行;
b.表单上收集的数据可能让URL过长；
c.要传送的数据不是采用7位的ASCII编码。
更新一个文件或者数据库的时候。
发送大量数据到服务器，因为post请求没有字符限制。
发送用户输入的加密数据。
用GET方法的情况：
a.请求结果无持续性的副作用。;
b.请求是为了查找资源，HTML表单数据仅用来帮助搜索；
c.收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符；
d.传送的数据是采用7位的ASCII编码。get只接受ASCII编码的字符.
二 从浏览器发起请求到页面能正常浏览都有哪些阶段（process）？
预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染
三 前端性能优化
a/内容层面
1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）
2、避免重定向（/还是需要的）
怎么取避免重定向：
1、在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址。例如使用www.cnblogs.com 而不是cnblogs.com
2、在使用Response.Redirect的时候，设置第二个参数为false。考虑是否可用Server.Execute代替/考虑Respone.RedirectPermanent
3、如果涉及到从测试环境到生产环境的迁移，建议通过DNS中的CNAME的机制来定义别名，而不是强制地重定向来实现
3、拆分域名（按照什么原则拆分域名呢？
个数多少合适？
一般50M以下网页类网站，域名保持在4、5个即可，过多后范围会导致你的维护和使用变得复杂。
100-500M以下网页类网站，域名保持在8-10个左右。
1G以上的网页类网站，域名无所谓个数，保持10个以上，具体个数根据自己的业务和管理特点随心制定。
什么内容放到同个域名下？
页面类：html、htm等
样式类：js、css等
图片类：jpg、png、gif等
动态类：php、asp等
4、杜绝404
- 为网站提供favicon.ico。
- 在发布网站前的测试工作中，运行Link checker工具，确保所有链接都是能够访问到的。这个工具是W3C发布的，完全免费，你值得拥有。
-
为了避免用户收藏绝对地址（customer.aspx)，给后期更新带来隐患。可以考虑在设计阶段采用 Url Rewriting 或者 Routing 等技术来实现更加友好和灵活的地址（例如/Customer)，以后如果业务逻辑有变化，只需要修改一下路由规则即可。
-
如果条件允许的话, 不如直接使用 ASP.NET MVC （内置使用Routing组件）
1、减少传输过程中实体的大小
1）缓存
2）cookie优化
3）文件压缩（Accept-Encoding：g-zip）
2、减少请求的次数
1）文件适当的合并
2）雪碧图
3、异步加载（并发,requirejs）
4、预加载、延后加载、按需加载
三）渲染阶段
1、js放底部，css放顶部
2、减少重绘和回流
3、合理使用Viewport 等meta头部
4、减少dom节点
5、BigPipe
四）脚本执行阶段
1、缓存节点，尽量减少节点的查找
2、减少节点的操作（innerHTML）
3、避免无谓的循环，break、continue、return的适当使用
4、事件委托
三/link 和 @important 的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4: link支持Javascript控制DOM去改变样式；而@import不支持。
补充：@import最优写法
@import的写法一般有下列几种：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
四/雅虎前端优化的35条军规:
内容部分:
1.尽量减少HTTP请求数:js合并/css合并/雪碧图/图像映射可以把多张图片合并成单张图片，总大小是一样的，但减少了请
求数并加速了页面加载/
2.减少DNS查找：拆分域名
3.避免重定向：URL尾部添加一个斜线
4.让ajax可缓存：下面适用于Ajax的其它规则：
Gzip组件
减少DNS查找
压缩JavaScript
避免重定向
配置ETags
5.延迟加载组件：“渐进增强”，在确定页面运行正常之后，可以用一些延迟加载脚本增强它，以支持一些拖放和动画之类
的华丽效果。
6.预加载组件：通过预加载组件可以充分利用浏览器空闲的时间来请求将来会用到的组件（图片，样式和脚本）。用户访问
下一页的时候，大部分组件都已经在缓存里了，所以在用户看来页面会加载得更快。实际应用中有以下几种预加载的类型：
无条件预加载——尽快开始加载，获取一些额外的组件。google.com就是一个sprite图片预加载的好例子，这个sprite图片
并不是google.com主页需要的，而是搜索结果页面上的内容。
条件性预加载——根据用户操作猜测用户将要跳转到哪里并据此预加载。在search.yahoo.com的输入框里键入内容后，可以
看到那些额外组件是怎样请求加载的。
提前预加载——在推出新设计之前预加载。经常在重新设计之后会听到：“这个新网站不错，但比以前更慢了”，一部分原
因是用户访问先前的页面都是有旧缓存的，但新的却是一种空缓存状态下的体验。可以通过在将要推出新设计之前预加载一
些组件来减轻这种负面影响，老站可以利用浏览器空闲的时间来请求那些新站需要的图片和脚本。
7.减少DOM元素的数量：
DOM元素的数量很容易测试，只需要在Firebug的控制台里输入：document.getElementsByTagName('*').length
8.跨域分离组件:分离组件可以最大化并行下载，但要确保只用不超过2-4个域，因为存在DNS查找的代价。
9.尽量少用iframe:
b.com/index.html中的代码：
第三种：CORS
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);
第四种：jsop
JSONP包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。
function handleResponse(response){
console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成
jsonp虽然很简单，但是有如下缺点：
1）安全问题(请求代码中可能存在安全隐患)
2）要确定jsonp请求是否失败并不容易
第五种：websockets
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议
只有在支持web socket协议的服务器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
var data = event.data;
}
jQuery和Vue的区别:
将原有的直接操作dom的思想转变到操作数据上去
jQuery首先要获取到dom对象，然后对dom对象进行值的操作;其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新将原有的直接操作dom的思想转变到操作数据上去,通过Vue对象将数据和View完全分离开来了,就是传说中的MVVM。
vue适用的场景：复杂数据操作的后台页面，表单填写页面
jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面
vue侧重数据绑定，jquery侧重样式操作，动画效果等
form表单提交方式:
无刷新页面提交表单
表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，
form提交目标位当前页面iframe则不会刷新页面
通过type=submit提交
一般表单提交通过type=submit实现，input type="submit",浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url.do
js提交form表单
js事件触发表单提交，通过button、链接等触发事件，js调用submit()方法提交表单数据，jquery通过submit()方法
js: document.getElementById("form").submit();
jquery: $("#form").submit();
ajax异步提交表单数据
采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等
var params = {"name", $("#name").val()}
$.ajax({
type: "POST",
url: "/url.do",
data: params,
dataType : "json",
success: function(respMsg){
}
});
页面无跳转
如果通过form表单提交请求服务端去下载文件，这时当前页面不会发生跳转，服务端返回void，通过response 去写文件数据，
页面会显示下载文件。
@RequestMapping(value = "/url")
public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)
throws Exception {
OutputStream out = null;
try {
String rptName = "file";
String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),
"8859_1");
response.reset();
response.setContentType("application/octec-stream");
response.setHeader("Content-disposition", "attachment; filename=" + fileName);
out = response.getOutputStream();
excelAble.exportFile(out);
} catch (Exception e) {
logger.error(e);
} finally {
if (out != null) {
out.close();
}
}
}
form表单上传文件
使用form表单进行上传文件需要为form添加enctype="multipart/form-data" 属性，除此之外还需要将表单的提交方法改成post,
如下 method="post", input type的类型需要设置为file
Grid 属性列表
Grid Container(直接父元素) 的全部属性
display：将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
Grid Items 的全部属性
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
https://segmentfault.com/a/1190000012889793
将URL的参数列表解析为一个对象：
function queryURL(url){
var arr1 = url.split("?");
var params = arr1[1].split("&");
var obj = {};//声明对象
for(var i=0;i
obj[param[0]] = param[1];//为对象赋值
}
return obj;
}