關於web頁面優化

時間 2019-11-10

標籤關於 web 頁面優化欄目 HTML 简体版

原文原文鏈接

簡單彙總了一下web的優化方案（主要的前端優化策略）

減小http請求次數
- 文件合併（js、css、圖片）；ps：多個圖片合併以後，整體積會變小
- 內聯圖片，即data:URL scheme，但容易致使html頁面混亂
- 可緩存的ajax
- 儘可能使用get而不是post，get僅發送一次TCP數據包，而post會發送兩次
- 使用專用的靜態服務器域名，這樣在請求靜態文件時，就不會傳遞cookie了，節省帶寬
推遲加載內容
- 如動畫等，能夠等頁面必備的邏輯執行完後再執行動畫
預加載
- 空閒的時候，加載接下來可能用到的東西
- 無條件的預加載

測試代碼index.htmlcss

onload中進行圖片預加載html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    function parseDom(arg) { let objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes[0]; }; window.addEventListener('load',function(){ let loader = document.getElementById('preload'); loader.append(parseDom('<img src="pic/IMG_20170914_115807.jpg"/>')); }) </script>
<body>
    <a href="2.html">去下一個頁面</a>
    <div id="preload" style="display: none;"></div>
</body>
</html>

2.html前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
<body>
    <img src="pic/IMG_20170914_115807.jpg"/>
</body>
</html>

訪問首頁時，進行預加載jpgweb

訪問2.html時，就不須要再次加載了，加快了響應速度 ajax

有條件的預加載：根據用戶的操做預測接下來可能訪問的東西，提早加載資源
減小dom的數量，檢測數量 document.getElementsByTagName('*').length ，數量多形成reflow慢、元素定位慢
使用CDN

內容分發網絡（Content Delivery Network，CDN）是由一系列分散到各個不一樣地理位置上的Web服務器組成的，它提升了網站內容的傳輸速度。用於向用戶傳輸內容的服務器主要是根據和用戶在網絡上的靠近程度來指定的。例如，擁有最少網絡跳數（network hops）和響應速度最快的服務器會被選定。
express

避免使用css expression，由於表達式須要實時更新，使計算次數很是頻繁
使用外部js和css，由於瀏覽器能夠對其進行緩存，多頁面複用同一個文件的時候效果明顯
對js和css文件進行壓縮
css放在頂端head標籤內
把能夠延遲執行的js放在底部，由於默認狀況下script標籤的下載和執行都是同步的,想要動態加載script，可使用第三方的lab.js
網上還有說把js打包成png的，看了評論感受實用性不是很大，壓縮效率和gzip差很少，並且好像出現中文內容，就會打包失敗，還要求支持canvas（IE8以上）
儘可能少用全局變量，容易出現混亂並且不易於回收（除非你手動刪除），容易形成內存泄漏
對於重複運行的代碼，用setInterval而不是用setTimeout
語句數量最小化

/**不提倡**/
var i = 1; var j = "hello"; var arr = [1,2,3]; var now = new Date(); /**提倡**/
var i = 1, j = "hello", arr = [1,2,3], now = new Date(); /**不提倡**/
var name = values[i]; i++; /**提倡**/
var name = values[i++];

過深的原型鏈也會致使效率低下
設置動畫元素爲absolute或fixed

position: static或position: relative元素應用動畫效果會形成頻繁的reflow。canvas

position: absolute或position: fixed的元素應用動畫效果只須要repaint。瀏覽器

儘可能把多個操做放到一個timer中，而不是使用多個timer
字符串鏈接採用Array.join而是使用+，前者不會建立臨時對象，能下降垃圾回收的開銷【不一樣瀏覽器實現方式不一樣，所以有不一樣的爭議】
性能上來講：""+字符串>String()>.toString()>new String()。
dom對象與js對象相互引用、事件綁定等容易形成內存泄漏，由於dom對象通常不會被銷燬，除非你去刪除dom
多個元素的點擊事件轉換爲一個父容器的點擊事件，可提升效率
儘可能在循環外部使用tryCatch（我的理解就是catch語句塊會建立一個做用域，循環中建立做用域致使性能低下）
對dom定位時，儘可能在某個父容器中進行搜索，減少搜索範圍
減小使用with，with有本身的做用域，會增長做用域鏈的長度，優化策略是減少做用域的長度，下降做用域鏈上的搜索時間

dom節點優化緩存

　　節點優化的關鍵在於下降reflow次數，先了解如下什麼是reflow【可理解爲刷新重繪等】服務器

accepted

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately it can be triggered easily.

Reflow occurs when you:

insert, remove or update an element in the DOM

modify content on the page, e.g. the text in an input box

move a DOM element

animate a DOM element

take measurements of an element such as offsetHeight or getComputedStyle

change a CSS style

change the className of an element

add or remove a stylesheet

resize the window

scroll

1.使用 DocumentFragment 能夠減小reflow次數

2. css優化

如如下代碼逐條更改元素的幾何屬性，理論上會觸發屢次reflow。

element.style.fontWeight = 'bold' ; element.style.marginLeft= '30px' ; element.style.marginRight = '30px' ;

能夠經過直接設置元素的className直接設置，只會觸發一次reflow。
```
element.className = 'selectedAnchor' ;
```

3.當dom元素比較多的時候，能夠對要頻繁操做的dom元素進行緩存，而不是每次都進行定位

4.innerHTML建立dom的效率要大於createElement()和appendChild()和document.write

5.避免的空的src和href，空的表明加載當前頁面，這是沒有必要的

6.多innerHTML的屢次賦值轉換爲一次賦值，可下降reflow

var str = "<div>這是一個測試字符串</div>"; /**效率低**/
var obj = document.getElementsByTagName("body"); for(var i = 0; i < 100; i++){ obj.innerHTML += str + i; } /**效率高**/
var obj = document.getElementsByTagName("body"); var arr = []; for(var i = 0; i < 100; i++){ arr[i] = str + i; } obj.innerHTML = arr.join("");

閉包優化

for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(index) { return function(evt) { output.innerText += 'Clicked ' + events[index]; }; })(i); }

for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(event) { return function(evt) { output.innerText += 'Clicked ' + event; }; })(events[i]); }

以上兩段代碼的區別：前者對event造成依賴，然後者不會。當外部的event被修改了或者被刪除了，前者因爲造成了依賴，沒法正常工做，然後者沒有依賴，能夠正常執行

相關標籤/搜索

每日一句

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