标签：优缺点 sdn 用户体验 接收 ie8 盒子模型 自己 手动测试 rem
缺点：
1)Cookie的数量和长度的限制
每个域的cookie总数有限
a）IE6或更低版本最多20个cookie
b）IE7和之后的版本最多可以有50个cookie
c）Firefox最多50个cookie
d）Chrome和Safari没有做硬性限制
长度：每个cookie长度不超过4kb，否则会被截掉
2）潜在的安全风险
Cookie可能被拦截、篡改，如果cookie被拦截，就有可能取得所有的session信息。
3）用户配置为禁用
有些用户禁用了浏览器或客户端设备接受cookie的能力，因此限制了这一功能。
4）有些状态不可能保存在客户端
例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
优点：极高的扩展性和可用性
1)数据持久性
2）不需要任何服务器资源。cookie存储在客户端并在发送后由服务器读取。
3）可配置到期规则。控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到过期的cookie
4）简单性。基于文本的轻量结构。
5）通过良好的编程，控制保存在cookie中session对象的大小。
6）通过加密和安全传输技术（SSL），减少cookie被破解的可能性
7）在cookie中存放不敏感数据，即使被盗也没事。
在较高版本的浏览器中，js提供了sessionstorage和globalstorage。在h5中提供了localstorage来取代globalstorage。
h5中的web Storage包括了两种存储方式：localstorage和sessionstorage
sessionstorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localstorage用于持久话的本地存储，除非主动删除数据，否则数据是永远不会过期的。
1）存储空间的不同。
web storage能提供5MB的存储空间（不同浏览器的提供空间不同），cookie仅4kb。
web storage每个域的（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
2）与服务器交互
web storage 中的数据仅仅是保存在本地，不会与服务器进行交互。cookie的内容会随着请求一并发送到服务器（每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽）
3）接口
web storage 提供更多丰富易用的接口，拥有setitem、getitem、removeitem、clear等方法，操作数据更方便。
cookie需要前端开发者自己封装setcookie，getcookie。
4）跨域问题
cookie需要指定作用域，不可跨域调用。
说明：cookie也是不可或缺的，cookie作用是与服务器进行交互，作为http规范的一部分而存在，而web storage仅仅是为了在本地“存储”数据而生。
display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在。
visibility：hidden隐藏对应的元素，但在文档布局中仍保留原来的空间。
1）link属于HTML标签，而@import是CSS提供的
2）导入语法不同
<link rel="stylesheet" href="css.css">
<style>
@import url("css.css");
</style>
3）加载时间
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
4）兼容性
import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
共同点：
1）改变行内元素的呈现方式，display被置为inline-block
2）让元素脱离普通流，不占据空间；
3）默认会覆盖到非定位元素上。
不同点：
absolute的“根元素”是可以设置的，fixed的根元素固定为浏览器窗口，当你滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。
1）盒模型：根据字面我们可以理解，CSS盒子也是像生活中的盒子一样拿来装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。它包含四个部分，从里到外依次是：内容（content）、填充（padding）、边框（border）、边界（margin）
2）有两种盒子模型。IE盒子模型、标准W3C盒子模型；W3C的content包含了IE盒子模型的content、padding和border。
1）CSS选择符
id选择器
类选择器
标签选择器
相邻选择器（+）
子选择器（>）
后代选择器（空格）
通配符选择器（*）
属性选择器（a[ rel = "external"]）
伪类选择器（a:hover，li:nth-child）
2）可继承属性
font-size
font-family
color
text-indent
3）不可继承属性
border
padding
margin
width
height
4）id是100，类是10，标签是1，内联样式表为1000
5）CSS新增伪类
first-of-type
last-of-type
only-of-type
only-child
nth-child(n)
:enable:disabled 控制表单控件的禁用状态
：checked 单选框或复选框被选中
display：
1）display：block 像块元素一样显示
2）display：inline 像行内元素一样显示
3）display：inline-block 像行内元素一样显示，但其内容像块元素一样显示
4）display: list-item; 像块元素一样显示，并添加样式列表标记
position：
1）absolute 绝对定位，相对于第一个祖先元素进行定位
2）fixed 相对于浏览器窗口进行定位（老IE不支持）
3）relative 相对定位，相对于在普通流中的位置进行定位
4）static 默认值，没有定位，出现在正常的流当中
5）inherit 规定从父元素继承position的值
答案：string,boolean,number,undefined,function,object
答案：强制（parseInt,parseFloat,number）
隐式（== ===）
答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串
答案：push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
答案：
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
答案：
一个在url后面 ，一个放在虚拟载体里面
get有大小限制(只能提交少量参数)
安全问题
应用不同 ，请求数据和提交数据
答案：
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
答案：使用JSON.parse
答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
答案：闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露
答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
答案：(1)return false；(2) ev.preventDefault();
答案：
1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
答案：动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
答案：document.onload 是在结构和样式,外部js以及图片加载完才执行js
document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)
答案：前者会自动转换类型,再判断是否相等
后者不会自动类型转换，直接去比较
在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?
问两处console输出什么？为什么？
答案:是1和undefined。
func是在window的上下文中被执行的，所以不会访问到count属性。
for(var i = 1; i <= 3; i++){ //建议使用let 可正常输出i的值
setTimeout(function(){
console.log(i);
},0);
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。
box.onlick= function(){}
box.addEventListener("click",function(){},false);
<button onclick="xxx()"></button>
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
var a = null;
alert(typeof a);
答案：object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
var reg=/^[a-zA-Z]\w{5,29}$/;
<script>
var a = 100;
function test(){
alert(a);
a = 10; //去掉了var 就变成定义了全局变量了
alert(a);
}
test();
alert(a);
</script>
正确答案是： 100， 10， 10
全局变量：当前页面内有效
局部变量：函数方法内有效
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
Flash ajax对比
(1)Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
(2)ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr]
}
}
var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
var obj = inputs[i];
if(obj.type==‘checkbox‘){
checkboxArray.push(obj);
}
}
String.prototype.trim= function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
javascript语言实现继承机制的核心就是 1 (原型)，而不是Java语言那样的类式继承。Javascript解析引擎在读取一个Object的属性的值时，会沿着 2 (原型链)向上寻找，如果最终没有找到，则该属性值为 3 undefined；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。
Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
Math.max(a,b,c);//最大值
Math.min(a,b,c)//最小值
使用prototype原型来实现。
readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台
主要数据类型：string, boolean, number
复合数据类型：function, object
特殊类型：undefined，null
try{
}catch(e){
}finally{
}
(1)创建对象
var xhr = new XMLHttpRequest();
(2)打开请求
xhr.open(‘GET‘, ‘example.txt‘, true);
(3)发送请求
xhr.send(); 发送请求到服务器
(4)接收响应
xhr.onreadystatechange =function(){}
(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
(2)当readystate==4时，表示已经接收到全部响应数据。
(3)当status ==200时，表示服务器成功返回页面和数据。
(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。
(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象
alert
confirm
prompt
var uname = ‘jack‘
function change() {
alert(uname) // ?
var uname = ‘lily‘
alert(uname) //?
}
change()
分别alert出 undefined，lily，（变量声明提前问题）
可视区域距离页面顶部的距离
scrollTop=document.documentElement.scrollTop||document.body.scrollTop
(1)innerXXX（不兼容ie）
window.innerHeight 可视区高度，包含滚动条宽度
window.innerWidth 可视区宽度，包含滚动条宽度
(2)document.documentElement.clientXXX(兼容ie)
document.documentElement.clientWidth可视区宽度，不包含滚动条宽度
document.documentElement.clientHeight可视区高度，不包含滚动条宽度
(1)元素节点：nodeType ===1;
(2)文本节点：nodeType ===3;
(3)属性节点：nodeType ===2;
innerHTML(元素内包含的内容）
outerHTML(自己以及元素内的内容）
(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）
(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高
冒泡排序
var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
if (array[j] > array[j + 1]){
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
}
}
var oldObject ="sdf";
var newObject = JSON.parse(JSON.stringify(oldObject));
console.log(newObject);
或者
var a = ‘dddd‘;
function cp(a){return JSON.parse(JSON.stringify(a))}
console.log(cp(a));
function(url, fn) {
var obj = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
obj.open(‘GET‘, url, true);
obj.onreadystatechange = function() {
if(obj.readyState == 4 && obj.status == 200||obj.status == 304) {
loading.style.display = "none"
} else {
alert("不能点击,哈哈哈!");
}
};
obj.send(null);
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
new Array(10000).fill(‘‘).map((_, index) => index + 1).filter(item => /0/.test(item)).reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
var arr=[[1,2],[3,4]];
function Jw(obj){
return Array.prototype.concat.apply([],obj);
}
Jw(arr);
···
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([?&=]+)=([?&=]*)/g;
search.replace(reg, function (rs, 2) {
var name = decodeURIComponent(2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}
···
···
var str = ‘asdfssaaasasasasaa‘;
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = ‘‘;
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert(‘出现次数最多的是:‘+iIndex+‘出现‘+iMax+‘次‘);
···
···
//假设一个中文占两个字节
var str = ‘22两是‘;
alert(getStrlen(str))
function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json[‘len‘]++;
}
};
return json[‘len‘]+str.length;
}
···
···
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
if(!json[arr[i]]){
json[arr[i]] = true;
}else{
json[arr[i]] = false;
}
if(json[arr[i]]){
arr2.push(arr[i]);
}
};
for (var i = 0; i < arr.length; i++) {
if(!aa(arr[i], arr2)){
arr2.push(arr[i])
}
};
function aa(obj, arr){
for (var i = 0; i < arr.length; i++) {
if(arr[i] == obj) return true;
else return false;
};
}
alert(arr2)
···
事件： 如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this
···
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = ‘sdfsdf‘;
var json2 = clone(json);
alert(json[‘c‘])
function clone(obj){
var oNew = new obj.constructor(obj.valueOf());
if(obj.constructor == Object){
for(var i in obj){
oNew[i] = obj[i];
if(typeof(oNew[i]) == ‘object‘){
clone(oNew[i]);
}
}
}
return oNew;
}
···
···
typeof(obj) == ‘string‘
obj.constructor == String;
···
···
var oDate = new Date();
var oYear = oDate.getFullYear();
var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();
var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS
···
内容使用特定标签，通过标签就能大概了解整体页面的布局分布
确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作
由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面
影响浏览器对html代码的编译渲染
html2.0
xHtml
html5
盒模型解释不同
子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。
js模块化mvc（数据层、表现层、控制层）
seajs
命名空间
对内：模块模式
对外：继承
代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释
子构造函数中执行父构造函数，并用call\apply改变this
克隆父构造函数原型上的方法
创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数
···
var a = 2, b = 3;
var c = a+++b; // c = 5
···
···
// 以下代码执行输出结果是什么
function b () {
console.log(a);
var a = 10;
function a() {};
a = 100;
console.log(a);
}
b();
function c () {
console.log(a);
function a() {};
var a = 10;
a = 100;
console.log(a);
}
c();
(function d (num) {
console.log(num);
var num = 10;
}(100))
(function e (num) {
console.log(num);
var num = 10;
function num () {};
}(100))
(function f (num) {
function num () {};
console.log(num);
var num =10
console.log(num);
}(100))
//仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
function m () {
console.log(a1); // underfined
console.log(a2); // underfined
console.log(b1); // underfined
console.log(b2); // underfined
if(false) {
function b1 (){};
var a1 = 10;
}
if(true) {
function b2 (){};
var a2 = 10;
}
console.log(a1); // underfined
console.log(a2); // 10
console.log(b1); // underfined
console.log(b2); // function
}
m();
function n() {
if(2>1) {
arr = 10;
brr = 10;
let arr;
var brr;
console.log(arr);
console.log(brr);
}
}
n(