第三談

1.

js方面的相容性寫法還有阻止預設事件等等

Var ev = ev || window.event //事件物件
document.documentElement.clientWidth || document.body.clientWidth //可見視窗寬度大小
Var target = ev.srcElement||ev.target //點選目標

2.

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

3.

① 父級div定義height，解決了父級div無法自動獲取到高度的問題
優點：簡單，程式碼少，容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用

② 新增一個空標籤(div/br…)並定義clear：both
優點：簡單，程式碼少，瀏覽器支援好，不容易出現怪問題
缺點：需要填加空標籤，如果多個地方需要清楚浮動，這樣會帶來程式碼冗雜，不利於理解的問題

③ 父級div定義偽類:after和zoom
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多，初學者不易理解原理，要兩句程式碼結合使用，才能讓主流瀏覽器都支援
建議：推薦使用，建議定義公共類，以減少CSS程式碼

④ 父級div定義overflow:hidden
優點：不用定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度，簡單，程式碼少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏

⑤ 父級div定義overflow:auto
優點：不用定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度，簡單，程式碼少，瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，需要出現滾動條或者程式碼不會出現滾動條可以使用。

⑥ 父級div也一起浮動，整體浮動
優點：無
缺點：產生新的浮動問題
建議：不推薦使用，

⑦ 父級div定義display:table，將父級屬性變為表格
優點：無
缺點：產生新的未知問題
建議：不推薦使用，

4.

①基本選擇器：#id、element、.class、*、selector1,selector2,selectorN

②層次選擇器：
ancestor descendant：在給定的祖先元素下匹配所有的後代元素
parent > child：在給定的父元素下匹配所有的子元素
prev + next：匹配所有緊接在 prev 元素後的 next 元素
prev ~ siblings：匹配 prev 元素之後的所有 siblings 元素

③基本篩選器：
：first、:last、:odd、:even、:eq(index)、:gt(index)、:lt(index)…

④內容選擇器
:contains(text)：匹配包含給定文字的元素
:empty：匹配所有不包含子元素或者文字的空元素
:has(selector)：匹配含有選擇器所匹配的元素的元素
:parent：匹配含有子元素或者文字的元素

⑤可見性選擇器
:hidden
:visible

⑥屬性選擇器
[attribute]：匹配所有擁有attribute屬性的元素
[attribute=value]：attribute=value
[attribute!=value]：attribute！=value
[attribute^=value]：value開頭的元素
[attribute$=value]：value結尾的元素
[attribute*=value]：包含value的屬性的元素
[attrSel1][attrSel2][attrSelN]：多個限制條件

⑦子元素選擇器
:first-child
:last-child
:nth-child
:only-child
…

⑧表單選擇器
:input：匹配所有輸入框
:text
:password：匹配所有密碼框
:radio
:checkbox
:submit
:image
:reset
:button
:file

⑨表單物件屬性
:enabled
:disabled
:checked
:selected

⑩混淆選擇器
$.escapeSelector(selector)：用在類選擇器或者ID選擇器中包含一些CSS特殊字元

5.

on(“click”,() => {
對話方塊.show()
})

6.

function loadImage(url, callback) { 
var img = new Image(); //建立一個Image物件，實現圖片的預下載 
img.src = url; 
if (img.complete) { // 如果圖片已經存在於瀏覽器快取，直接呼叫回撥函式 
callback.call(img); 
return; // 直接返回，不用再處理onload事件 
} 
img.onload = function () { //圖片下載完畢時非同步呼叫callback函式。 
callback.call(img);//將回調函式的this替換為Image物件 
}; 
}; 

7.

$(“option:selected”)

8.

//XML檔案內容
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
</CATALOG>

//使用XML資料
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");

XML資料渲染在頁面後的樣子

9.

① CDN快取更方便
② 突破瀏覽器併發限制
③ 節約cookie頻寬
④ 節約主域名的連線數，優化頁面響應速度
⑤ 防止不必要的安全問題

10.

①優化影象

　　影象對於吸引訪客的關注是很重要的。但是你新增到頁面上的每一張圖片都需要使用者從你的伺服器下載到他們的電腦上。這無疑增加了頁面的載入時間，因此很可能讓使用者離開你的網站。所以，優化影象是非常必要的。

　　過大的影象需要的下載時間更多，因此要確保影象儘可能的小。可以使用影象處理工具如PS來減小顏色深度、剪下影象到合適的尺寸等。

②減少DNS查詢(DNS lookups)

　　減少DNS查詢是一個WEB開發人員可以用了頁面載入時間快速有效的方法。DNS查詢需要話費很長的時間來返回一個主機名的IP地址。而瀏覽器在查詢結束前不會進行任何操作。對於不同的元素可以使用不同的主機名，如URL、影象、指令碼檔案、樣式檔案、FLASH元素等。具有多種網路元素的頁面經常需要進行多個DNS查詢，因而花費的時間更長。

　　減少不同域名的數量將減少並行下載的數量，加速你的網站

③最小化重定向

　　重定向增加了額外的HTTP請求，因此也增加了頁面載入時間。然而有時重定向卻是不可避免的，如連結網站的不同部分、儲存多個域名、或者從不存在的頁面跳轉到新頁面。

　　重定向增加了延遲時間，因此要儘量避免使用它。檢查是否有損壞的連結，並立即修復。

④使用內容分發網路（Content Delivery Network CDN）

　　伺服器處理大流量是很困難的，這最終會導致頁面載入速度變慢。而使用CDN就可以解決這一問題，提升頁面載入速度。

　　CDN是位於全球不同地方的高效能網路服務，複製你網站的靜態資源，並以最有效的方式來為訪客服務。

⑤把CSS檔案放在頁面頂部，而JS檔案放在底部

　　把CSS檔案在頁面頂部引入可以逐步渲染，節省瀏覽器載入和重繪頁面元素的資源。JavaScript是用於功能和驗證。把JS檔案放在頁面底部可以避免程式碼執行前的等待時間，從而提升頁面載入速度。

　　這些都是一些減少頁面載入時間和提高轉換率的方法。在某些情況下，需要JavaScript在頁面的頂部載入（如某些第三方跟蹤指令碼）。

⑥去掉不必要的外掛

　　一個非常值得關注但經常被忽略的因素是你網站安裝的外掛。如今，大量免費的外掛誘導網站開發者新增很多不必要的功能。您安裝的每個外掛都需要伺服器處理，從而增加了頁面載入時間。所以禁用和刪除不必要的外掛。

⑦利用瀏覽器快取

　　瀏覽器快取是允許訪客的瀏覽器快取你網站頁面副本的一個功能。這有助於訪客再次訪問時，直接從快取中讀取內容而不必重新載入。這節省了向伺服器傳送HTTP請求的時間。此外，通過優化您的網站的快取系統往往也會降低您的網站的頻寬和託管費用。

⑧使用 CSS Sprites 整合影象

　　多影象的網站載入時間比較久。其中一個解決方法就是把多個影象整合到少數幾個輸出檔案中。你可以使用 CSS Sprites 來整合影象檔案。這樣就減少了在下載其他資源時的往返次數和延遲，從而提高了站點的速度。

⑨壓縮CSS和JavaScript

　　壓縮是通過移除不必要的字元（如TAB、空格、回車、程式碼註釋等），以幫助減少其大小和網頁的後續載入時間的過程。這是非常重要的，但是，你還需要儲存JS和CSS的原檔案，以便更新和修改程式碼。

⑩啟用GZIP壓縮

　　在伺服器上壓縮網站的頁面是提升網站訪問速度非常有效的一種方法。你可以用gzip壓縮做到這一點。Gzip是一個減小發送給訪客的HTML檔案、JS和CSS體積的工具。壓縮的檔案減少了HTTP響應時間。據Yahoo報道，這大概可以減少70%的下載時間。而目前90%的通過瀏覽器的流量都支援Gzip壓縮，因此，這是一個提示網站效能有效的選項。