最近在复习，准备找工作了，特此总结一下前端的相关知识。
1.获取浏览器URL中查询字符的参数：
function getQuery(name){
var reg = new RegExp("(^|&)"+name+"=([^&]*)"(&|$));
var r = window.location.search.sunstr(1).match(reg);
if(r!=null) return unescape(r[2]);return null;//unescape解码方法
}2.js的typeof返回那些数据？
答：undefined,boolean,string,number,object,function
3.js数据类型
Undefined;Null;Boolean;Number;String; js有五种基本类型：数值，布尔，字符串，空值*2。还有一个复杂数据类型Object。
4.节点操作：
添加节点，appendChild；
移除节点，removeChild；
复制节点，cloneChild;
创建节点，createChild。
5. for(i=0,j=0;i<10,j<6;i++,j++){ 和 for(i=0,j=0;i<6,j<10;i++,j++){
{ k=i+j; } } { k=i+j; } }
console.log(k); console.log(k);
分别输出：10(5+5)；18(9+9) 原因：判断语句以最后一个为基准。
6.typeof null :object 但是 null instanceof object 为false
7.substring和sunstr 都是截取字符串，substring包含两个参数，第一个是起始位置，第二个是结束位置（不包含结束位置）；substr第二个参数为截取长度
8.过滤数组重复元素，得到一个新数组 var arr = [1,3,1,1,3,4,5,1,1,2,5,7]
答：//先深拷贝数组，将arr复制给arr1，然后操作arr1即可
var arr1 = [];
for(var i=0;i<arr.length;i++){
arr1.push(arr[i]);
}
for(var i=0;i<arr1.length;i++){
while(arr1.indexOf(arr1[i])!=arr1.lastIndexOf(arr1[i])){
arr1.splice(arr1.lastIndexOf(arr1[i]),1);
}
}
console.log(arr1);//方法2
function unique(arr){
var result = [];
var isRepeated;
for(var i=0;i<arr.length;i++){
isRepeated = false;
for(var j=0;j<result.length;j++){
if(arr[i] == result[i]){
isRepeated = true; break;
}
}
if(!isRepeated){
result.push(arr[i]);
}
}
return result;
} 9.验证邮箱
答：str.match(/^[a-zA-Z0-9_-.]+@[a-zA-Z0-9-.]+$/)
10.js全局函数
答：escape;oarseFloat;eval;alert
11.js中childNode与children
答：1、childNodes：获取节点，不同浏览器表现不同； IE：只获取元素节点； 非IE：获取元素节点与文本节点；
2、children：获取元素节点，浏览器表现相同。 因此建议使用children。
3、firstChild与firstElementChild
相同点：获取父节点下的第一个节点对象；
不同点：1、firstchild：IE6,7,8：第一个元素节点；非IE6,7,8：第一个节点，文本节点或者元素节点；
2、firstElementChild：IE6,7,8：不支持； 非IE6,7,8：第一个元素节点；
12.js有11种内置对象
Array;String;Date;Math;Boolean;Number;Function;Global;RegExp;Error;Object
13.IE和标准DOM的时间模型的不同
答：IE内核的浏览器时间是冒泡型事件，通过attachEvent方法注册，阻止默认时间e.stopPropagation或window.event.cancelBubble=true实现；
DOM标准的浏览器则在冒泡之前多了捕获过程，通过addEventListener方法注册，阻值事件默认行为e.preventDefault或window.event.returnValue = false（IE）。
14.mouseover和mouseenter、mouseout和mouseleave
答，mouseover,mouseout不论穿过备选元素还是子元素都会触发，mouseenter和mouseleave不会
15.get与post区别
答： (1)get是从服务器上获取数据，post是向服务器传递数据； (2)get是把参数数据队列加到提交表单的action属性所指URL中，post是通过HTTPpost机制将表单内各字段与其内容放置在HTML HEADER内一起传送到action所指URL，用户看不到这个过程； (3)get安全性低，post高； (4)get限制表单的数据集的值必须为ASCII字符。post支持整个ISO10646字符集。
16.input类型
答：text,password,file,radio,checkbox,hidden,button,image,reset,submit,H5新增color,email,url,number,range,date pickers,search等。
17.富客户端和薄客户端
答：富客户端将应用程序的处理过程分为两部分：客户端部分用户桌面计算机执行的处理和服务器部分的一些集中处理。胖客户端应用程序的客户端部分除了负责将程序的UI界面显示给用户进行交互外，还负责进行大部分的业务逻辑处理。 瘦客户端将C/S结构中的客户端程序 统一为浏览器(Broswer)，浏览器中只解析标准的HTML来显示用户交互界面。
18.js的封装继承和多态
答：详情见https://blog.csdn.net/codefighting/article/details/44936809
19.一次完整的HTTP工作流程：
答：首先是域名解析； 然后是TCP的三次握手； TCP连接成功后发起HTTP请求报文； 服务器响应HTTP请求； 拿到HTML后浏览器开始解析HTML代码； 浏览器对页面进行渲染呈献给用户；
20.js内置对象：
在js继承这一部分知识点里，如果对象本身无该方法，会在其上一级原型查找，如果还没有就依次向上查找，查找的最顶端是Object等集中基本内置对象，他们的上层是null。 这几种分别是：全局对象（decodeURI;encodeURI;escape(string);isNaN;Number;parseInt;String(object)等）；Number对象（toString,valueOf）；Boolean；String；Array;Object;Function;Date;Math。 系统内置的函数对象：Function,Object,Array,String,Number；
21.constructor、prototype和_proto_
所有的对象obj都具有proto属性(null和undefined除外),而且指向创造obj对象的函数对象的prototype属性
constructor 属性返回对创建此对象的函数对象的引用。 请看以下例子:
function a(){};
console.log(a.constructor===Function); //true
console.log(a.prototype.constructor===a); //true函数a是由Function创造出来,那么它的constructor指向Function,a.prototype是由new a()方式创造出来,那么a.prototype.constructor理应指向a。
22、提高网站性能方法
a）减少http请求：主要手段有合并CSS，JavaScript，合并图片；
b）使用浏览器缓存：设置HTTP头的Cache-Control和Expires属性，可设定浏览器缓存；
c）启用压缩：在服务器端对文件进行压缩，浏览器端解压，有效减少通信传输数据量；
d）CSS放在页面最上面，JavaScript放在页面最下面，符合浏览器加载过程；
e）减少Cookie传输；
f）CDN加速（不懂）；
g）反向代理
24、AJAX篇
简述Ajax中javascript脚本缓存问题：修改js内容，调试时不能显示新写的代码结果，是因为js为了加速页面执行，当前页面使用缓存。解决方法为，可在链接地址后增加一个随机函数。
Ajax优点：页面无刷新，体验更好；使用异步方式与服务器通信，响应更快；将服务器工作转移到客户端，利用客户端闲置的能力处理，减轻服务器负担，可最大程度减少冗余请求和响应；不需要下载插件或额外小程序。
缺点：不支持返回按钮；安全问题，暴露了域服务器交互细节；对搜索引擎支持较弱；破坏程序异常机制；不容易调试。
Ajax中文乱码：主要因为js页面和action类中使用编码方式不同。解决方法为页面的js做两次encodeURI，服务器的serverlet做一次UTF-8，如下
js:var url="Ajaxserver?name="+encodeURI(encodeURI($("#userName").val()))";
服务端:String old=httpServletRequest.getParameter("name"); String name=URIDecoder.decode(old,"UTF-8");
Ajax实现步骤：创建XMLHttpRequest；创建新的HTTP请求，制定请求方法、URL及验证信息；设置响应函数；发送HTTP请求；获取异步调用返回数据；使用js和DOM实现局部刷新；
<body>
<button id="mybtn">点击</button>
<div id="myAjax"></div>
</body> //1、获取到xmlhttprequest
function getXmlhttp() {
var xmlhttp;
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload = function() {
document.getElementById('mybtn').onclick = function() {
//1、获取到xmlhttprequest 对象
var xmlhttp = getXmlhttp();
//2、xmlhttprequest的响应事件
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//5、操作获取到的信息
//5.1ajax返回的数据,转换为javascript对象
// 5.1.1 利用eval实现转换
var ajaxResult = eval("(" + xmlhttp.responseText + ")");
//5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号
/* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */
alert(ajaxResult)
//5.2获取JavaScript对象的属性
var age = ajaxResult.age;
var name = ajaxResult.name;
//5.3获取到页面的DIV,并设置内容
var mydiv = document.getElementById("myAjax");
mydiv.innerHTML = "name:" + name + "," + "age:" + age;
}
}
//3、准备获取ajax请求
//3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数
xmlhttp.open("POST", "AjaxServerlet", true);
//4、发送ajax请求
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("age=18&name=zhang");
};
}
安全性：增加验证码；约束同意请求在规定时间内的最大请求数量；尽量使用POST；
XMLHttpRequest常用属性：onreadystatechange（处理服务器响应函数）；readyState（服务器响应状态信息）；responseText（取回服务器返回数据）
XMLHTTPRequest常用方法：open()第一个参数定义请求方法，第二个规定URL，第三个规定异步处理；send()请求送往服务器。 XMLHttpRequest在IE使用new ActiveXObject()得到，firefox通过newXMLHTTPRequest()
HTTP状态消息：
1xx 信息，服务器收到请求，需要请求者继续执行操作
2xx成功，操作被成功接收并处理
3xx 重定向，需要进一步的操作以完成请求
4xx客户端错误，请求包含语法错误或无法完成请求
5xx 服务器错误，服务器在处理请求的过程中发生了错误
100：继续；200：请求成功；301：永久移动；302：临时移动；404：服务器无法根据请求找到资源；501：服务器不支持请求功能。
25、常见浏览器内核：
IE;Trident;Mozilla(Firefox):Gecko;Chrom:Blink（webkit分支）;Opera:Blink
26、for in 和 for of
for (var key in array)遍历数组的key，是es5的规范，如果该数组自定义新属性，也会被遍历出来（array.name）；for of 是es6新规范，遍历其value
26、XHTML规范：
所有标记都要有相应结束标记；所有标签的元素和属性名都小写；所有XML标记合理嵌套；所有属性必须用引号；所有特殊符号需要编码表示；
27、css reset
css复位，由于各种浏览器解释css样式的初始值不同，对于一个未定义样式的属性，不同浏览器会按照自己默认值为其赋值。因此提前设置一些CSS样式以避免该问题。
28、Doctype
答：doctype是文档类型，指定文档结构，避免浏览器的怪异模式。未声明默认为混杂模式（浏览器使用自己的混杂模式解析渲染页面）。
29、解决IE7IE8兼容问题
怪异模式的盒模型内容宽度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width),table的字体大小不会继承父级元素
页面加入标签<meta http-equiv="X-UA-Compoatible" content="IE=EmulateIE7" />IE8读到这个标签就会启动IE7兼容模式
30、响应式布局的优缺点：
答：优点 能解决不同分辨率设备的显示适应问题；缺点 兼容各种设备工作量大，代码多，效率低下，加载时间长一定程度上改变了网站原有布局结构。
31、websocket：
答：服务器有更新时，需要立即将数据发送给客户端，这就是基于服务器端的推送技术。传统解决方式：ajax的长轮询（每隔一定的时间，客户端就向web服务器发一次请求，请求当前的新数据。）的拉取消息模式。
还有一种long poll方式：long poll 其实原理跟轮询差不多，不过采取的是阻塞模型，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
HTTP 1.1也支持了长连接（PersistentConnection），在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，但仍然还是无状态的。无状态导致每次通信都要发送额外信息确认身份等。
WebSocket为应用层协议，其定义在TCP/IP协议栈之上。特点是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。
优点：
1）通过第一次HTTP Request建立了连接之后，后续的数据交换都不用再重新发送HTTP Request，节因此它省了带宽资源；2) WebSocket的连接是双向通信的连接，在同一个TCP连接上，既可以发送，也可以接收; 3)具有多路复用的功能(multiplexing)，也就是说几个不同的URI可以复用同一个WebSocket连接。
// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");
// 建立 web socket 连接成功触发事件
ws.onopen = function () {
// 使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
// 断开 web socket 连接成功触发事件
ws.onclose = function () {
alert("连接已关闭...");
};32、前后端分离：
首先是要架构上分离解耦，逐渐摆脱前后端在架构上的依赖，前后端各司其职，分开部署在不同的服务器上，通过RESTful接口传递数据。减轻后端服务器的压力，后端服务器不再负责页面渲染，只负责输入数据，吞吐量提升了好几倍。
其次是逻辑分离，不分离的时候，对于业务代码的界限很不明确，业务逻辑基本都放在后端，分离之后，前端承担一部分不该后端来写的业务逻辑，数据处理更加清晰。
最后是系统分离，同一个后端系统，可以将同样的接口数据提供给PC端、Mobile端和Native端等不同的前端终端，不需要为每一种终端提供一套接口。同样，对于前端应用来说，可以更方便的调用多个后端服务器的接口，处理和展示多个系统间的数据。
核心思想：前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前端：页面显示及交互逻辑。用ajax和node作为交互。其中node作为中间层。
后端：提供api接口，利用redis保存session，与数据库交互。
流程：客户端（浏览器）向node请求页面交互；node向后端转发请求；java发送请求到数据库；java返回结果给node，node返回页面提供数据。
优点：1：最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小2：后台错误不会直接反映到前台3：由于后台是很难去探知前台页面的分布情况。所以单单用后台去控制整体页面，又或者只靠JS完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。
具体实现：前端可以不依赖后端，前端自己起一个服务，如果前端页面处理好，后端的API还没有提供，那么，前端可以用mock模拟数据。利用node的express框架开启一个本地服务器，利用node的http-proxy-middleWare插件将客户端发往node的请求转发给真正的服务器，让node作为中间层。
为什么node作为中间层：
主要为了分层开发。前端开发人员不需要知道java后台是如何实现的，也不需要知道API接口是如何实现的，我们只需要关心我们前端的开发工作，并且管理好nodejs前端服务器，而后台开发人员也不需要考虑如何前端是如何部署的，他只需要做好自己擅长的部分，提供好API接口就可以；
nodejs本身有着独特的异步、非阻塞I/O的特点，适合I/O密集型操作，在处理并发量比较大的请求上能力比较强，是一个很好的选择。
前端开发与后台交互的数据格式主要是JSON。
33、数据可视化
以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。
常用的框架有D3.js,echarts.js,hightcharts.js等，其中echarts基于canvas，其他两个基于SVG。
echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中。使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数。
基础配置有如下几个：title:{}标题，legend:{}图标，grid:{}布局(调整图表与div间上下左右留白)，xAxis:{}x轴，yAxis:{}y轴，tooltip:{}图标悬停的提示内容,series:[],必不可少部分用于指定图表类型(饼图，柱状图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts.js案例一</title>
<script type="text/javascript" src='echarts.js'></script>
</head>
<body>
<div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
var options={
//定义一个标题
title:{
text:'测试成绩'
},
legend:{
data:['销量']
},
//X轴设置
xAxis:{
data:['60分','70分','80分','90分','100分']
},
yAxis:{
},
//name=legend.data的时候才能显示图例
series:[{
name:'销量',
type:'bar',
data:['12','32','45','21','1']
}]
};
myChart.setOption(options);
</script>
</html> 
34、SEO搜索引擎优化：
存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。
分类：白帽SEO和黑帽SEO。黑帽SEO，隐藏网页，关键词堆砌，桥页等利用和放大搜索引擎政策缺陷来获取更多用户的访问量。白帽，对网站标题、关键字等精心设置，反映网站的定位使搜索引擎明白网站是做什么的；内容与关键字对应，增加关键字密度；生成针对搜索引擎友好的网站地图。
前端SEO：
1)网站结构布局简单，目录结构不超过三级；控制首页连接数量;导航优化(尽量采取文字形式，图片必须添加alt和title)引入面包屑导航等;控制页面大小，减少http请求，提高网站加载速度;
2)网页优化：title重要关键词放前面；meta keywords关键词，不能过分堆砌；meta description网页描述，高度概括网页内容；body中代码尽量语义化；a标签加title说明，**对于外部链接，加上el="nofollow"告诉蜘蛛不要爬，爬了就回不来了；strong在搜索引擎中能得到高度重视，em次之,b和i对于SEO不会起任何效果；少使用iframe，蜘蛛一般不读取其中内容；搜索引擎会过滤display:none，谨慎使用；h1标签权重也很大，合理使用。
2069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
