整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML是一種固有的流動媒介。文本和容器在水平和垂直方向上展開以使用可用空間。這種流動性使復雜的設計變得更加困難，因此在千禧年之初，許多站點都根據流行的屏幕尺寸采用了固定寬度。
隨著屏幕尺寸從800×600增加到1024×768甚至更大，該過程仍然可行。但是，智能手機的興起和2007年推出的iPhone扭轉了這一趨勢。如今，超過一半的用戶在較小的移動設備上訪問網頁。
注意：從技術上講，智能手機通常比許多顯示器具有更高的分辨率，但是單個像素變得不可見。iPhone 11 Max將其2688 x 1242的硬件分辨率轉換為更實用的896×414邏輯分辨率。每個邏輯像素映射到3×3實際像素的網格，這使字體更平滑并增加了圖像細節。
最初的解決方法是兩個站點：一個用于桌面，一個用于移動，通常需要偵聽用戶代理以進行重定向。隨著各種設備呈指數增長，這很快變得不切實際。
最后，術語“響應式網頁設計（RWD）”由Ethan Marcotte在2010年提出。該技術使同一個站點可以在任何設備上工作，而不管屏幕尺寸或視口尺寸如何。
沒有單一的RWD方法或技術。
首先，您必須確定站點設計如何對不同尺寸的顯示器做出反應。這是一個挑戰，許多首批RWD網站采用了現有的桌面布局，并隨著屏幕尺寸的減小而刪除了部分內容。
更好的技術是移動技術。它始于線性移動視圖，可在所有設備上使用，然后隨著更多空間和受支持的瀏覽器功能可用而重新排列或改編內容。最近，許多站點采用了更簡單的布局，其中移動和桌面體驗基本相似。
RWD的典型示例是漢堡菜單。屏幕較小的用戶可以單擊圖標來查看導航鏈接，而屏幕較大的用戶可以在水平列表中查看所有選項。
以下各節提供了許多技術實施選項。
無論采用哪種RWD技術，都必須在HTML中設置以下標記<head>：
<meta name="viewport" content="width=device-width,initial-scale=1"> 該width=device-width設置可確保移動瀏覽器將邏輯CSS像素縮放到屏幕的寬度。否則，瀏覽器將假定它正在呈現一個桌面站點并相應地縮放它，以便可以對其進行平移和縮放。
媒體查詢是第一個RWD網站的主要基礎。它們允許CSS定位視口尺寸的特定范圍。例如：
/* styles applied to all views */
p {font-size: 1rem;}
/* styles applied to viewports with a width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
p {font-size: 1.5rem;}
} 盡管現在可以使用不太明確的選項，但仍使用媒體查詢。
HTML<picture>元素使用媒體查詢語法從多個選項中控制顯示哪個圖像<source>。這通常用于藝術指導，以顯示適合設備視口的圖像。例如：
<picture>
<!-- image shown when viewport width is greater than the height -->
<source srcset="landscape.jpg" media="(min-aspect-ratio:1/1)" alt="landscape" />
<!-- default image -->
<img src="portrait.jpg" alt="portrait" />
</picture> 的vw和vhCSS單元分別表示視口的高度和寬度的1％。vmin是最小尺寸的vmax1％，是最大尺寸的1％。
這些允許RWD靈活性，特別是與結合使用時calc。例如：
/* font size increases with viewport width */
p { font-size: 1rem + 0.5vw; } CSS多列布局提供了一種隨著容器尺寸增加而創建多個文本列的方法。例如：
/* columns must be a minimum width of 12rem with a gap of 2rem between each */
.container { columns: 12rem auto; column-gap: 2rem; } CSS Flexbox和CSS Grid提供了現代技術，可根據子元素的內容和可用空間對子元素進行布局。主要區別：
可以用來創建內部布局。本質上，無需視媒體查詢即可根據視口尺寸調整元素的大小。例如：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 1rem;
} JavaScript也可以用于確定視口尺寸并做出相應的反應。例如：
// get viewport width and height
const
vw = window.innerWidth,
vh = window.innerHeight; 類似地，盡管getBoundingClientRect（）方法可以返回更多信息，包括像素的分數，但是可以使用offsetWidth和offsetHeight檢查單個元素的尺寸：
const
element = document.getElementById('myelement'),
rect = element.getBoundingClientRect(),
ew = rect.width,
eh = rect.height; 窗口和元素的尺寸可以隨著設備旋轉或調整瀏覽器窗口的大小而改變。該matchMediaAPI可以解析CSS媒體查詢并觸發更改事件：
// media query
const mql = window.matchMedia('(min-width: 600px)');
// initial check
mqTest(mql);
// call mqTest when media query changes
mql.addListener(mqTest);
// media query testing function
function mqTest(e) {
if (e.matches) {
console.log('viewport is at least 600px width');
}
else {
console.log('viewport is less than 600px width');
}
} 首先，RWD技術提供了良好的瀏覽器支持。當前使用的最新瀏覽器中，有近95％支持最新的CSS網格選項。但是，仍然有必要在各種設備，分辨率和瀏覽器上測試您的網站……
調整瀏覽器窗口的大小是幾個小時的合理測試策略，但是它很快變得不準確且麻煩。大多數瀏覽器都提供了響應式設計模式，使您可以選擇設備和用戶代理，對其進行旋轉，選擇分辨率，更改像素密度，調節帶寬，模擬觸摸并拍攝屏幕截圖。
在Firefox中，從Web Developer菜單中選擇“響應式設計模式”或按Ctrl|Cmd+Shift+M。
在基于Chromium的瀏覽器中，從“更多工具”菜單中打開“開發者”工具，或按Ctrl|Cmd+Shift+I，然后單擊切換設備工具欄圖標，切換回瀏覽器選項卡以查看調整大小的站點。
在Safari中，從瀏覽器“偏好設置”的“高級”標簽中啟用“在菜單欄中顯示開發菜單”選項。加載頁面，然后從“開發”菜單中選擇“進入響應設計模式” 。
但是，請注意，這些工具僅模仿設備的屏幕尺寸和用戶代理。他們無法準確模擬以下內容：
在設備上運行Android或iOS虛擬機可讓您安裝和運行真正的移動瀏覽器并使用其實際渲染引擎。
Android模擬器包括：
Chrome是Android上明顯的瀏覽器選擇，但您也可以安裝Opera Mini，這在低功率功能手機上很顯眼。
iOS的選項更為有限：
這些仿真器仍有缺點：
幾種在線服務使您可以通過Web在移動瀏覽器上測試響應頁面。本質上，您在真實設備上租用時間，并且可以在瀏覽器中查看其屏幕。沒有要設置或維護的軟件。
除實時測試外，某些服務還包括自動測試API，使您可以運行腳本并檢查樣式回歸或損壞的用戶界面。
LambdaTest提供了2,000多種設備，操作系統和瀏覽器的組合。功能包括：
最后，沒有替代品可以在真實設備上進行測試。這是評估實際處理速度，觸摸控制和網站的自適應網頁設計的最佳方法。
理想情況下，您應該測試盡可能多的設備，但是您自己的最新智能手機可能并不代表平均硬件水平。嘗試獲得一兩年之久的中檔設備，例如二手Moto G7或iPhone 8。
在同一網絡上的設備可以通過在瀏覽器中輸入PC的IP地址來訪問PC的服務器。這可以ifconfig在macOS和Linux或ipconfigWindows上獲得。
您也可以使用USB電纜將智能手機連接到PC。這使您可以遠程控制設備并輕松訪問其開發人員工具面板以進行調試。該技術因平臺而異，但是要在桌面版瀏覽器上調試Android Chrome，請執行以下操作：
要調試iPhone的Safari，請執行以下操作：
響應式網頁設計技術使您可以創建一個網站，無論技術限制和邊界如何，任何人都可以在任何設備上查看該網站。使其具有出色的用戶體驗是另一回事，但是測試工具的范圍和功能仍在不斷提高。
eb標準：
由于不同瀏覽器解析出來的網頁效果可能不同，所以需要通過web標準對其進行約束使其一致，主要包括三個方面：
結構標準：
結構用于對網頁元素進行整理和分類，主要指的是HTML。
表現標準：
表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：
行為是指網頁模型的定義及交互的編寫，主要指的是 JavaScript。
初識HTML：
html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標記語言” ，描述網頁的一種語言。
HTML發展：
XHTML 是一個 W3C 標準，可擴展超文本標簽語言（EXtensible HyperText Markup Language），更嚴格更純凈的 HTML 版本，作為一種 XML 應用被重新定義的 HTML。
HTML中的注釋：
<!-- 注釋標簽：注釋的內容 -->條件注釋：
條件注釋的作用是：定義只有Internet Explorer才執行條件注釋中的html標簽。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網頁的跟標簽,lang=""用來設置網頁語言，其值還有zh-CN中文簡體、fr法語等，設置后當系統設置語言和網頁語言發生沖突時會提示是否翻譯網頁 -->
<head> <!-- 網頁的頭部 -->
<meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設置iOS頂部通欄樣式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到數字不轉成電話號碼 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 網站搜索關鍵字 -->
<meta name='description' content='this is description'> <!-- 描述網站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!-- 網站的圖標，如果圖標是gif圖，則需要改：type="image/gif"，引入網站圖標另一種方法：命名為favicon.ico文件放到網站根目錄下 -->
<link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base標簽，定義這個網頁中a鏈接打開窗口的方式，其值還有_self -->
<title>標題</title> <!-- 網站的標題 -->
<style type="text/CSS"> /* 用來寫CSS代碼，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 網頁的主體 -->
<h1>標題</h1> <!-- 標題標簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網頁中只允許出現一次。 -->
<p>段落</p> <!-- 段落標簽 -->
<hr/> <!-- 單線標簽,所有單標簽后面的關閉符均可以省略 -->
<br/> <!-- 換行標簽 -->
</div></div> <!-- 無語義化標簽布局用,上面的標簽是語義化標簽 -->
<span>span</span> <!-- 無語義化標簽分割用 -->
<strong>加粗</strong> <!-- 加粗標簽 -->
<b>加粗</b> <!-- 加粗標簽 -->
<i>傾斜</i> <!-- 傾斜標簽 -->
<em>傾斜</em> <!-- 傾斜標簽 -->
<s>刪除線</s> <!-- 刪除標簽 -->
<del>刪除線</del> <!-- 刪除標簽 -->
<u>下劃線</u> <!-- 下劃線標簽 -->
<ins>下劃線</ins> <!-- 下劃線標簽 -->
<img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標懸停，提示文體" border="2"/> <!-- 圖像標簽，border是邊框屬性，width和height屬性設置圖像的寬度和高度 -->
<a href="跳轉目標" target="_self">鏈接的命名</a> <!-- 鏈接標簽，target屬性為鏈接頁面打開的方式，默認值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
<ul> <!-- 無序列表 -->
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
<li>中國</li>
<li>美國</li>
<li>英國</li>
</ol>
<dl> <!-- 自定義列表 -->
<dt>分類1</dt> <!-- 分類名稱 -->
<dd>分類1第1項</dd> <!-- 類的項 -->
<dd>分類1第2項</dd>
<dt>分類2</dt>
<dd>分類2第1項</dd>
<dd>分類2第2項</dd>
</dl>
<table> <!-- 定義表格，table標簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
<caption>信息表</caption> <!-- 表格標題 -->
<tr> <!-- 定義行 -->
<th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
<th>年齡</th>
<th>性別</th>
</tr>
<tr> <!-- 定義行 -->
<td>小明</td> <!-- 定義單元格，表格里面沒有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海123
其它問題可通過以下方式聯系本人咨詢：
QQ：810665436
微信：ConstancyMan
術上，HTML5大行其道：
1：有數據顯示，截至2015，有80%的App全部或部分基于HTML5。
2：谷歌瀏覽器于9月1日起不在支持自動播放Flash。
3：亞馬遜旗下網站（包括Amazon.com門戶在內）的所有廣告將不再使用flash。在可預見的未來，flash廣告將被HTML5廣告所取代。
移動端+HTML5，這個組合對前端工程師來說是個不小的挑戰：如何讓開發的頁面能有更好的體驗？這就是我們今天討論的話題：移動端HTML5頁面前端性能優化。
如何優化HTML5在移動設置上的性能表現，首先需要明確以下幾個原則：
1、PC優化手段在Mobile端同樣適用。
2、在Mobile側我們提出三秒種渲染完成首屏指標。
3、基于第二點，首屏加載3秒完成或使用Loading。
4、基于聯通3G網絡平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB。
5、Mobile端因手機配置原因，除加載外渲染速度也是優化重點。
6、基于第五點，要合理處理代碼減少渲染損耗。
7、基于第二、第五點，所有影響首屏加載和渲染的代碼應在處理邏輯中后置。
8、加載完成后用戶交互使用時也需注意性能。
接下來先看一張小抄神圖：
之所以說是神圖，是因為它基本上涵蓋了所有的優化方案！非常詳盡！在這里，我們針對其中幾個代表性方案進行探討：
加載優化
對于移動端的網頁來說，加載過程是最為耗時的過程，可能會占到總耗時的80%時間，因此是優化的重點，當然，手機站的其他前端要素優化也是不能忽略的。
1、減少HTTP請求
因為手機瀏覽器同時響應請求為4個請求（Android支持4個，iOS 5后可支持6個），所以要盡量減少頁面的請求數，首次加載同時請求數不能超過4個，建議優化要點為以下2點：
1、合并CSS、Java
2、合并小圖片，使用雪碧圖
2、緩存
使用緩存可以減少向服務器的請求數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）。
1、緩存一切可緩存的資源
2、使用長Cache（使用時間戳更新Cache）
3、使用外聯式引用CSS、Java
3、壓縮HTML、CSS、Java
減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、Java等進行代碼壓縮，并在服務器端設置GZip。
1、壓縮（例如，多余的空格、換行符和縮進）
2、啟用GZip
4、無阻塞
寫在HTML頭部的Java（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，避免在HTML標簽中寫Style，Java放在頁面尾部或使用異步方式加載
5、使用首屏加載
首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化。
6、按需加載
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量。
1、LazyLoad
2、滾屏加載
3、通過Media Query加載
另外，提醒大家一點：按需加載會導致大量重繪，影響渲染性能。
7、預加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面，但Loading時間過長，會造成用戶流失。
1、可感知Loading(如進入空間游戲的Loading)
2、不可感知的Loading（如提前加載下一頁）
3、對用戶行為分析，可以在當前頁加載下一頁資源，提升速度。
8、壓縮圖片
圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示。
1、使用智圖
2、使用其它方式代替圖片（使用CSS3；使用SVG；使用IconFont）
3、使用Srcset
4、選擇合適的圖片（webP優于JPG；PNG8優于GIF）
5、選擇合適的大?。ㄊ状渭虞d不大于1014KB；基于手機屏幕一般寬度不寬于640）
提醒大家一點：過度壓縮圖片大小影響圖片顯示效果。
9、減少Cookie，避免重定向以及異步加載第三方資源
Cookie會影響加載速度，所以靜態資源域名不使用Cookie。另外，重定向會影響加載速度，所以在服務器正確設置避免重定向。還有，第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源。
腳本執行優化
腳本處理不當會阻塞頁面加載、渲染，因此在使用時需要注意以下幾點：
1、CSS寫在頭部，Java寫在尾部或異步。
2、避免圖片和iFrame等的空Src，空Src會重新加載當前頁面，影響速度和效率。
3、盡量避免重設圖片大小，重設圖片大小是指在頁面、CSS、Java等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能。
4、圖片盡量避免使用DataURL，DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長。
CSS優化
1、盡量避免寫在HTML標簽中寫Style屬性。
2、避免CSS表達式，CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式。
3、移除空的CSS規則，空的CSS規則增加了CSS文件的大小，且影響CSS樹的執行，所以需移除空的CSS規則。
4、正確使用Display的屬性，Display屬性會影響頁面的渲染，建議各位站長要合理使用。
（1）、display:inline后不應該再使用width、height、margin、padding以及float
（2）、display:inline-block后不應該再使用float
（3）、display:block后不應該再使用vertical-align
（4）、display:table-*后不應該再使用margin或者float
5、不濫用Float，Float在渲染時計算量比較大，盡量減少使用。
6、不濫用Web字體，Web字體需要下載，解析，重繪當前頁面，盡量減少使用。
7、不聲明過多的Font-size，過多的Font-size引發CSS樹的效率。
8、值為0時不需要任何單位，為了瀏覽器的兼容性和性能，值為0時不要帶單位。
9、標準化各種瀏覽器前綴
（1）、無前綴應放在最后。
（2）、CSS動畫只用（-webkit- 無前綴）兩種即可。
（3）、其它前綴為“-webkit- -moz- -ms-無前綴”四種（-o-Opera瀏覽器改用blink內核，所以淘汰）。
10、避免讓選擇符看起來像正則表達式。
高級選擇器執行耗時長且不易讀懂，避免使用。
Java執行優化
1、減少重繪和回流
（1）、避免不必要的Dom操作
（2）、盡量改變Class而不是Style，使用classList代替className
（3）、避免使用document.write
（4）、減少drawImage
2、緩存Dom選擇與計算，每次Dom選擇都要計算，緩存他。
3、緩存列表.length，每次.length都要計算，用一個變量保存這個值。
4、盡量使用事件代理，避免批量綁定事件。
5、盡量使用ID選擇器，ID選擇器是最快的。
6、TOUCH事件優化，使用touchstart、touchend代替click，因快影響速度快，但應注意Touch響應過快，易引發誤操作。
渲染優化
HTML文檔是以包含文檔編碼信息的數據流方式在網絡間傳輸，頁面的編碼信息一般會在HTTP響應的頭部信息或在文檔內的HTML標記中指明，客戶端瀏覽器只有在確定了頁面編碼后才能正確的渲染頁面，所以在繪制頁面或執行任何的java代碼前，大部分的瀏覽器（ie6、ie7、ie8除外）都 會緩沖一定字節的數據來從中查找編碼信息，不同的瀏覽器當中預緩沖的字節數是不一樣的。
1、HTML使用Viewport
Viewport可以加速頁面的渲染，請使用以下代碼：
2、減少Dom節點
Dom節點太多影響頁面的渲染，應盡量減少Dom節點。
3、動畫優化
（1）、盡量使用CSS3動畫。
（2）、合理使用requestAnimationFrame動畫代替setTimeout。
（3）、適當使用Canvas動畫5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）。
4、高頻事件優化
Touchmove、Scroll事件可導致多次渲染。
（1）、使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染。
（2）、增加響應變化的時間間隔，減少重繪次數。
5、GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用。（PS：過渡使用會引發手機過耗電增加。）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
