資訊專欄INFORMATION COLUMN
摘要：各種各樣的編碼錯(cuò)誤可能會導(dǎo)致網(wǎng)站加載速度非常慢，從而用戶離開的網(wǎng)站。同時(shí)提高網(wǎng)站加載速度也是提高網(wǎng)站排名的必要步驟之一。
翻譯：瘋狂的技術(shù)宅
原文：https://likegeeks.com/improve...
為你網(wǎng)站的用戶留下良好的第一印象是非常必要的。隨著商業(yè)領(lǐng)域的競爭，擁有一個(gè)吸引人的網(wǎng)站可以幫助你脫穎而出。研究表明，如果加載時(shí)間超過3秒，會有 40％ 的用戶放棄訪問你的網(wǎng)站（https://www.optimumsystemsonl...）。
如果開發(fā)人員急于瀏覽網(wǎng)站的編碼部分，問題的發(fā)生只是時(shí)間問題。各種各樣的編碼錯(cuò)誤可能會導(dǎo)致網(wǎng)站加載速度非常慢，從而用戶離開的網(wǎng)站。在頁面加載時(shí)間與跳出率的爭論中，你可以清楚地看到加載速度較慢的網(wǎng)站的參與率較低。
同時(shí)提高網(wǎng)站加載速度也是提高網(wǎng)站排名的必要步驟之一。以下是避免頁面加載速度緩慢時(shí)需要考慮的一些事項(xiàng)。
為你的頁面元素選擇正確的加載順序你的頁面中 部分中的所有元素都需要以正確的方式預(yù)加載。用戶在你的網(wǎng)站上看到任何內(nèi)容之前，所有這些元素都必須按順序加載。在 部分中使用 JavaScript 會導(dǎo)致頁面在嘗試呈現(xiàn)信息時(shí)變慢。
如果沒有對頁面加載元素的順序進(jìn)行優(yōu)化，那么用戶可能會在加載過程中看到白屏。通過優(yōu)化頁面加載元素，可以大大的加快頁面加載的速度。雖然優(yōu)化頁面加載元素非常耗時(shí)，但這種付出還是很值得的。
服務(wù)器性能可能會導(dǎo)致頁面加載問題只要有人點(diǎn)擊你的網(wǎng)站，它就會激活從服務(wù)器開始的一系列事件。瀏覽器所做的最重要的一件事就是向你的服務(wù)器發(fā)送請求。
如果服務(wù)器響應(yīng)緩慢，就會導(dǎo)致頁面加載問題，所以你必須排除網(wǎng)絡(luò)故障。如果這類問題經(jīng)常發(fā)生，你可能需要重新尋找其他 Web 服務(wù)商，要考慮它能為你的網(wǎng)站提供多少速度，即使你需要為可靠的網(wǎng)絡(luò)主機(jī)支付更多費(fèi)用。
優(yōu)化代碼很重要壓縮 JavaScript 代碼也是解決頁面加載速度緩慢問題的好方法。使用代碼壓縮工具，你可以擺脫逗號、注釋甚至不需要的空格。使用 Google Closure Compiler 等程序是不錯(cuò)的選擇。
優(yōu)化之前：function test(node) {
var parent = node.parentNode;
if (0) {
alert( "Hello Everybody" );
} else {
alert( "We love Websites" );
}
return;
alert( 1 );
}
優(yōu)化后：
function test(){alert("We love Websites")}
正如你所看到的，優(yōu)化工具刪除不會用到的變量，還刪掉了死代碼。
優(yōu)化服務(wù)器端代碼同樣非常重要，就像我們在處理大文件一文中看到的那樣，而不會損失性能。
了解延遲和異步標(biāo)記JavaScript 中最常用的同步加載機(jī)制之一是異步加載?；旧洗藱C(jī)制可確保你的網(wǎng)站以多流方式加載。
在使用瀏覽器找到一串如
在加載 big.js 之前，下面的代碼不會處理。
向此代碼添加 async 標(biāo)記可確保立即創(chuàng)建 DOM 模型，并且不會干擾正確加載和執(zhí)行的 JavaScript。以下是正確使用 async 標(biāo)記的示例。
這段代碼會被處理，并且不依賴于big.js加載進(jìn)度。
需要注意的是，如果你的 JavaScript 必須進(jìn)行 HTML 或 CSS 操作，則使用 sync 標(biāo)記可能不是最好的方法。必須以強(qiáng)制的順序加載腳本時(shí)，應(yīng)避免使用 sync 標(biāo)記。
注意復(fù)雜的文件格式和大圖像雖然編碼錯(cuò)誤是頁面加載速度緩慢的主要原因之一，但大圖像和復(fù)雜文件格式等也會導(dǎo)致問題。一旦你使用的服務(wù)器被瀏覽器請求，它會開始將需要的每個(gè)字節(jié)都加載到用戶的移動設(shè)備或計(jì)算機(jī)上。
如果你有許多大圖像，那么加載它們需要更長的時(shí)間。這就是你需要使用文件壓縮軟件和插件的原因。雖然壓縮這些圖像的大小可能會有所幫助，但在某些情況下，你可能需要刪除一些圖像。
未使用的 .JS 庫組件許多開發(fā)人員按原樣使用 jQuery UI 之類的庫，而根本不去優(yōu)化它。這樣做可能會導(dǎo)致你根本不需要的代碼組件。如果可以選擇從 JavaScript 庫中排除哪些組件，那么你一定要抓住這個(gè)機(jī)會。通過修改這些庫中的代碼，可以為用戶提供更好的體驗(yàn)并加快你的網(wǎng)站速度。
使用 GZIP 模塊是理想的選擇雖然 gzip 是一個(gè)相對古老的發(fā)明，但在加快網(wǎng)站加載速度時(shí)絕對值得使用。這個(gè)程序能夠壓縮 Web 服務(wù)器上的文件大小，甚至可以將一些靜態(tài)文件壓縮到原始大小的 99％。
由于 JavaScript 被視為文本文件，因此可以通過用 gzip 壓縮來減少頁面加載所需的時(shí)間。
使用 Node.js 對文件壓縮也是一個(gè)好主意。以下是進(jìn)行設(shè)置的方法：
const zlib = require("zlib");
你可以通過以下幾種方式使用：
const gzip = zlib.createGzip();
const fs = require("fs");
const inp = fs.createReadStream("input.txt");
const out = fs.createWriteStream("input.txt.gz");
inp.pipe(gzip).pipe(out);
在gzip的幫助下，你可以找到并消除代碼中的重復(fù)元素。這些重復(fù)的元素也可以用歸檔字典中的小符號進(jìn)行替換。剩下的最終代碼將不會那么笨重，并且完全針對性能進(jìn)行了優(yōu)化。
Be Aware of Code Density 意識到代碼密度當(dāng)你的網(wǎng)站中包含大而密集的元素時(shí)只會減慢它的速度。像 Facebook 這樣的大型網(wǎng)站擁有超過 6000 萬行代碼。雖然你的站點(diǎn)沒有這么多代碼，但還是需要找到優(yōu)化代碼的方法，以確保能夠快速加載。
不斷審查自己的代碼并對其進(jìn)行優(yōu)化是避免問題的唯一方法。從長遠(yuǎn)來看，在代碼優(yōu)化方面投入的時(shí)間和精力肯定會得到回報(bào)。
處理太多文件請求每次新用戶訪問時(shí)，你網(wǎng)站上的每個(gè) CSS 文件、社交分享按鈕和 JavaScript 元素都會生成一個(gè)新的文件請求。即使是最強(qiáng)大和最可靠的服務(wù)器也只能在處理這么多請求時(shí)開始減速。
你需要考慮的是刪除頁面上的某些文件請求，而不是試圖弄清楚如何提高服務(wù)器的速度。
放任此此問題會導(dǎo)致在吸引用戶訪問你網(wǎng)站時(shí)遇到很多問題。你的主要目標(biāo)應(yīng)該是盡一切可能加速你的網(wǎng)站，并讓人們輕松瀏覽它。
避免使用太多插件即使你使用 WordPress 網(wǎng)站，在頁面加載速度方面也可能會遇到問題。大多數(shù)企業(yè)主使用 WordPress 模板，因?yàn)樗梢耘c他們的新網(wǎng)站一起運(yùn)行。但是，你通常還需要使用許多不同的插件來使網(wǎng)站具有更多功能。
這些插件可能是有用的，但是有太多插件會產(chǎn)生問題。如果有插件太多又試圖同時(shí)運(yùn)行，那么它將大大減慢你的網(wǎng)站速度。
客觀地看待正在使用的插件可以幫助你找出哪些插件是可以不用的。減少插件的數(shù)量將使你的 WordPress 網(wǎng)站更快。
適當(dāng)?shù)挠?CSS3 效果而不是 JavaScript一些程序員沒有意識到 CSS 的新版本可以比以舊版本做得更多。在過去 CSS 1.0 和 2.0 需要大量的 JavaScript 輔助才能實(shí)現(xiàn)高級樣式效果。但是用 CSS3 不僅可以為你提供更大的靈活性，還可以降低你的 CPU 使用率。
下面是一些代碼，你可以用 CSS3 實(shí)現(xiàn)滑塊效果而無需使用 JavaScript：
HTML:
CSS Slider
CSS
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
學(xué)習(xí)如何使用更新的工具將幫助你實(shí)現(xiàn)所追求的頁面加載速度。
定期更新內(nèi)容管理系統(tǒng)大多數(shù)企業(yè)會使用提供內(nèi)容管理功能的網(wǎng)站平臺，比如 Wix 和 WordPress 這樣的平臺，無需花費(fèi)大量時(shí)間和金錢。如果你用的是其中之一的話，則必須定期去更新它。
本文首發(fā)微信公眾號：jingchengyideng 歡迎掃描二維碼關(guān)注公眾號，每天都給你推送新鮮的前端技術(shù)文章 歡迎繼續(xù)閱讀本專欄其它高贊文章：12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目
世界頂級公司的前端面試都問些什么
CSS Flexbox 可視化手冊
過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！
從設(shè)計(jì)者的角度看 React
CSS粘性定位是怎樣工作的
一步步教你用HTML5 SVG實(shí)現(xiàn)動畫效果
程序員30歲前月薪達(dá)不到30K，該何去何從
7個(gè)開放式的前端面試題
React 教程：快速上手指南
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102789.html
摘要：今日我就和我們深化共享一下圖片優(yōu)化有必要了解的個(gè)知識點(diǎn)。一般我們能夠擬定結(jié)構(gòu)化數(shù)據(jù)規(guī)則讓技術(shù)人員設(shè)計(jì)程序批量替換圖片的特點(diǎn)，而無需我們手工操作。關(guān)于圖片地圖，我就不多說了，由于谷歌有許多輔導(dǎo)文檔來協(xié)助你提高圖片的查找排名，看這兒。 假如你運(yùn)營在線商城又或是大型電商網(wǎng)站，圖片優(yōu)化是你必需求把握的。不僅僅是從招引潛在顧客，仍是添加圖片查找流量，又或是提高網(wǎng)站加載速度，圖片優(yōu)化扮演者十分要害...
摘要：今日我就和我們深化共享一下圖片優(yōu)化有必要了解的個(gè)知識點(diǎn)。一般我們能夠擬定結(jié)構(gòu)化數(shù)據(jù)規(guī)則讓技術(shù)人員設(shè)計(jì)程序批量替換圖片的特點(diǎn)，而無需我們手工操作。關(guān)于圖片地圖，我就不多說了，由于谷歌有許多輔導(dǎo)文檔來協(xié)助你提高圖片的查找排名，看這兒。 假如你運(yùn)營在線商城又或是大型電商網(wǎng)站，圖片優(yōu)化是你必需求把握的。不僅僅是從招引潛在顧客，仍是添加圖片查找流量，又或是提高網(wǎng)站加載速度，圖片優(yōu)化扮演者十分要害...
摘要：技巧評估局部變量主要針對而言，由于局部變量的查找是從最特定作用域到最大作用域，且可以通過多個(gè)域?qū)蛹?，所以這種查找會導(dǎo)致查詢到通用的結(jié)果。 文章系國內(nèi)領(lǐng)先的 ITOM 管理平臺供應(yīng)商 OneAPM 編譯呈現(xiàn)。 您是網(wǎng)站管理員還是網(wǎng)頁開發(fā)人員?想創(chuàng)建超快速的網(wǎng)站嗎? 今天我們來看看 JavaScript，這項(xiàng)神奇而又復(fù)雜的技術(shù)。它使網(wǎng)站內(nèi)容更加豐富，但常常出現(xiàn)的運(yùn)行性能問題又降低了用戶的體...
摘要：最優(yōu)化渲染路徑，實(shí)際上只要聚焦三件事情最小化關(guān)鍵資源的數(shù)量最小化關(guān)鍵字節(jié)數(shù)最小化關(guān)鍵路徑的長度理解頁面加載速度的測量辦法當(dāng)百度談?wù)擁撁婕虞d速度時(shí)，他們并不是指加載一個(gè)網(wǎng)頁的總時(shí)間。 張超 — MAY 21, 2015 經(jīng)常有站長、開發(fā)者、運(yùn)維疑惑：為什么我們的后臺服務(wù)器很快，但是用戶要看網(wǎng)頁里面的內(nèi)容卻需要很長時(shí)間？我們在上一篇文章《怪獸大作戰(zhàn): 解析網(wǎng)站打開慢的原因》中簡單介紹了影...
閱讀 3399·2023-04-26 01:46
閱讀 2927·2023-04-25 20:55
閱讀 5500·2021-09-22 14:57
閱讀 2985·2021-08-27 16:23
閱讀 1723·2019-08-30 14:02
閱讀 2073·2019-08-26 13:44
閱讀 653·2019-08-26 12:08
閱讀 2968·2019-08-26 11:47
