手機用華為 推廣找展為

推廣有品質 網站有氣質

13933871212

首頁 > 博客教程 > 展為新聞 >

石家莊新華區外貿網站制作公司

 發布日期:2020-12-12 瀏覽:842次
石家莊新華區外貿網站制作公司使用React,我們可以在Node服務器(如Express)上使用ReactDOMServer模塊,然后調用該renderToString方法以將頂層組件呈現為靜態HTML字符串。使用Vue,我們可以使用vue-server-renderer使用來將Vue實例渲染為HTML renderToString。-在角度,我們可以用@nguniversal把客戶端的請求到服務器完全呈現HTML頁面。
 
還可以使用Next.js(React)或Nuxt.js(Vue)開箱即用地獲得完全的服務器渲染體驗。
 
該方法有其缺點。結果,我們確實獲得了客戶端應用程序的全部靈活性,同時提供了更快的服務器端渲染,但是更終,“有意義的繪畫”和“交互時間”之間的差距也越來越大,并且“首次輸入延遲”也增加了。補液非常昂貴,通常僅靠這種策略是不夠的,因為它嚴重延遲了互動時間。
 
使用漸進水化技術(SSR + CSR)進行流式服務器端渲染
為了更大程度地縮短“交互時間”與“第一內容繪畫”之間的差距,我們一次渲染多個請求,并在生成內容時分批發送內容。因此,在將內容發送到瀏覽器之前,我們不必等待HTML的完整字符串,因此可以縮短“第一個字節的時間”。
 
在React中renderToString,我們可以使用renderToNodeStream而不是來通過管道傳遞響應并將HTML向下分塊發送。在Vue中,我們可以使用可通過管道傳輸和流式傳輸的renderToStream。隨著React Suspense的出現,我們也可以為此目的使用異步渲染。
 
在客戶端,我們不是逐步啟動整個應用程序,而是逐步啟動組件。首先將應用程序的各個部分分解為具有代碼拆分功能的獨立腳本,然后逐步進行混合(按優先級順序)。實際上,我們可以先將關鍵成分水合,而其余的則可以隨后水合。然后,可以針對每個組件不同地定義客戶端和服務器端呈現的角色。然后,我們還可以推遲某些組件的水合,直到它們出現,或者用戶交互需要它們或者瀏覽器處于空閑狀態時為止。
 
對于Vue,Markus Oberlehner發布了有關減少用戶交互使用SSR應用程序互動時間的指南,以及使用vue-lazy-hydration(一種早期插件),該插件可在可見性或特定用戶交互時啟用組件水化。Angular團隊使用Ivy Universal進行漸進保濕。您也可以使用Preact和Next.js實現部分水合。
 
對于React,部分水合在Suspense路線圖上(看起來很有希望?。?。如果您喜歡冒險,Jason Miller已發布了有關如何使用React實現漸進式水合作用的工作演示,因此您可以立即使用它們:演示1,演示2,演示3(也在GitHub上提供)。另外,您可以查看react-prerendered-component庫。
 
三態渲染
在服務工作器就位之后,我們可以使用流服務器渲染進行初始/非JS導航,然后讓服務工作器在安裝HTML后進行導航的渲染。在這種情況下,服務工作者會預先呈現內容并啟用SPA樣式的導航,以在同一會話中呈現新視圖。當您可以在服務器,客戶端頁面和服務工作者之間共享相同的模板和路由代碼時,效果很好。
 
三態渲染,在任何三個位置使用相同的代碼渲染:在服務器上,在DOM中或在服務工作者中。(圖片來源:Google Developers)(大預覽)
具有Prerendering的CSR Prerendering
與服務器端渲染相似,但不是在服務器上動態渲染頁面,而是在構建時將應用程序渲染為靜態HTML。
Gatsby是使用React的開源靜態站點生成器,在構建過程中使用renderToStaticMarkupmethod而不是renderToStringmethod,主要JS塊已預加載,并且將來的路由已預取,沒有簡單靜態頁面不需要的DOM屬性。對于Vue,我們可以使用Vuepress實現相同的目標。您還可以將prerender-loader與網站制作pack一起使用。
 
結果是更好的時間到第一個字節和第一個內容豐富的繪畫,并且我們縮短了交互時間和第一個內容豐富的繪畫之間的差距。如果內容會發生很大變化,我們將無法使用該方法。另外,必須提前知道所有URL才能生成所有頁面。因此,某些組件可能使用預渲染來渲染,但是如果我們需要動態的東西,我們就必須依靠應用程序來獲取內容。
 
完整的客戶端渲染(CSR)
所有邏輯,渲染和引導均在客戶端上完成。結果通常是“互動時間”與“第一內容滿意”繪畫之間的巨大差距。結果,由于整個應用程序必須在客戶端上啟動才能呈現任何內容,因此應用程序感覺呆滯。通常,SSR比CSR快。但是,對于許多應用程序來說,這是更常見的實現。
 
那么,客戶端還是服務器端?通常,將完全客戶端框架的使用限制在絕對需要它們的頁面上是一個好主意。對于高級應用程序,也不希望僅依靠服務器端渲染。如果做得不好,服務器渲染和客戶端渲染都是災難。
 
無論您偏向CSR還是SSR,請確保盡快渲染重要像素,并更大程度地減少渲染和“互動時間”之間的差距。如果頁面變化不大,請考慮預渲染;如果可以,請考慮推遲框架的啟動。通過服務器端渲染以流方式分塊傳輸HTML,并為客戶端渲染實現漸進式水化處理-并在可見性,交互作用或空閑時間進行水化處理,以兼得兩全。
 
 
客戶端和服務器端渲染的選項范圍很廣。另外,請查看Jason和Houssein在Google I / O上有關應用程序架構的性能影響的演講。(圖片來源:杰森·米勒(Jason Miller))(大預覽)
 
AirBnB一直在嘗試漸進保濕。他們推遲了不需要的組件,增加了用戶交互(滾動)或空閑時間的負擔,測試表明它可以改善TTI。(大型預覽)
始終喜歡自行托管第三方資產。
通常,默認情況下自托管靜態資產是一個很好的經驗法則。通常會假定,如果許多站點使用相同的公共CDN和相同版本的JavaScript庫或網絡字體,那么訪問者將使用已經存儲在瀏覽器中的腳本和字體登陸我們的網站,從而大大提高了他們的體驗。但是,這種情況極不可能發生。
出于安全原因,為避免指紋,瀏覽器已實現了分區緩存,該緩存于2013年在Safari和去年的Chrome中引入。因此,如果兩個站點指向完全相同的第三方資源URL,則每個域都將下載該代碼一次,并且由于隱私問題,緩存被“沙盒化”到該域(謝謝David Calhoun?。?。因此,使用公共CDN不會自動導致更好的性能。
 
此外,值得注意的是,只要我們期望,資源就不會存在于瀏覽器的緩存中,并且第一方資產比第三方資產更有可能保留在緩存中。因此,自托管通常更可靠,更安全,并且性能也更好。
 
限制第三方腳本的影響。
在進行所有性能優化后,通常我們無法控制來自業務需求的第三方腳本。第三方腳本指標不受更終用戶體驗的影響,因此,一個腳本經常更終會調用令人討厭的第三方腳本的長尾巴,從而破壞了專門的性能工作。要遏制和減輕這些腳本帶來的性能損失,僅異步加載它們(可能通過defer)并通過諸如dns-prefetch或的資源提示來加速它們是不夠的preconnect。
所有JavaScript代碼執行時間中有57%花費在第三方代碼上,因此定期審核依賴項和標記管理器非常重要。
 
正如Yoav Weiss在關于第三方腳本的必看演講中解釋的那樣,在許多情況下,這些腳本會下載動態資源。資源在頁面加載之間變化,因此我們不必知道將從哪個主機下載資源以及它們將是什么資源。
 
那我們有什么選擇呢?考慮通過超時加速資源下載來使用服務人員,如果資源在一定的超時時間內沒有響應,請返回空響應以告知瀏覽器繼續進行頁面解析。您還可以記錄或阻止不成功或不滿足特定條件的第三方請求。如果可以,請從您自己的服務器而不是供應商的服務器中加載3rd-party-script并延遲加載它們。Eg Huddle通過創建偽造的聊天按鈕避免了頁面加載時的2.3 MB聊天小部件,該按鈕僅在單擊時下載腳本。對于大多數不使用聊天窗口小部件的用戶,這避免了不必要的下載和JavaScript執行。
 
另一種選擇是建立內容安全策略(CSP),以限制第三方腳本的影響,例如,禁止下載音頻或視頻。更好的選擇是通過嵌入腳本,<iframe>以便腳本在iframe的上下文中運行,因此無權訪問頁面的DOM,并且不能在您的域上運行任意代碼??梢允褂胹andbox屬性進一步限制iframe ,因此您可以禁用iframe可能執行的任何功能,例如,阻止腳本運行,阻止警報,表單提交,插件,訪問頂部導航等。
 
例如,可能需要允許腳本與一起運行<iframe sandbox="allow-scripts">。每個限制都可以通過屬性allow上的各種值來取消sandbox(幾乎所有地方都支持),因此將其限制為應允許的更低限度。
 
考慮使用交叉口觀察器;這樣一來,就可以在仍然分發事件或從DOM中獲取廣告所需信息(例如廣告可見性)的同時對廣告進行格式化。注意新的策略,例如功能策略,資源大小限制和CPU /帶寬優先級,以限制有害的網站制作功能和腳本,這些腳本和功能會降低瀏覽器的速度,例如同步腳本,同步XHR請求,document.write和過時的實現。
 
要對第三方進行壓力測試,請在DevTools的“性能配置文件”頁面中檢查自底向上的摘要,測試請求被阻止或超時時會發生什么情況-對于后者,您可以使用網站制作PageTest的Blackhole服務器blackhole.網站制作pagetest.org,您可以將特定域指向在您的hosts文件中。更好是自托管并使用單個主機名,而且還會生成一個請求映射,該請求映射公開第四方調用并檢測腳本何時更改。您可以使用哈里·羅伯茨(Harry Roberts)的方法來審核第三方,并生成像這樣的電子表格。哈里還在關于第三方績效和審計的演講中解釋了審計工作流程。
 
必須應對全能的Google跟蹤代碼管理器?Barry Pollards提供了一些指南,以包含Google跟蹤代碼管理器的影響。此外,克里斯汀·謝弗(Christian Schaefer)也在探索2020年加載廣告的策略。
 
Casper.com發布了一份詳細的案例研究,介紹了他們如何通過自動托管Optimizely來將站點縮短1.7秒。 可能值得。
Casper.com發布了一份詳細的案例研究,介紹了他們如何通過自動托管Optimizely來將站點縮短1.7秒??赡苤档?。(圖像來源)(大預覽)
正確設置HTTP緩存頭。
仔細檢查expires,max-age,cache-control,和其他HTTP緩存頭已正確設置。通常,資源應該可以在很短的時間內(如果可能會更改)或無限期(如果它們是靜態的)可緩存的—您可以僅在需要時在URL中更改其版本。
使用Cache-control: immutable,專為有指紋的靜態資源而設計,可避免重新驗證(在Firefox,Edge和Safari中受支持)。實際上,根據網站制作 Almanac的說法,“其使用率已增長到3.4%,并且已廣泛用于Facebook和Google的第三方響應中。”
 
還記得過時的驗證嗎?您可能知道,我們使用Cache-Control響應標頭指定了緩存時間,例如Cache-Control: max-age=604800。經過604800秒后,緩存將重新獲取請求的內容,從而導致頁面加載速度變慢。通過使用可以避免這種速度下降stale-while-revalidate;它基本上定義了一個額外的時間窗口,在此期間,緩存可以使用過時的資產,只要它可以在后臺重新驗證它的異步狀態即可。因此,它“隱藏”了客戶端的延遲(在網絡中和在服務器上)。
 
6 - 7月2019年,Chrome和Firefox推出了支持的stale-while-revalidate在HTTP Cache-Control頭,這樣的結果,應該改進后續頁面加載延遲為陳舊的資產都在關鍵路徑不再。結果:對于重復視圖,RTT為零。
 
您可以在HTTP緩存頭,Jake Archibald的“緩存更佳實踐”和Ilya Grigorik的HTTP緩存入門中使用Heroku的入門。另外,請注意variable標頭,尤其是與CDN有關的variable標頭,請注意HTTP表示形式變體,這有助于避免新請求與先前請求略有不同(但不顯著)時,需要進行額外的往返驗證(謝謝,Guy)和馬克?。?。
 
此外,仔細檢查你是不是發送不必要的報頭(例如x-powered-by,pragma,x-ua-compatible,expires和其他人)和你包括有用的安全和性能頭(如Content-Security-Policy,X-XSS-Protection,X-Content-Type-Options等)。更后,請記住單頁應用程序中CORS請求的性能成本。
 
當一切都相似時,不同就吸引了。認識網絡藝術指導,這是我們關于設計和構建引人入勝的出色體驗的新書。受到復古印刷雜志的啟發,并帶有適合您工作的代碼段。
 
跳轉到目錄?
功能面板
投放優化
您是否異步加載所有JavaScript庫?
當用戶請求頁面時,瀏覽器將獲取HTML并構建DOM,然后獲取CSS并構建CSSOM,然后通過匹配DOM和CSSOM生成渲染樹。如果需要解析任何JavaScript,瀏覽器將在解析頁面后才開始呈現頁面,從而延遲了呈現。作為開發人員,我們必須明確告知瀏覽器不要等待并開始呈現頁面。對腳本執行此操作的方法是使用HTML中的defer和async屬性。
在實踐中,事實證明,我們應該更喜歡defer到async(以成本的Internet Explorer的用戶直至并包括版本9,因為你很可能會破壞腳本他們的)。根據史蒂夫·蘇德斯(Steve Souders)的說法,一旦async腳本到達,它們將立即執行。如果這種情況發生得非??欤ɡ?,當腳本位于超前緩存中時),則它實際上可以阻止HTML解析器。使用defer,瀏覽器在解析HTML之前不會執行腳本。因此,除非需要JavaScript在開始渲染之前執行,否則更好使用defer。
 
同樣,如上所述,限制第三方庫和腳本的影響,尤其是使用社交共享按鈕和<iframe>嵌入(例如地圖)時。大小限制可幫助您防止JavaScript庫膨脹:如果您不小心添加了較大的依賴項,該工具將通知您并引發錯誤。您可以使用靜態社交共享按鈕(例如SSBG)和指向交互式地圖的靜態鏈接。
 
您可能需要修改非阻塞腳本加載程序以符合CSP要求。
 
使用IntersectionObserver和優先級提示來延遲加載昂貴的組件。
通常,更好是延遲加載所有昂貴的組件,例如沉重的JavaScript,視頻,iframe,小部件以及可能的圖像。原生懶加載已經可用于圖像和iframe中,我們可以使用importance屬性(high或low一對)<script>,<img>或<link>元素(僅閃爍)。實際上,這是對旋轉木馬或紙巾中的圖像進行優先級排序以及對腳本進行優先級排序的好方法。但是,有時我們可能需要更精細的控制。
延遲加載腳本的更高性能方法是使用Intersection Observer API,該方法提供了一種異步觀察目標元素與祖先元素或頂級文檔的視口相交的變化的方法?;旧?,您需要創建一個新IntersectionObserver對象,該對象接收一個回調函數和一組選項。然后我們添加一個觀察目標。
 
回調函數在目標變為可見或不可見時執行,因此當它攔截視口時,您可以在元素變為可見之前開始執行一些操作。實際上,我們可以控制何時調用觀察者的回調,包括rootMargin(根的邊距)和threshold(單個數字或一組數字,這些數字指示我們瞄準目標可見性的百分比)。
 
Alejandro Garcia Anglada已發布了有關如何實際實現它的便捷教程,Rahul Nanwani撰寫了有關延遲加載前景和背景圖像的詳細文章,并且Google Fundamentals還提供了關于使用Intersection Observer延遲加載圖像和視頻的詳細教程。還記得以藝術為導向的講故事,用移動的和粘滯的物體朗讀嗎?您也可以使用Intersection Observer實現表演滾動。
 
另外,請注意“功能”策略:LazyLoad將提供一種機制,使我們可以在每個域的基礎上強制啟用或退出LazyLoad功能(類似于內容安全策略的工作方式)。
 
再次檢查您還可以延遲加載什么。甚至懶加載翻譯字符串和表情符號也可能有幫助。這樣,移動Twitter設法通過新的國際化渠道將JavaScript執行速度提高了80%。
 
 
通過延遲加載翻譯字符串,移動Twitter設法通過新的國際化渠道將JavaScript執行速度提高了80%。(圖片來源:Addy Osmani)(大預覽)
逐步加載圖像。
您甚至可以通過向頁面添加漸進式圖像加載來將延遲加載提高到一個新水平。與Facebook,Pinterest和Medium類似,您可以先加載低質量甚至模糊的圖像,然后在頁面繼續加載時,使用Guy Podjarny提出的LQIP(低質量圖像占位符)技術將其替換為完整質量版本。
無論這些技術是否改善了用戶體驗,人們的看法都不同,但是它肯定會縮短首次進行有意義的繪畫的時間。我們甚至可以通過使用SQIP來自動化它,該SQIP創建低質量版本的圖像作為SVG占位符,或具有CSS線性漸變的Gradient Image占位符。這些占位符可以嵌入HTML中,因為它們可以自然地使用文本壓縮方法進行壓縮。迪恩·休姆(Dean Hume)在他的文章中描述了如何使用“交叉口觀察器”(Intersection Observer)來實現該技術。
 
瀏覽器支持?不錯,Chrome,Firefox,Edge和Samsung Internet都可以使用。當前在預覽中支持網站制作Kit狀態。倒退?如果瀏覽器不支持路口觀察,我們仍然可以延遲加載一個填充工具或立即加載圖像。甚至還有一個圖書館。
 
想成為更鴿友嗎?您可以跟蹤圖像,并使用原始形狀和邊緣創建輕量級SVG占位符,先加載它,然后從占位符矢量圖像過渡到(加載的)位圖圖像。
 
JoséM.Pérez的SVG惰性加載技術
通過SVG遲緩裝載技術何M.佩雷斯。(大型預覽)
您發送重要的CSS嗎?
為了確保瀏覽器盡快開始呈現您的頁面,收集開始呈現頁面的第一個可見部分所需的所有CSS(稱為“關鍵CSS”或“折疊式CSS”)已成為一種慣例。 ”),并將其內聯添加<head>到頁面的中,從而減少了往返次數。由于在緩慢啟動階段交換的軟件包大小有限,因此用于關鍵CSS的預算約為14KB。(此特定限制不適用于適當的TCP BBR,盡管優先級劃分關鍵資源并盡早加載它們仍然很重要)。
如果超出此范圍,瀏覽器將需要其他往返來獲取更多樣式。CriticalCSS和Critical使您能夠發現關鍵CSS。您可能需要為正在使用的每個模板執行此操作。
 
然后,您可以內嵌關鍵CSS并使用critters 網站制作pack plugin延遲加載其余的CSS 。如有可能,請考慮使用Filament Group使用的條件內聯方法,或即時將內聯代碼轉換為靜態資產。
 
如果您使用loadCSS之類的庫異步加載完整的CSS,則實際上不是必需的。使用on ,您可以誘使瀏覽器異步獲取CSS,但是一旦加載就將其應用于屏幕環境。(謝謝,斯科特?。﹎edia="print"link
 
使用HTTP / 2,關鍵CSS可以存儲在單獨的CSS文件中,并通過服務器推送來傳遞,而不會膨脹HTML。問題在于,服務器推送存在許多瀏覽器之間的陷阱和競爭條件,因此很麻煩。一直不支持它,并且存在一些緩存問題(請參閱Hooman Beheshti的演示文稿的幻燈片114以后)。實際上,這種影響可能是負面的,并且會使網絡緩沖區過大,從而無法傳送文檔中的真實框架。同樣,由于TCP啟動緩慢,服務器推送在熱連接上似乎更加有效。
 
即使使用HTTP / 1,將關鍵CSS(和其他重要資產)放在根域上的單獨文件中也有好處,有時甚至比由于緩存而內聯更為重要。在請求頁面時,Chrome推測性地打開了到根域的第二個HTTP連接,從而無需TCP連接即可獲取此CSS(謝謝Philip?。?/div>
 
需要牢記的一些陷阱:與preload可能觸發任何域的預加載不同,您只能從自己的域或您有權使用的域中推送資源。只要服務器從客戶端收到第一個請求,就可以啟動它。服務器推送的資源將存儲在Push緩存中,并在連接終止時將其刪除。但是,由于HTTP / 2連接可以在多個選項卡之間重復使用,因此推送資源也可以由其他選項卡的請求聲明。但是,我們不能依賴它,尤其是在Safari和Edge中(感謝Inian,Barry?。?。
 
目前,服務器沒有一種簡單的方法來知道推送的資源是否已經在用戶的緩存中,因此資源將隨著每個用戶的訪問而不斷推送。然后,您可能需要創建一個支持緩存的HTTP / 2服務器推送機制。如果獲取,則可以嘗試根據緩存中已存在內容的索引從緩存中獲取它們,從而完全避免輔助服務器推送。
 
一段時間以來,該cache-digest規范被認為有助于消除手動構建此類“具有緩存意識”的服務器的需要,基本上是在HTTP / 2中聲明一種新的幀類型來傳達該主機名在緩存中已經存在的內容。但是,cache-digest規范被放棄了,因此解決方案還不太明顯。(謝謝,巴里?。?。
 
對于動態內容,當服務器需要一些時間來生成響應時,瀏覽器無法發出任何請求,因為它不知道該頁面可能引用的任何子資源。在這種情況下,我們可以預熱連接并增加TCP擁塞窗口的大小,以便以后的請求可以更快地完成。同樣,所有內聯資產通常都是服務器推送的理想選擇。實際上,Inian Parameshwaran將HTTP / 2推送與HTTP Preload進行了比較出色的研究,對于您可能需要的所有詳細信息來說,這是一個很棒的閱讀。
 
底線:正如Sam Saccone所指出的,preload它有助于使資產的開始下載時間更接近初始請求,而Server Push則可以減少完整的RTT(或更多,取決于服務器的思考時間)—如果您有一個服務人員,以防止不必要的推動。
 
嘗試重新組合CSS規則。
我們已經習慣了關鍵的CSS,但是還有一些優化可能會超出此范圍。哈里·羅伯茨(Harry Roberts)進行了一項非凡的研究,結果令人驚訝。例如,將主CSS文件拆分為單獨的媒體查詢可能是個好主意。這樣,瀏覽器將檢索具有高優先級的關鍵CSS,并以低優先級檢索所有其他內容-完全脫離關鍵路徑。
另外,請避免<link rel="stylesheet" />在async摘要之前放置。如果腳本不依賴樣式表,請考慮將阻止腳本置于阻止樣式之上。如果可以,請將JavaScript分成兩部分,然后在CSS的任一側加載。
 
Scott Jehl通過與服務工作者一起緩存內聯CSS文件解決了另一個有趣的問題,如果您使用的是關鍵CSS,這是一個常見的問題?;旧?,我們在style元素上添加了一個ID屬性,以便可以使用JavaScript輕松找到它,然后一小段JavaScript找到該CSS,然后使用Cache API將其存儲在本地瀏覽器緩存中(內容類型為text/css),在后續頁面上使用。為了避免在后續頁面上內聯,而是從外部引用緩存的資產,我們在第一次訪問站點時設置了cookie。瞧!
 
值得注意的是,動態樣式也可能很昂貴,但是通常僅在您依賴于數百個同時渲染的組成組件的情況下。因此,如果您使用的是CSS-in-JS,請確保您的CSS-in-JS庫在CSS不依賴主題或prop且不過度組合樣式化組件的情況下優化執行。Aggelos Arvanitakis分享了有關CSS-in-JS性能成本的更多見解。
 

返回列表

相關新聞

CopyRight 2004-2018 JSOON NETWORK , Inc. All Rights Reserved 石家莊網絡公司展為網絡十周年? ?服務熱線:13933871212???冀ICP備14018173號-6? ?
致力于提供石家莊網站制作,石家莊網站建設,石家莊營銷型網站制作,石家莊seo,石家莊網站優化,石家莊網絡廣營銷,石家莊建網站等服務 網站地圖

深圳风采中三个有奖吗 最新麻将赌博技巧教学_点进进入 中国体育彩票新11选5 理财收益率下降 极速时时彩官方开奖网 mg注册送11元体验金 北京11选5前三走势图 秒速赛车app 股票投资价值分析巴菲特 360游戏大厅杭州麻将下载.qq杭州麻将 天津时时彩提前开奖一首页 福彩中心排列三开机号 球探比分app iphone手机捕鱼达人 美女麻将2单机下载 七星彩票论坛 北京11选5开奖结果走势图