tonylvv / mianshi Goto Github PK

css3是css的更新标准，是对之前内容的补充，增加了很多新属性，比如：
border-radius:50px
transform: translateX(10px)
transition: all 10s ease-in 1s
animation: animationName 5s linear
box-sizing:border-box
word-wrap:break-word
background-size: 100%
box-shadow:10px 10px 3px green
...
...

position的属性有：static,relative,fixed,absolute.

fixed固定定位：它会脱离文档流，是以视口的左上角为参考系；
relative相对定位：它不会脱离文档流，是以元素当前位置的左上角为参考系；

可继承的属性有：font系列，color，visibility，text-align，word-spacing等。
不可继承的属性：display，width，height，background，margin，float，postion等。

document.body
document.documentElement
document.getElementsByTagName('div');
document.getElementsByClassName('abc');
document.getElementById('id');
document.querySelector('.abc');
document.querySelectorAll('#id');

ele.parentNode
ele.children
ele.childNodes
ele.firstChild
ele.lastChild
ele.firstElementChild
ele.lastElementChild
ele.previousSibling
ele.nextSibling
ele.removeChild
ele.cloneNode(true/false)

常用到的有元素节点、文本节点、注释节点、document
这些节点都有自己特有的属性：nodeType节点类型、nodeName节点名称、nodeValue节点值

nodeType节点类型	  nodeName节点(标签)名称	  nodeValue节点值
元素节点	  1	     大写标签名	          null
文本节点	  3	      #text	                          文本文字
注释节点	  8	     #comment	                  注释内容
document 9	     #document	          null

- 事件对象：
标准: 事件回调函数中的第一个形参默认是event对象
IE：window.event
- 事件源：
标准：event.target
IE: window.event.srcElement
- 绑定事件和解绑事件
标准：ele.addEventListener('click', fn, false) & ele.removeEventListener('click', fn, false)
IE: ele.attachEvent('onclick', fn) & ele.detachEvent('onclick', fn)
- 阻止事件冒泡
标准：event.stopPropagation()
IE: window.event.cancelBubble = true
- 阻止事件默认行为
标准：event.preventDefault()
IE: window.event.returnValue = false

DNS解析、连接、发送、等待、接收

0 未初始化：
var xhr = new XMLHttpRequest()  <状态0表示对象已经存在，否则浏览器会报错－－对象不存在>

1 初始化：
 xhr.open(method, url, true/false)  & xhr.send()  <状态1表示正在向服务端发送请求>

2 接收：
<状态2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备>

3 解析:
解析接收到的服务器端响应数据。
即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。
<状态3表示正在解析数据>

4 解析完成
确认全部数据都已经解析为客户端可用的格式，解析已经完成。
<状态4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。>

GET请求
var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function (){
  if (xhr.readyState == 4 && xhr.status == 200) {
     console.log(xhr.responseText)
  }
}
xhr.open('GET', url, true);
xhr.send(null);

POST请求：
var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.open('POST', url, true);
xhr.send('name=james&age=33');

GET请求：
一般多用于从服务器读取数据。
可传递的数据大小为1KB左右，数据追加在URL中发送。
另外，最重要的是，GET请求可以被浏览器缓存起，安全性差。

POST请求：
一般用于修改服务器数据。
可传递的数据要比GET大的多，并且数据是作为HTTP消息实体内容发送到服务器。
POST请求不会被缓存，安全性高

200：请求成功，服务器已成功处理了请求 
204：服务器成功处理了请求，但是并没有返回任何信息
301：网页永久重定向到新的位置
302：网页临时重定向到新的位置
304：自上次请求后网页没有修改过，服务器返回此响应时不会返回网页内容，此时读取的是缓存数据。
400：报错，服务器不理解请求的语法
403：服务器拒绝请求
404：请求的页面不存在 
500：服务器遭遇未知的错误，无法完成请求
503：服务器目前无法使用
505：服务器不支持请求中用到的HTTP协议版本

不破坏原数组的有：
concat,
join, 
toString,
slice,


破坏原数组的有：
push,
pop,
shift,
unshift,
reverse,
sort,
splice,（第一个参数index可以是负数，-1 即倒数第一位）

1. Ary.sort(function(a,b){return a - b})
2.冒泡
function bbSort(ary){
    var m;
    for(var i = ary.length - 1; i > 0; i--){
        for(var j = 0; j < i; j++) {
            if(ary[j] > ary[j + 1]) {
                m = ary[j + 1];
                ary[j + 1] = ary[j];
                ary[j] = m;
            }
        }
    }
    return ary
}

function bbSort2(ary){
    var m;
    for(var i = 0; i < ary.length; i++){
        for(var j = i + 1; j < ary.length; j++){
            if(ary[j] < ary[i]) {
                m = ary[i];
                ary[i] = ary[j];
                ary[j] = m;
            }
        }
    }
    return ary;
}

function removeDulplicatedFn(ary){
    var obj = {}, aryNew = [];
    for(var i = 0; i < ary.length; i++){
        if(!obj[ary[i] + (typeof ary[i])]){
            obj[ary[i] + (typeof ary[i])] = 1;
            ary2.push(ary[i]);
        }
    }
    return aryNew;
}

a = a + b;
b = a - b;
a = a - b;

- 减少http请求次数
  包括sprite雪碧图合并图片、base64、合并js/css文件等。

- 使用CDN
  用户与服务器的物理距离会影响响应时间，把资源部署在多个地理位置的服务器上能让用户更快的载入页面

- 设置expires和cache-control Http头 （服务器端）
  给请求资源设置较长的过期时间可以让二次访问的加载速度得到提升。记住，如果你设置了较长的过期时间，那么你不得不在改变资源代码之后及时改变文件的名称，即给资源更新版本号。

- Gzip压缩（服务器端）
  在Content-Encoding属性中。由浏览器设置。

-将css写在Head中。
  HTML官方文档里也明确写明样式表应该放在Head中。

- Js放在底部

-  使用外链方式加载css和js
  因为可以设置为缓存外链样式和脚本。

- 减少DNS的查找
  浏览器或电脑系统可以缓存。

- 压缩代码

- 减少重定向301和302
  牢记重定向会拖慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的所有东西，页面无法渲染，组件也无法开始下载，直到HTML文档被送达浏览器。

- 避免重复的相同脚本

- 配置ETag（服务器端）
  实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制（“实体”也就是组件：图片，脚本，样式表等等）。
  添加ETags可以提供一种实体验证机制，比最后修改日期更加灵活。一个ETag是一个字符串，作为一个组件某一具体版本的唯一标识符。
  如果浏览器必须验证一个组件，它用 If-None-Match 请求头来把ETag传回源服务器。如果ETags匹配成功，会返回一个304状态码，这样就减少了响应体。
  ETags存在的问题是它们是由特定服务器构造的，所以如果浏览器从一个服务器获取最初的组件，然后想验证另一个服务器上的相同组件，ETags是无法匹配成功的，而用一群服务器处理请求在web站点中又非常普遍。默认情况下，Apache和IIS会在ETag中嵌入数据，以大大降低在多服务器站点上有效性测试成功的几率。
  如果不想用ETags提供的灵活的验证模型，最好把所有的Etag全都去掉，可以用基于组件的时间戳的 Last-Modified HTTP头验证，而且去掉ETag可以减少HTTP响应头以及后续请求的大小。 Microsoft Support article 里写了怎样移除ETags。

- 让Ajax可以缓存

- 尽快清空缓冲区（服务器端）

- 对Ajax使用Get请求
  使用 XMLHttpRequest 时，浏览器的POST请求是通过一个两步的过程来实现的：先发送HTTP头，在发送数据。所以最好用GET请求，它只需要发送一个TCP报文（除非cookie特别多）。IE的URL长度最大值是2K，所以如果要发送的数据超过2K就无法使用GET了。

- 延迟加载组件

- 减少不必要的DOM数量

- 尽量减少iframe
<iframe> 的优点：
引入缓慢的第三方内容，比如标志和广告
安全沙箱
并行下载脚本

<iframe> 的缺点：
代价高昂，即使是空白的iframe
阻塞页面加载
非语义

- 杜绝404

- 减少不必要的cookie

- 把静态资源放在没有cookie的域中
  当浏览器发送对静态图像的请求时，cookie也会一起发送，而服务器根本不需要这些cookie。所以它们只会造成没有意义的网络通信量，应该确保对静态组件的请求不含cookie。可以创建一个子域，把所有的静态组件都部署在那儿。

- 减少访问DOM
  缓存访问的DOM元素可以减少不必要的性能损失。
 为了让页面反应更迅速，应该：
 缓存已访问过的元素的索引；
 先“离线”更新节点，再把它们添到DOM树上；
 避免用JavaScript修复布局问题。

- 多使用事件委托

- 选择<link>舍弃@import
 在IE中用 @import 与在底部用 <link> 效果一样，所以最好不要用它。

- IE避免使用滤镜

- 优化图片类型等

- 优化图片sprite

- 保证所有的静态资源都小于25K
  因为iphone不会缓存大于25K的文件。

- 避免img的src是空值
  因为浏览器还是会发起请求，浪费性能。

合适的标签做合适的事。
最简单的检查方式是，将样式删除后看看是否还能读懂页面的信息。

常见的块级元素：div,p,li,ol,ul,h1-h6,table等。
行内元素：a,span,label,em,input等。

区别：

块级元素：a.总是在新行上开始；b.宽高和行高都是可控制的；c.宽度默认是它容器的100%；d.它可容纳块级元素和行内元素。

行内元素：a.和其他行内元素在一行上；b.宽高不可改变，行高可以；c.宽度是内部的文字或图片的大小。

none:隐藏元素；

block:块级元素；

inline:行内元素；

inline-block:行内块元素；

list-item：列表元素；

run-in：该元素将根据内容被作为块元素还是行内元素；

table:表格元素；

table-cell：单元格，类似tr；

table-row：表格行，类似td或th；

display:none
visibility:hidden
height:0
opacity:0
定位超出屏幕
z-index

方法一：绝对定位
html,body {margin:0; padding:0; height: 100%; } 
#left, #right { position: absolute; top:0; width: 220px; height: 100%; } 
#left { left:0; } 
#right { right:0; } 
#main { margin: 0 230px; height: 100%; }
<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>

方法二：浮动方法
#left,
#right { float: left; width: 220px;height: 200px; background: blue; } 
#right{ float: right; } 
#main {margin: 0 230px; background: red; height: 200px; }
<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>

方法三：负的margin值
#main {float: left; width: 100%; } 
#mainContainer {margin: 0 230px; height: 200px; background: green; } 
#left {float: left; margin-left: -100%; width: 230px } 
#right { float: left; margin-left: -230px;width: 230px; } 
#left .inner,#right .inner { background: orange; margin: 0 10px; height: 200px; }
<div id="main">
     <div id="mainContainer">main content</div>
</div>
<div id="left">
    <div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
    <div id="rightContainer" class="inner">right</div>
</div>