前端知識小總結2

時間 2019-11-17

標籤前端知識總結简体版

原文原文鏈接

（暫時撇開內容、樣式、行爲的分離）javascript

一：css

1-語義化及語義化標籤html

標籤的語義化，是指在看到標籤名的狀況下基本能理解它所表明的含義，比較直觀，便於瀏覽器的解析和閱讀。java

語義化的優勢，（1）爲了在沒有css的狀況下，頁面也能呈現出很好地內容結構、代碼結構（2）有利於用戶體驗（3）有利於SEO和搜索引擎創建良好的溝通。（4）方便其餘設備解析以意義的方式來渲染網頁、（5）便於團隊開發和維護，增長可讀性。jquery

語義化的標籤，<h1>~<h6> 、<p>、 <ul>、<ol>、<li>，<ul> 、<dl>、<dt>、<dd>，<dl> 、<em>、<strong>（<em> 是用做強調，<strong> 是用做重點強調）、<table>、<td>、<th>、<caption>、< title></title>、<header></header>、<nav></nav>、<article></article>、<section></section>、<aside></aside>、<footer></footer>、<figure></figure>、<cite></cite>、<figcaption></figcaption>（figure的標題，必須是figure內嵌的第一個或者最後一個元素。）、<cite></cite>（指明引用或者參考）、<blockquoto></blockquoto>、<q></q>（短的引述）、<time></time>（標記時間）、<address></address>（做者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的連接）。）等。web

2-佈局ajax

（一）居中佈局chrome

（水平居中）canvas

（1）文字水平居中：能夠將文字放置在p標籤內，而後對p標籤設置text-align:center;後端

（2）圖片水平居中：將圖片設置爲block塊狀顯示，而後設置margin：0 auto；或者將img標籤放置在div內，而後一樣地設置margin。

（3）定寬塊狀元素：設置寬高背景色，而後設置margin：0 auto；

（4）不定寬元素：方法1，將display設置爲table，margin：0 auto；方法2，父元素設置text-align:center; ，子元素中設置display:inline-block; 居中內容放在父元素或子元素均可以。方法3，position:absolute;left:50%;transform:translateX(-50%);方法4，display:flex; justify-content: center; 方法5，父元素設置float:left;position:relative;left:50%;，子元素設置position:relative;left:-50%;且水平居中內容放在子元素中。

（垂直居中）

（1）單元格中內容：直接設置vetical-align：middle；

（2）定寬元素：單行文本：垂直居中的方法是經過設置父元素的 height 和 line-height 高度一致來實現height:100px；line-height: 100px;

（3）不定寬元素：方法1，position: absolute;top:50%;transform: translateY(-50%); 方法2，<div ><div>awdfad</div></div>I E9以上。

（水平垂直居中）

（1）定寬元素：width:100px; height:80px; position:absolute; left:50%; top:50%; margin:-40px 0 0 -50px; background-color: blanchedalmond; 要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，而後設置位置爲絕對位置，距離頁面窗口左邊框和上邊框的距離設置爲50%，這個50%就是指頁面窗口的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。

（2）不定寬元素：方法1，position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); 。（IE9以上兼容，適合移動端）方法2，display: flex;justify-content: center;align-items: center;（IE9以上兼容，適合移動端，測試有問題）。方法3，<div ><div >sdscsddd</div></div> （測試有問題）

Js實現水平垂直居中：（IE中能夠，Chrome只是垂直居中）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
   $(window).resize(function(){
       $(".mydiv").css({
           position:"absolute",
           left:($(window).width()-$(".mydiv").outerWidth())/2,
           top:($(window).height()-$(".mydiv").outerHeight())/2,
       });
   });
    $(function(){
        $(window).resize();
    })
</script>
</body>
</html>

（二）多列布局

（一列定寬+一列自適應）

（1）float+margin：左邊左浮動，右邊的左外邊界與左邊元素寬度一致。
    <style type="text/css">
        .left{
            float:left;
            width:100px;
            background-color: antiquewhite;
        }
        .right{
            margin-left:100px;
          background-color: aqua;
        }
    </style>

<body>
<div>
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p><p>right</p></div>
</div>
</body>

（2）float+overflow：左邊元素左浮動，並設置寬度，及右外邊界爲0；右邊元素設置overflow屬性，值爲hidden。

    <style type="text/css">         .left{             float:left;             width:100px;             background-color: antiquewhite;             margin-right:0px;         }         .right{             overflow:hidden;             background-color: aqua;         }     </style> <body> <div>     <div class="left"><p>left</p></div>     <div class="right"><p>right</p><p>right</p></div> </div> </body> ps：overflow屬性規定當內容溢出時元素框發生的事情。其屬性值有：visible（默認值，內容不會被裁剪，會呈如今元素框以外）、hidden（內容會被裁剪，且其他內容是不可見的）、scroll（內容會被裁剪，但瀏覽器會顯示滾動條以方便查看其他內容）、auto（若是內容被裁剪，則瀏覽器會顯示滾動條方便查看其他內容）、inherit（規定從父元素繼承overflow屬性值）。

（3）flex：父元素設置display：flex；左邊設置寬度和右外邊界margin爲0,；右元素設置flex爲1。
    <style type="text/css">
       .parent{
           display: flex;
           display:-webkit-box;
       }
        .left{
            width:100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
           flex: 1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

或

    <style type="text/css">
        .mydiv{
            display:flex;//Opera12.1，Firefox20+，
            display:-webkit-box;//Safari3.1-6，iOS 6-
            display:-moz-box;// IE9-，
            display:-ms-flexbox;//IE10，
            display:-webkit-flex;//Chrome
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1; //Opera12.1，Firefox20+，
            -webkit-box-flex:1; //Safari3.1-6，iOS 6-
            -moz-box-flex:1; // IE9-，
            -webkit-flex:1; //Chrome
            -ms-flex:1; //IE10

        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

ps：chrome52.0、IE十一、Firefox48.0、Opera44.0、 Safari5.1.7

（多列定寬+一列自適應）

定寬列樣式基本相同。

（1）float+overflow：

    <style type="text/css">
        .left,.center{
            float: left;
            width:100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（一列不定寬+一列自適應）

（1）float+overflow:左邊左浮動，右邊overflow爲hidden。

    <style type="text/css">
        .left{
            float:left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（2）flex：父元素display設爲flex；左元素設置右外邊界爲0，右元素flex爲1

<style type="text/css">
        .parent{
            display: flex;
            display: -webkit-box;
        }
        .left{

            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            flex:1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（多列不定寬+一列自適應）

跟不定寬一列樣式基本相同。

（1）float+overflow:

    <style type="text/css">
        .left{
            float: left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .center{
            float: left;
            background-color: aquamarine;
            margin-right:0;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（三）等列布局

（1）flex：

    <style type="text/css">
        .mydiv{
            display:flex;
            display:-webkit-box;
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1;
            -webkit-box:1;
        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>

<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>
（2）float+margin-left：

<style type="text/css">
        .div1{
            float:left;
            background-color: aqua;
            width:100px;
        }
        .div2{
            float:left;
            margin-left:6px;
            background-color: antiquewhite;
            width:100px;
        }
      .div3{
          float:left;
          margin-left:6px;
          background-color: blueviolet;
          width:100px;
      }
      .div4{
          float:left;
          margin-left:6px;
          background-color: chartreuse;
          width:100px;
      }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

（3）百分比

<style type="text/css">
        .div1{
            background-color: chartreuse;
            float:left;
            width:20%;
        }
        .div2{
            background-color: aqua;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
        .div3{
            background-color: blueviolet;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
       .div4{
            background-color: coral;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .div1{
           background-color: chartreuse;
           float:left;
           width:25%;
       }
       .div2{
           background-color: aqua;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
       .div3{
           background-color: blueviolet;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
       .div4{
           background-color: coral;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .mydiv{
           margin-left:-20px;
       }
        .div1{
            background-color: chartreuse;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div2{
            background-color: aqua;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div3{
            background-color: blueviolet;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div4{
            background-color: coral;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

    <style type="text/css">
         .div1{
           background-color: aqua;
            float:left;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
              }
        .div2{
            float:left;
            margin-left:20px;
            background-color: antiquewhite;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);

        }
        .div3{
            float:left;
            margin-left:20px;
            background-color: blue;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
        }
        .div4{
            float:left;
            margin-left:20px;
            background-color: cyan;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
        }
    </style>
<div class="mydiv">
    <div class="div1"><p>1</p></div>
    <div class="div2"><p>1</p></div>
    <div class="div3"><p>1</p></div>
    <div class="div4"><p>1</p></div>
</div>

Ps：Safari5.1.7不支持calc（）

Ps：calc（）：能夠計算元素的長度，可使用百分比、em、px、rem等。Width:calc(表達式)；能夠經過+、-、*、/運算符；可使用百分比、px、em、rem；運算符+、-其先後必須有空格。

Ps：box-sizing屬性值有content-box/border-box/inherit。其中，content-box，寬度和高度分別應用到元素的內容框，在寬度和高度以外繪製元素的內邊距和邊框。border-box爲元素設定的寬度和高度決定了元素的邊框盒，即爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。inherit規定從父元素繼承bo-sizing屬性值。

（四）內容不一樣時，背景等高

（1）flex：默認等高

    <style type="text/css">
        .parent{
            display:flex;
        }
        .left{
            width:100px;
           background-color: blueviolet;
        }
        .right{
            flex:1;
            background-color: antiquewhite;
        }
    </style>

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

（2）float僞等高

<style type="text/css">
        .parent{
            overflow:hidden;
        }
        .left,.right{
            padding-bottom:9999px;
            margin-bottom:-9999px;
        }
        .left{
            float:left;
            width:100px;
            margin-right:6px;
            background-color: coral;
        }
        .right{
            overflow: hidden;
            background-color: aquamarine;
        }
    </style>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

3-盒子模型

網頁中的元素能夠看做一個盒子模型，而盒子模型包括content/padding/border/margin/四部分。盒子模型主要有兩類，即W3C盒子模型和IE盒子模型。其中，W3C盒子模型給定的width不包括padding/border；而IE盒子模型的給定的width已經包含 padding/border。height相似。

eg.一個盒子模型margin爲20px，border爲1px，padding爲10px，content寬爲200px，高爲50px。

若是用W3C盒子模型解釋，則這個盒子須要佔據的位置爲寬：200+10*2+1*2+20*2=262px，高爲：50+10*2+1*2+20*2=12px，盒子的實際大小爲：寬200+10*2+1*2=222px，高50+10*2+1*2=72px。
若是用IE盒子模型解釋，則這個盒子須要佔據的位置爲寬：200+20*2=240px，高爲：50+20*2=70px；盒子的實際大小：寬200px，高50px。

4-兼容性問題

Safari 5.1.7不支持calc（），而flex須要css hack解決

5-H5 canvas

<canvas> 標籤訂義圖形，好比圖表和其餘圖像。<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。

canvas元素繪製圖像的兩種方法：context.fill()//填充 context.stroke()//繪製邊框

繪圖的樣式：context.fillStyle//填充的樣式 context.strokeStyle//邊框樣式

context.lineWidth//圖形邊框寬度

eg.

矩形：

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='blue';

ctx.fillRect(0,0,60,66);

</script>

圓：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

線條：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);//定義線條開始座標

cxt.lineTo(150,50);//定義線條結束座標

cxt.lineTo(10,50);

cxt.stroke();//stroke（）方法繪製線條

漸變色：

建立漸變線條：createLinerGradient(x,y,x1,y1)

建立一個徑向/圓漸變：createRadialGradient(x,y,r,x1,y1,r1);

//建立一個線性漸變，使用漸變填充矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

//建立漸變

var grd=cxt.createLinearGradient(0,0,175,50);//漸變色

grd.addColorStop(0,"#FF0000"); //指定顏色中止，參數用座標描述，0至1.

grd.addColorStop(1,"#00FF00");

//填充漸變

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

//建立一個徑向/圓漸變，使用漸變填充矩形

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

// 建立漸變

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// 填充漸變

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

圖像：把一幅圖像放到畫布上，drawImage（image，x，y）

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var

img=document.getElementById("scream");

ctx.drawImage(img,10,10);

ps：canvas左上角的左標爲（0,0）

圓：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath(); //arc(x,y,r,start,stop)

ctx.arc(95,50,40,0,2*Math.PI);

ctx

.stroke()

使用 canvas 繪製文本:

font - 定義字體

fillText(text,x,y) - 在 canvas 上繪製實心的文本

strokeText(text,x,y) - 在 canvas 上繪製空心的文本

eg.

實心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx

.font="30px Arial";

ctx.fillText("Hello World",10,50);

空心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx

.strokeText("Hello World",10,50);

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素自己上，而是定義在經過畫布的 getContext() 方法得到的一個」繪圖環境」對象上。

Canvas API 也使用了路徑的表示法。可是，路徑由一系列的方法調用來定義，如調用 beginPath() 和 arc() 方法。一旦定義了路徑，其餘的方法，如 fill()，都是對此路徑操做。繪圖環境的各類屬性，好比 fillStyle，說明了這些操做如何使用。

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您能夠控制其每一像素。canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

6-Localstorage、sessionstorage、cookie

H5中的webstorage包括了兩種存儲方式：sessionStorage和localStorage。存儲空間相對較大，僅僅是爲了本地存儲數據而生，更多接口，獨立的存儲空間

sessionStorage：會話級別的存儲，會話結束數據消失，

localStorage：持久化的本地存儲，除非主動刪除數據，不然數據不會過時，

cookie：存儲空間小，與服務器進行交互，做爲http的一部分而存在，

7-性能優化

減小http請求：

² css精靈：將多個圖片合併到一個單獨的圖片中。

<div style=」background-image:url(‘a_lot_of_imgs.gif’); background-position:-260px -90px ; width:26px; height:24px;」>

</div>

<style type="text/css">
        #navbar{
            width:31px;
            height:31px;
            display:inline;
            float:left;
            background-image: url(/images/66.gif);
        }
        .home{
            background-position: 0 0;
            margin-right:4px;
          margin-left:4px;
        }
        .gifts{
            background-position: -32px 0;
            margin-right:4px;
        }
        .cart{
            background-position: -64px 0;
            margin-right: 4px;
        }
        .settings{
            background-position: -96px 0;
            margin-right:4px;
        }
        .help{
            background-position: -128px 0;
            margin-right:4px;
        }
    </style>
<div id="navbar" style="border:2px ridge #333;width:180px;height:32px;padding:4px 0 4px 0;" >
    <a href="javascript:alert('home')" title="Home"><span class="home"></span></a>
    <a href="javascript:alert('gifts')" title="Gifts"><span class="gifts"></span></a>
    <a href="javascript:alert('cart')" title="Cart"><span class="cart"></span></a>
    <a href="javascript:alert('settings')" title="Settings"><span class="settings"></span></a>
    <a href="javascript:alert('help')" title="Help"><span class="help"></span></a>
</div>

² 圖片地圖：在一個圖片上關聯多個超連接的圖片。包括服務器端圖片地圖（將全部點擊提交到同一個目標URL，向其傳遞用戶點擊的x、y座標，web應用程序根據該x、y座標映射爲適當的操做。）與客戶端圖片地圖（將用戶的點擊映射到一個操做，無需向後端應用程序發送請求。映射經過HTML的map標籤實現。）兩種。

<img usemap="#map1" border=0 src="/images/66.gif?t=1196816255"/>
<map name="map1">
    <area shape="rect" coords="0 0 31 31" href="home.html" title="home">
    <area shape="rect" coords="36 0 66 31" href="gifts.html" title="gifts">
    <area shape="rect" coords="71 0 101 31" href="cart.html" title="cart">
    <area shape="rect" coords="106 0 136 31" href="settings.html" title="settings">
    <area shape="rect" coords="141 0 171 31" href="help.html" title="help">
</map>

² 內聯圖片：經過使用data:URL模式能夠在web頁面中包含圖片但無需額外的http請求。

² 合併樣式及腳本文件、

使用內容發佈網絡

內容發佈網絡（CDN）是一組分佈在多個不一樣地理位置的web服務器，用於更加有效地向用戶發佈內容。

添加Expires頭

長久的Expires頭，可使組件存在於緩存，避免沒必要要的http請求，其能夠用於圖片、腳本、樣式表等

Expires：Mon，15 Apr 2024 20:00:00 GMT

Cache-Control： max-age=315360000 Cache-Control使用max-age指令指定組件被緩存多久，以秒爲單位。Cache-Control具備優先權。

壓縮組件

經過減少http響應的大小來減小響應時間。

Web客戶端能夠經過http請求中的Accept-Encoding頭來表示對壓縮的支持。Accept-Encoding： gzip，deflate

Web服務器經過響應中的Content-Encoding頭來通知web客戶端。Content-Encoding：gzip

壓縮對象：html文檔、樣式表、腳本

若是是瀏覽器經過代理髮送請求，能夠選擇在web服務器的響應頭中添加Vary頭，web服務器能夠告訴代理根據一個或多個請求頭來改變緩存的響應。Vary：Accept-Encoding

將樣式表放在頂部

爲了不無樣式內容閃爍及白屏

將腳本放在底部
避免css表達式

css表達式致使頻繁的求值操做，能夠經過一次性表達式與事件處理器來取代css表達式。

使用外部JavaScript和css

主要源於外部文件能夠緩存

減小DNS查詢

Dns查找能夠被緩存起來提升性能。

精簡JavaScript

精簡，從代碼中移除沒必要要的字符以減少大小。混淆，一樣移除註釋和空白，還可能改寫代碼，將較長的變量名改成更短的變量名。

避免重定向

重定向指將用戶從一個URL從新路由到另外一個URL，301,302經常使用的兩種重定向方式。

刪除重複腳本

重複腳本的產生多是因爲不一樣團隊貢獻資源時，可能同時提供了相同的腳本，這可能致使沒必要要的http請求和執行JavaScript浪費的時間。

=》腳本管理模塊

配置ETag

Etag：實體標籤，是web服務器和瀏覽器用於確認緩存組件有效性的一種機制。Etag能夠用於檢測瀏覽器緩存中的組件與原始服務器上的組件是否匹配。（實體，組件的另外一種稱呼）Etag爲驗證明體提供了比最新修改日期更爲靈活的機制。

Etag問題：一般使用組件的某些屬性來構造它，這些屬性對於特定的、寄宿了網站的服務器來講是惟一的。當瀏覽器從一臺服務器上獲取了原始組件，而後再向另一臺不一樣的服務器發起條件GET請求時，Etag是不會匹配的。這樣將會下降有效性驗證的成功率，也下降了代理緩存的效率。=》配置或移除Etag

使用ajax可緩存

確保ajax請求遵照性能指導，尤爲應具備長久的Expires頭

8-文檔類型

² HTML5：<!doctype>

² HTML 4.01:

Ø  HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ø  HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Ø  HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

² XHTML 1.0：

Ø  XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ø  XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ø  XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

9-行內元素、塊元素、空標籤

行內元素：

不佔據一整行，隨內容而定
不能夠設置寬高，也不能夠設置行高，其寬度隨着內容增長，高度隨字體大小而改變。
能夠設置外邊界，可是隻有左、右外邊界起做用。
能夠設置內邊界，可是隻有左、右內邊界起做用
<a>、<b>、<br>、<em>、<font>、<i>、<select>、<input>、<label>、<span>、<strong>、、、

塊元素：

老是在新行上開始，佔據一整行；
高度，行高以及外邊距和內邊距均可控制；
寬帶始終是與瀏覽器寬度同樣，與內容無關；
它能夠容納內聯元素和其餘塊元素。
<div>、<dl>、<dt>、<dd>、<form>、<h1>、<ol>、<p>、<ul>、、、

空標籤：

<br> 、<hr>、<img>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。