了解JavaScript基礎:備忘單

[ad_1]

了解JavaScript基礎:備忘單

JavaScript是一個複雜的主題,可能很難理解。

但是,了解它從來沒有像現在這樣重要,因為JavaScript在我們管理的網站上正變得越來越普遍。

隨著現代網路的不斷發展, JavaScript使用率持續上升

當網站是靜態的並且僅使用HTML和CSS進行編碼時,SEO專業人員可能會花很長時間了。但是,吸引人的網站通常需要交互性,而交互性通常由JavaScript驅動。

HTTP存檔圖顯示了Web上JavaScript位元組的增加」 width =「 760」 height =「 354」 size =「(最大寬度:760px)100vw,760px」 srcset =「 https://cdn.searchenginejournal.com/wp -content / uploads / 2019/01 / javascript-bytes-http-archive-768x358.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive- 480x224.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive-680x317.png 680w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / javascript-bytes-http-archive.png 1000w「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive- 768x358.png在過去三年中,台式機上的JavaScript位元組數增加了35%,移動設備上的JavaScript位元組數增加了62.7%。

正如Google網站站長趨勢分析師約翰·穆勒(John Mueller)所說:JavaScript不會「消失」。

這種編程語言無處不在,因此我們應該更好地熟悉它。讓我們保持主動,並更多地了解JavaScript,而不用擔心。

經常會有一個誤解,認為JavaScript僅供開發人員使用。

我會說事實並非如此,因為對於希望客戶和搜索引擎能夠訪問其網站內容的人來說,這可能會引起問題。

如果您不完全了解JavaScript,或者甚至完全不知道JavaScript的含義或用途,請不要擔心。

我整理了一些辭彙表和基本概念,您應該了解這些辭彙表和基本概念,以幫助您開始探索之旅。

什麼是JavaScript?

JavaScript是一種編程語言,使您可以在網站上實現複雜的功能,例如動態元素或交互性。

一旦解析並構造了源代碼中來自HTML和CSS的信息,便會執行JavaScript。

然後,JavaScript將觸發其中指定的任何事件或變數,文檔對象模型(DOM)將被更新,最後,JavaScript將在瀏覽器中呈現。

HTML和CSS通常會構成頁面結構的基礎,而任何JavaScript都會進行最終的調整和改動。

文檔對象模型(DOM)

文檔對象模型(DOM)是在載入頁面時創建的,它由節點和對象組成,這些節點和對象映射了頁面上的所有不同元素和屬性。

以這種方式映射頁面,以便其他程序可以根據頁面的結構,內容和樣式來修改和操作頁面。

顯示如何布置文檔對象模型的示例圖「 width =」 480「 height =」 341「 Size =」(最大寬度:480px)100vw,480px「 srcset =」 https://cdn.searchenginejournal.com/ wp-content / uploads / 2019/01 / dom-example-480x341.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dom-example.png 490w「 src =」 https ://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dom-example-480x341.png

通過使用JavaScript之類的語言,可以更改頁面DOM的元素。

ECMAScript

ECMAScript(ES)是一種腳本語言,旨在標準化JavaScript代碼的使用。

隨著語言的更新和調整,會發布不同版本的ECMAScript,例如ES5和ES6(也稱為ES2015)。

轉碼

編譯器是將源代碼轉換為其他編程語言的工具。這個概念有點像Google Translate,但用於代碼。

您可以將特定的源語言轉換為其他目標語言,例如,JavaScript轉換為C ++或Python轉換為Ruby。

特別是在JavaScript渲染方面,通常建議使用編譯器將ES6轉換為ES5,因為Google當前使用的是舊版Chrome渲染,尚不支持ES6。

鍍鉻41

呈現網頁時,Google使用 網頁渲染服務 該產品基於Chrome41。這意味著Google的呈現引擎支持與該特定版本的Chrome相同的功能。

當您認為最新版本是Chrome 71時,您會發現自從 Chrome 41於2015年上線,並且所有這些版本都具有新功能。這就是Google的渲染服務當前支持ES5而不是該語言的更高ES6版本的原因。

單頁應用程序(SPA)

單頁應用程序(SPA)是一個網站或Web應用程序,當用戶與頁面交互時會動態地重寫和重新呈現頁面,而不是向伺服器單獨請求新的HTML和內容。

JavaScript框架可用於支持SPA的動態變化元素。

Angular,Polymer,React和Vue

這些都是不同類型的JavaScript框架。

  • 角度的 和Polymer由Google開發。
  • React是由Facebook開發的。
  • Vue由 埃文·尤,曾在Google的Angular團隊工作。

Angular,Polymer,React和Vue JavaScript框架徽標「 width =」 760「 height =」 293「 Size =」(最大寬度:760px)100vw,760px「 srcset =」 https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / javascript-frameworks-768x296.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-480x185.png 480w,https:// cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-680x262.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks.png 1000w「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-768x296.png

每個JavaScript框架都有自己的優缺點,因此開發人員將選擇最適合他們的框架以及正在從事的項目。

如果您想詳細了解不同框架的衡量標準, 本指南 進行了詳細的比較。

JavaScript渲染

JavaScript渲染包括獲取腳本及其包含的指令,對其進行全部處理,然後運行它,以便在瀏覽器中顯示所需的輸出。

您可以使用許多不同的方法來控制JavaScript的呈現方式。

要求在頁面上呈現JavaScript會對兩個關鍵領域產生負面影響:

  • 網站速度
  • 搜索引擎爬網和索引

根據您使用的呈現方法,您可以降低頁面載入速度,並確保搜索引擎可以訪問內容以進行爬網和建立索引。

預渲染

預呈現涉及在用戶或搜索引擎請求內容之前在頁面上呈現內容,以便他們接收一個靜態頁面,其中所有內容都準備就緒。

通過以這種方式預載入頁面,這意味著您的內容將可以訪問,而不是搜索引擎或用戶的瀏覽器必須自己呈現頁面。

預渲染通常用於搜索引擎機器人,而不是人類。這是因為靜態的,預渲染的頁面將缺乏用戶的吸引力,因為它缺少任何動態內容或交互性。

伺服器端渲染

託管伺服器會進行繁重的工作並呈現頁面,以便已經處理了JavaScript,並且可以根據要求將內容準備好移交給用戶的瀏覽器或搜索引擎搜尋器。

伺服器端渲染「 width =」 760「 height =」 225「 size =」(最大寬度:760px)100vw,760px「 srcset =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/ 01 / server-side-rendering-768x227.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-480x142.png 480w,https:// cdn。 searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-680x201.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering .png 1000w「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-768x227.png

此方法有助於減少可能由於處理JavaScript而對用戶設備造成的壓力,並且可以提高頁面載入速度。

伺服器端渲染還可以確保搜索引擎可以看到全部內容並為其建立索引。

客戶端渲染

在客戶端渲染期間,JavaScript由用戶的瀏覽器或請求頁面的搜索引擎處理。

伺服器將處理初始請求,但是處理和呈現頁面的其餘工作將落在用戶的設備或搜索引擎上。

客戶端渲染「 width =」 760「 height =」 227「 size =」(最大寬度:760px)100vw,760px「 srcset =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/ 01 / client-side-rendering-768x229.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-480x143.png 480w,https:// cdn。 searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-680x203.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering .png 1000w「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-768x229.png

通常建議不要使用客戶端渲染,因為在Google抓取頁面之間進行渲染之間存在一定的延遲。

Google將需要呈現的頁面放入隊列,直到有足夠的資源來處理它們為止。

如果您依靠Google呈現網頁的客戶端,這可能會使索引在最初被抓取後最多延遲一周。

動態渲染

動態呈現涉及根據用戶的瀏覽器還是搜索引擎機器人正在請求頁面而使用不同的呈現方法。

如果您的網站通常呈現客戶端,則在檢測到Googlebot時,將使用小型客戶端呈現器(例如, 木偶戲 要麼 Rendertron),這樣就可以立即看到內容並將其編入索引。

動態渲染「 width =」 760「 height =」 381「 size =」(最大寬度:760px)100vw,760px「 srcset =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/ dynamic-rendering-768x385.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering-480x240.png 480w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / dynamic-rendering-680x341.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering.png 1000w「 src =」 https:/ /cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering-768x385.png

混合渲染

混合渲染涉及伺服器端渲染和客戶端渲染的組合。

核心內容是在伺服器端預呈現的,並發送到客戶端,無論是用戶的瀏覽器還是請求內容的搜索引擎搜尋器。

最初載入頁面後,隨後將在客戶端呈現用於任何交互的其他JavaScript。

混合渲染「 width =」 760「 height =」 451「 size =」(最大寬度:760px)100vw,760px「 srcset =」 https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/ hybrid-rendering-768x456.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering-480x285.png 480w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / hybrid-rendering-680x404.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering.png 1000w「 src =」 https:/ /cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering-768x456.png結論

希望本指南對您有所幫助,並且可以幫助您更好地了解JavaScript的基礎知識及其對網站的影響。

既然您已經熟悉了關鍵術語,那麼您應該可以更好地掌握自己與開發者的對話了!

圖片積分

特色圖片:Paulo Bobita
發布後圖片1:HTTP存檔
後期圖片2:計算機希望
作者拍攝的所有屏幕截圖

相關文章