HTML5前端性能優化——瀏覽器兼容與前端性能優化

時間  2019-11-08
標籤 html5 html 前端 性能 優化 瀏覽器 兼容 欄目 HTML5 简体版
原文   原文鏈接

1、瀏覽器兼容

1.一、概要

世界上沒有任何一個瀏覽器是同樣的，一樣的代碼在不同的瀏覽器上運行就存在兼容性問題。不一樣瀏覽器其內核亦不盡相同，相同內核的版本不一樣，相同版本的內核瀏覽器品牌不同，各類運行平臺還存在差別、屏幕分辨率不同，大小不同，比例不同。兼容性主要能夠分類爲：javascript

1)、CSS兼容
2)、JavaScript兼容
3)、HTML兼容css

這三類也是前端的主要組成部分，都存在必定的兼容性問題，知己知彼，百戰百勝，咱們先了解瀏覽器的發動機—內核。html

多年前咱們一直爲IE6兼容煩惱，爲它沒少加班；盼走了IE6如今又出現了IE8，看來兼容沒有盡頭...前端

1.二、瀏覽器內核

Trident 
Microsoft公司瀏覽器內核，IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及許多品牌瀏覽器的內核。其中部分瀏覽器的新版本是「雙核」甚至是「多核」，其中一個內核是Trident，而後再增長一個其餘內核。java

Gecko
Firefox內核，Netscape6開始採用的內核，後來的Mozilla FireFox(火狐瀏覽器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的內核。git

Presto
Opera前內核，已廢棄，Opera現已改用Google Chrome的Blink內核。github

Webkitweb

Safari內核,Chrome內核原型,開源，它是蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核。 傲遊瀏覽器三、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器chrome

Blinkwindows

Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎做爲Chromium計劃的一部分，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，而且在Chrome（28及日後版本）、Opera（15及日後版本）。

edge

微軟專門爲新IE打造的引擎，速度快，目前已經基於此引擎開發了瀏覽器，目前IE11使用該內核，估計之後微軟的新瀏覽器會繼續採用該內核。

1.三、瀏覽器市場份額（Browser Market Share）

能過瀏覽器的市份額咱們能夠在處理瀏覽器兼容性時會更加關注市場份額高的瀏覽器，適當的時候能夠放棄市場份額佔有量小的瀏覽器。

國際：

查詢地址：https://www.netmarketshare.com

1.四、兼容的通常標準

1)、在不一樣的主流的瀏覽器上表現效果一致

2)、能適應不一樣的屏幕大小

3)、能適應不一樣的分辨率與色彩深度

瀏覽器兼容在線測試：

http://browsershots.org/

1.五、CSS Reset

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題，CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

如全局重置*{ padding: 0; margin: 0; border:}雖然能所有重置，但因爲性能較低，不推薦使用。由於*須要遍歷整個DOM樹，當頁面節點較多時，會影響頁面的渲染性能。
這個網站http://cssreset.com/有最新的CSSReset提供給你們參考。

Normalize (號稱是CSS reset的替代方案，保留了一些內置的樣式，並非清除全部)

http://nicolasgallagher.com/about-normalize-css/

https://github.com/necolas/normalize.css

1.六、CSS Hack

CSS Hack就是針對不一樣的瀏覽器或不一樣版本瀏覽器寫特定的CSS樣式達到讓瀏覽器兼容的過程。

1.6.一、條件註釋法

IE條件註釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視爲註釋。

 

<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 如下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->

gt : greater than，選擇條件版本以上版本，不包含條件版本 >
lt : less than，選擇條件版本如下版本，不包含條件版本 <
gte : greater than or equal，選擇條件版本以上版本，包含條件版本>=
lte : less than or equal，選擇條件版本如下版本，包含條件版本 <=
! : 選擇條件版本之外全部版本，不管高低

*只有IE瀏覽器認識條件註釋、其它瀏覽器會跳過

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--[if gt IE 6]>
            <style>
                body{
                    background:lightblue;
                }
            </style>
        <![endif]-->
        
        <!--[if lt IE 8]>
        <script type="text/javascript">
            alert("您的瀏覽器Out了，請下載更新。");
        </script>
        <![endif]-->
    </head>
    <body>
        <!--[if gt IE 6]>
            <h2>大於IE6版本的瀏覽器</h2>
        <![endif]-->
    </body>
</html>

效果：

 IE8

chrome

ie6

1.6.一、樣式內屬性標記法

在CSS樣式的屬性名前或值後面添加特殊的字符讓不一樣的瀏覽器解析。

http://browserhacks.com/在線查詢， 這一個功能強大的提供各類針對性兼容辦法的網站，很是實用。

 「-″下劃線是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

1.6.二、選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

《hack速查表》：

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>hack速查表</title>
    <style type="text/css">
        /*reset*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
            height: 100%;
            text-align: center;
            background: #fff;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
            font-weight: normal;
        }
        /* Tables still need 'cellspacing="0"' in the markup. */
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        em {
            font-style: normal;
            color: #f00;
        }
        
        h1 {
            font-size: 2em;
            font-weight: 700;
        }
        
        .hack {
            width: 1000px;
            margin: 0 auto;
            text-align: left;
        }
        
        .hack table {
            width: 100%;
            margin: 10px 0;
        }
        
        .hack td,
        .hack th {
            height: 30px;
            padding: 0 5px;
            border: 1px solid #ccc;
        }
        
        .hack th {
            color: #cc0bf6;
        }
        
        .hack th.eq,
        .hack td.eq {
            width: 350px;
            color: #333;
        }
        
        .hack th.identifier,
        .hack td.hack-data {
            width: 350px;
            color: #61602f;
        }
        
        .hack td.no {
            color: #fff;
            text-align: center;
            background-color: red;
        }
        
        .hack td.yes {
            color: #fff;
            text-align: center;
            background-color: green;
        }
        
        .hack p b {
            color: green;
        }
        
        .hack p b.red {
            color: red;
        }
        
        .hack h2 {
            margin: 10px 0 0 0;
            font-size: 1.5em;
            font-weight: 700;
        }
        
        .hack-list {
            margin: 10px 0;
        }
        
        .hack-list li {
            margin-bottom: 5px;
            zoom: 1;
        }
        
        .hack-list span {
            float: left;
            width: 15px;
            font-family: "\5b8b\4f53";
        }
        
        .hack-list-inf {
            padding: 0 0 0 15px;
        }
        
        .hack-list em {
            display: inline-block;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <h1>hack速查表</h1>
    <div class="hack">
        <p>建議：以標準瀏覽器爲準書寫代碼，如遇到兼容問題，嘗試其餘方法解決問題，在萬不得已怕狀況下，採用HACK解決。</p>
        <p>如下是我總結的HACK書寫方法:</p>
        <p>瀏覽器：僅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均爲最新版本)。</p>
        <p>測試環境：windows系統;</p>
        <p>DOCTYPE:
            <!doctype html>.</p>
        <table cellpadding="0">
            <thead>
                <tr>
                    <th class="identifier">標誌符</th>
                    <th class="eq">示例</th>
                    <th>IE6</th>
                    <th>IE7</th>
                    <th>IE8</th>
                    <th>IE9</th>
                    <th>FF</th>
                    <th>OP</th>
                    <th>SA</th>
                    <th>CH</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="hack-data">*</td>
                    <td>.eq {*color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">_</td>
                    <td>.eq {_color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">+</td>
                    <td>.eq {+color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">-</td>
                    <td>.eq {-color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">></td>
                    <td>.eq {>color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\0</td>
                    <td>.eq {color:#000\0;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\9</td>
                    <td>.eq {color:#000\9;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\9\0</td>
                    <td>.eq {color:#000\0;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td>N\Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">:root .xx{xxx:xxx\9;}</td>
                    <td>:root .eq {color:#a00\9;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*+</td>
                    <td>.eq {*+color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*-</td>
                    <td>.eq {*-color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*html</td>
                    <td><span class="hack-data">*html</span> .eq {color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*+html</td>
                    <td><span class="hack-data">*+html</span> .eq {color:#000;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">html*</td>
                    <td>html* .eq {color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">[;</td>
                    <td>.eq {color:red;[;color:blue;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html>body</td>
                    <td>html>body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html>/**/body</td>
                    <td>html>/**/body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html/**/>body</td>
                    <td>html/**/>body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">@media all and (min-width:0px){}</td>
                    <td><span class="hack-data">@media all and (min-width:0px){.eq {color:#000;}}</span></td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">*:first-child+html</td>
                    <td>*:first-child+html .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*:first-child+html{} *html</td>
                    <td>*:first-child+html{} *html .eq {color:blue;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">@-moz-document url-prefix(){}</td>
                    <td>@-moz-document url-prefix(){ .eq {color:blue;}}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">@media screen and (-webkit-min-device-pixel-ratio:0){}</td>
                    <td>@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}</td>
                    <td><span class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</span></td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">body:nth-of-type(1)</td>
                    <td>body:nth-of-type(1) .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th class="identifier">標誌符</th>
                    <th class="eq">示例</th>
                    <th>IE6</th>
                    <th>IE7</th>
                    <th>IE8</th>
                    <th>IE9</th>
                    <th>FF</th>
                    <th>OP</th>
                    <th>SA</th>
                    <th>CH</th>
                </tr>
            </tfoot>
        </table>
        <p>FF:firefox; OP:opera; SA:safari; CH:chrome; <b>Y</b>表明支持，<b class="red">N</b>表明不支持。</p>
        <h2>注意事項：</h2>
        <ul class="hack-list">
            <li><span>·</span>
                <div class="hack-list-inf">因爲各瀏覽器更新神速，因此有些HACK可能會有變化，因此請你們注意。</div>
            </li>
            <li><span>·</span>
                <div class="hack-list-inf"><em>[;</em>此種方式會影響後續樣式，不可取。</div>
            </li>
            <li><span>·</span>
                <div class="hack-list-inf"><em>\9\0</em>並不是對全部屬性都能區分IE8和IE9.好比：background-color能夠，但background不能夠，還有border也不能夠。因此在實際用時要測試下。</div>
            </li>
            <li><span>·</span>
                <div class="hack-list-inf">當同時出現<em>\0</em>;<em>*</em>;<em>_</em>;時，推薦將\0寫在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，不然IE7和IE6裏的效果會失效。但border例外，放在先後均可以。保險起見，仍是放在前面。 </div>
            </li>
        </ul>
        <h2>推薦寫法：</h2>
        <h3>demo:</h3>
        <pre>
        .eq {
             color:#f00;/*標準瀏覽器*/
             color:#f30\0;/*IE8,IE9,opera*/
             *color:#c00;/*IE7及IE6*/
             _color:#600;/*IE6專屬*/
            }
        :root .eq {color:#a00\9;}/*IE9專屬*/
        @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera專屬*/
        @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit專屬*/
        @-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox專屬*/
  </pre>
    </div>
</body>
View Code

 

 

1.七、文檔模式 （X-UA-Compatible） 

文檔模式是IE8瀏覽器之後的一種獨有技術，他能夠經過meta指定當前文檔的渲染模式，如能夠把IE8降級成IE六、IE7使用。文檔模式的主要做用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪一個版本的方式來解析並渲染網頁代碼。

<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >最新IE
「X-UA-Compatible」的值有兩種方式：Emulate+IE版本號，單純版本號
EmulateIE8：若是聲明瞭文檔類型，則以IE8標準模式渲染頁面，不然將文檔模式設置爲IE5
9：強制以IE9標準模式渲染頁面，忽略文檔類型聲明

x-ua-compatible 頭標籤大小寫不敏感，必須用在 head 中，必須在除 title 外的其餘 meta 以前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)
插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核

未指定文檔模式時使用默認的文檔模式

 

 多數狀況下咱們不會這樣降級使用，通常會將IE選擇爲最新版本的文檔模式（注意不是文檔類型），若是IE瀏覽器使用了GCF技術咱們應該強制使用最新版內核，寫入以下：

<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />

 

1.八、javascript兼容

這裏有兩層意思，第一可使用javascript操做樣式與標籤，強制瀏覽器兼容，好比先使用javascript判斷瀏覽器類型，再操做樣式與標籤。

第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容，能夠採起以下辦法：

一、使用第三方提代的javascript庫，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS

像jQuery這種成熟的javascript庫通過屢次的版本迭代，已經變得很是成熟，世界上的網站到如今近60%都使用到了jQuery，他的兼容性不錯。

二、瀏覽器檢測、從新封裝

使用javascript判斷瀏覽器類型，對一些特色的方法或對象從新封裝後使用屏蔽瀏覽的不兼容性。可使用User-Agent、或特定對象。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2 id="msg"></h2>
        <script type="text/javascript">            
            //用於檢測瀏覽器是否爲IE
            var isIE=function(){
                return !!window.ActiveXObject;
            }
        
            function show(info){
                document.getElementById("msg").innerHTML+=info+"<br/>"
            }
            
            //得到用戶代理對象，瀏覽器與操做系統信息
            show(navigator.userAgent);
            show(isIE()?"是IE瀏覽器":"不是IE瀏覽器");
        </script>
    </body>
</html>

運行效果：

2、前端性能優化

 2.一、概要

在保證功能的前提下，性能也很是關鍵。從上圖能夠看出若是性能太差，響應速度慢將帶很是差的用戶體驗，會失去大量用戶。好的性能要依託以下幾個方面：

1)、服務器端

2)、網絡速度，客戶端與服務器之間的每一個網絡環節

3)、客戶端軟件與硬件配置

4)、前端的性能，資源的數量，大小，javascript的時間與空間複雜度等

要提升前端的性能能夠從以下幾個方面入手：

1)、儘可能減小HTTP請求數量
2)、壓縮
3)、緩存
4)、使用內容發佈網絡（CDN的使用）
5)、DNS Prefetch
6)、將CSS樣式表放在頂部
7)、將javascript腳本放在底部
8)、使用外部javascript和CSS
9)、避免重定向

2.二、減小HTTP請求數量

前端優化的黃金準則指導着前端頁面的優化策略：只有10%-20%的最終用戶響應時間花在接受請求的HTML文檔上，剩下的80%-90%時間花在爲HTML文檔所引用的全部組件（圖片、腳本、樣式表等）進行的HTTP請求上。

一、圖片地圖

二、CSS Sprite

三、Data URI Scheme（內聯資源）

四、樣式表的合併

五、使用Web Font字體圖標

2.2.一、圖片地圖

圖片地圖與稱熱點圖片，不算新技術，早在HTML4.0中就存在了，就是在圖片的指定區域指定超連接。這樣作的目的是將本來須要物理拆分的圖片合併在一塊兒，經過熱點單獨指定連接，間接的減小了客戶端請求服務器圖片的數量。

 

2.三、緩存

2.4.一、http頭部緩存

<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />

Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求新內容，可使用客戶端緩存的內容，可是請求仍是會發生，狀態爲304。瀏覽器會默認開啓緩存功能。

 

2.四、內容分發網絡 （CDN）

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。

好比咱們在項目中使用jQuery ,加載本地服務器的jQuery可能不如資源公共庫中作過CDN優化的資源快。

http://cdn.code.baidu.com/ 百度靜態資源公共庫

 

1)、經過 link 標籤
< link rel="dns-prefetch" href="http://api.twitter.com" />
2)、經過 meta 標籤
< meta http-equiv="x-dns-prefetch-control" content="on" />
3)、設置 Http header 的 x-dns-prefetch-control 屬性爲 on 進行控制。
Firefox: 3.5+ Chrome: Supported
Safari 5+ IE: 9

2.五、小節

優化是沒有止境的，只有更快沒有最快，下面兩篇文章只介紹了更多關於前端優化的方法。

英文原文：https://developer.yahoo.com/performance/rules.html

中文翻譯：http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html

《高性能網站建設指南》這本書中提出了一些規則：

規則1——減小HTTP請求規則2——使用內容發佈網絡規則3——添加Expires頭規則4——壓縮組件規則5——將樣式表放在頂部規則6——將腳本放在底部規則7——避免CSS表達式規則8——使用外部JavaScript和CSS規則9——減小DNS查找規則10——精簡JavaScript規則11——避免重定向規則12——移除重複腳本規則13——配置ETag規則14——使AjaX可緩存

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程