文章目錄
1 瀏覽器兼容問題
略過了一些IE 6/7,選擇了相對常見的問題進行總結。
1.1 CSS部分
1.1.1 消除默認樣式
(1) 引入Normalize.css/reset.css
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
(2) 通配符 *{margin: 0; padding: 0;}
1.1.2 H5標籤不識別
針對IE9以下瀏覽器對於h5新增標籤不識別的問題，引入html5shiv.js
<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
1.1.3 IE屬性過濾器
針對不同的IE瀏覽器，使用不同字符對特定版本瀏覽器進行樣式控制。
_color，*color，color:red\9 分別針對IE6，IE6/7，IE8及以下瀏覽器
1.1.4 清除浮動
.clearfix:after{
display:block;
clear:both;
content:'.';
visibility:hidden;
height:0;
}
.clearfix{//IE 6/7
*zoom:1;
}
1.2 JS部分
1.2.1 鍵盤碼keyCode
IE、FireFox、Chrome和Safari的event對象都支持一個charCode屬性，這個屬性只有在發生keypress事件時才包含值，代表按鍵字符表示的ASCII碼。此時的keyCode通常等於0或者按鍵鍵碼。IE8及之前版本和Opera則是在keyCode中保存字符的ASCII碼。
var EventUtil={
getCharCode:function(event){
if(typeof event.charCode=='number'){
return event.charCode;
}else{
return event.keyCode;
}
}
}
1.2.2 窗口大小
三者區別參考 https://www.cnblogs.com/kongxianghai/p/4192032.html
clientWidth：內容可視區寬度
offsetWidth：元素實際寬度(包括滾動條)
scrollWidth：實際內容寬度
var client_w=document.documentElement.clientWidth||document.body.clientWidth;
var client_h=document.documentElement.clientHeight||document.body.clientHeight;
同理可得 scrollWidth/scrollHeight offsetWidth/offsetHeight scrollTop
documentElement針對使用了DTD的文檔，body針對沒有使用DTD的文檔
1.2.3 跨瀏覽器的事件處理程序
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if(element.attachEvent){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=handler
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){
element.detachEvent('on'+type,handler)
}else{
element['on'+type]=null
}
}
}
JS部分還有很多類似的例子，以上只是一小部分。有問題的地方歡迎指正。
2 移動端click延遲300ms
參考 https://thx.github.io/mobile/300ms-click-delay
ios爲了分辨是縮放還是點擊而出現的問題
解決辦法：
(1) 粗暴型：禁用縮放
(2) 利用FastClick庫：原理是檢測到touchend事件後立刻觸發click事件，並且把瀏覽器300ms後真正觸發的事件給阻斷掉。
3 viewport和響應式佈局
參考 https://github.com/forthealllight/blog/issues/13
響應式佈局常用解決方案
(1) 媒體查詢 @media screen and (max-width:320px) 根據不同的設備採取不同的方式
(2) 百分比 因爲padding和margin都是針對父元素寬度而言 所以對於按比例的情況 可以使用height:0 padding:50%(2:1)
(3) rem 以根元素font-size爲基準 但是設置rem需要結合js代碼或者webpack等方式 耦合性不好
4 瀏覽器緩存機制
瀏覽器緩存策略通常分爲兩種：強緩存和協商緩存
強緩存
實現強緩存可以通過兩種響應頭實現：Expires和Cache-Control.強緩存表示在緩存期間不需要請求，state code爲200。
HTTP/1.0：Expires：Wed，22 Oct 2018 08:41:00 GMT 表示資源會在該時間後過期，需要再次請求。並且Expires受制於本地時間，如果修改了本地時間，可能會造成緩存失效。
HTTP/1.1：Cache-control：max-age=30，優先級高於Expires，表示資源會在30秒後過期，需要再次請求。
協商緩存
如果緩存過期了，可以使用協商緩存來解決問題。協商緩存需要請求，緩存有效會返回304。並且需要客戶端和服務端共同實現。有兩種實現方式。
(1) Last-Modified和If-Modified-Since
前者表示本地文件最後修改日期，後者會將Last-Modified的值發送給服務器，詢問服務器在該日期後的資源是否有更新，有更新則會將新的資源發送回來。
但是如果在本地打開了緩存文件，就會造成Last-Modified被修改。所以在HTTP/1.1中出現了ETag。
(2) ETag和If-None-Match
ETag優先級比Last-Modified高。使用方式和(1)相同。
選擇合適的緩存策略
特殊地方使用特殊緩存策略
(1) 不需要緩存的地方使用Cache-control：no-store表示該資源不需要緩存
(2) 對於頻繁變動的資源來說，可以使用Cache-control：no-cache配合ETag，緩存前確認有效性，但是每次都會發送請求詢問資源是否更新。
(3) 對於代碼文件來說，通常使用Cache-control：max-age=315360000，然後對文件進行指紋處理，一旦文件名變動就會立刻下載新的文件。