面试题整理

 一 Ajax中POST和GET的区别
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方法。

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

1. 为网站提供favicon.ico。
2. 在发布网站前的测试工作中，运行Link checker工具，确保所有链接都是能够访问到的。这个工具是W3C发布的，完全免费，你值得拥有。
3. 为了避免用户收藏绝对地址（customer.aspx)，给后期更新带来隐患。可以考虑在设计阶段采用  Url Rewriting  或者  Routing 等技术来实现更加友好和灵活的地址（例如/Customer)，以后如果业务逻辑有变化，只需要修改一下路由规则即可。

• 如果条件允许的话, 不如直接使用  ASP.NET MVC （内置使用Routing组件）

同样可以尽可能地减少用户手工输入地址出错的机会。

b/网络传输阶段
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:<iframe>的优点：
引入缓慢的第三方内容，比如标志和广告
安全沙箱
并行下载脚本
<iframe>的缺点：
代价高昂，即使是空白的iframe
阻塞页面加载

非语义

。。。。https://www.cnblogs.com/xianyulaodi/p/5755079.html。。。

闭包：

有权访问另一个函数作用域内变量的函数都是闭包。有时候需要获取到函数内部的局部变量。闭包是将函数内部和函数外部连接起来的桥梁。

作用：
读取函数内部的变量；让变量的值始终保持在内存中
优点：
1.保护函数内的变量安全,加强了封装性 
2.在内存中维持一个变量(用的太多就变成了缺点，占内存)
闭包之所以会占用资源是当函数a执行结束后, 变量i不会因为函数a的结束而销毁, 因为b的执行需要依赖a中的变量。
不适合场景：返回闭包的函数是个非常大的函数
如果闭包被赋给了一个全局变量，这导致闭包始终在内存中，而闭包的存在依赖于父函数，因此父函数也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

css3新增的属性：
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
边框：border-radius/box-shadow/border-image
背景：background-size/background-origin/background-clip
文字：text-shadow/word-wrap
2/3D转换：translate/rotate/scale/skew/matrix/rotateX/rotateY/transition/animation
动画：animation、animation-name、animation-duration。。。
用户界面:resize/box-sizing/outline-offset
css3新增伪类 
：nth-child() 
：nth-last-child() 
：only-child 
：last-child 
：nth-of-type() 
：only-of-type() 
：empty 
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 
：enabled 
：disabled 
：checked 

：not

- h5新增的标签
新增元素 说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
template
section
nav
aside
article
footer

header

ajax步骤：

step1:创建：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
step2:使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或
者false（代表同步）
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
async=true当服务器准备响应时将执行onreadystatechange函数:
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();
asyn=false 则将不需要写onreadystatechange函数，直接在send后面写上执行代码。
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
step3:使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据，使用responseXML属性得到服务器响应的XML数据。
例子如下：
document.getElementById("demo").innerHTML = xhttp.responseText;
服务器响应的XML数据需要使用XML对象进行转换。
例子：
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
step4:
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。
status属性，200表示成功响应，404表示页面不存在。
在onreadystatechange事件中，服务器响应准备的时候发生，当readyState==4和status==200的时候服务器响应准备。

function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;

}

前端解决跨域问题的方案:

1.同源策略如下：
URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许
特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。


第一种：动态创建script:script标签不受同源策略的限制
function loadScript(url, func) {
 var head = document.head || document.getElementByTagName('head')[0];
 var script = document.createElement('script');
 script.src = url;
 
 script.onload = script.onreadystatechange = function(){
 if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
  func();
  script.onload = script.onreadystatechange = null;
 }
 };
 
 head.insertBefore(script, 0);
}
window.baidu = {
 sug: function(data){
 console.log(data);
 }
}


第二种：postMessage（HTML5中的XMLHttpRequest Level 2中的API）
 a.com/index.html中的代码：
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById('ifr');
 var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样 // 若写成'http://c.com'就不会执行postMessage了
 ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>


b.com/index.html中的代码：
<script type="text/javascript">
 window.addEventListener('message', function(event){
  // 通过origin属性判断消息来源地址
  if (event.origin == 'http://a.com') {
   alert(event.data); // 弹出"I was there!"
   alert(event.source); // 对a.com、index.html中window对象的引用// 但由于同源策略，这里event.source不可以访问window对象
  }
 }, false);
</script>


第三种：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则不会刷新页面
<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>   
<iframe name="targetIfr" style="display:none"></iframe>


通过type=submit提交
一般表单提交通过type=submit实现，input type="submit",浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url.do
<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>


js提交form表单
js事件触发表单提交，通过button、链接等触发事件，js调用submit()方法提交表单数据，jquery通过submit()方法
<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>
              
js: document.getElementById("form").submit();
jquery: $("#form").submit();


ajax异步提交表单数据
采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等
<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>
  var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
      }
   });


页面无跳转
如果通过form表单提交请求服务端去下载文件，这时当前页面不会发生跳转，服务端返回void，通过response 去写文件数据，
页面会显示下载文件。
<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>


@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
 <form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="submit" value="提交">

   </form>

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<params.length;i++){
         var param = params[i].split("=");
         obj[param[0]] = param[1];//为对象赋值
     }
     
     return obj;
}