中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

成都網(wǎng)站建設(shè)如何運(yùn)用最新的技術(shù)提升網(wǎng)頁(yè)速度和性能

2016-08-21    分類: 網(wǎng)站建設(shè)

最近更新了我們的網(wǎng)站,它是經(jīng)過(guò)了設(shè)計(jì)上的全面驗(yàn)收的。但實(shí)際上,作為軟件開發(fā)者,我們會(huì)注重很多技術(shù)相關(guān)的零碎的東西。我們的目標(biāo)是控制性能,注重性能,未來(lái)可伸展,為網(wǎng)站增添內(nèi)容是一種樂趣。接著就來(lái)告訴你,為什么我們的網(wǎng)站速度比你們的快吧(抱歉,確實(shí)是這樣的)。

性能設(shè)計(jì)

在我們的項(xiàng)目中,我們每天都會(huì)和設(shè)計(jì)師和產(chǎn)品負(fù)責(zé)人討論關(guān)于平衡美觀和性能的問題。對(duì)于我們自己的網(wǎng)站,這樣做是很簡(jiǎn)單的。簡(jiǎn)言之,我們認(rèn)為好的用戶體驗(yàn)從快速的內(nèi)容傳輸開始,也就意味著 性能 > 美觀。

好的內(nèi)容、布局、圖片和交互是吸引用戶的重要因素。這每個(gè)因素都會(huì)影響頁(yè)面的加載時(shí)間和終端用戶體驗(yàn)。每一步我們都在探討如何在獲得好的用戶體驗(yàn)和保證設(shè)計(jì)美感的同時(shí),最小化對(duì)性能的影響。

內(nèi)容優(yōu)先

我們想要把核心內(nèi)容盡快地呈現(xiàn)給用戶,意味著我們要處理好基本的 HTML 和 CSS。每個(gè)頁(yè)面都應(yīng)該達(dá)到基本的目的:傳遞信息。JS、CSS、網(wǎng)頁(yè)字體、圖片、網(wǎng)站分析等優(yōu)化都是位居于核心內(nèi)容之下的。

可控性

給理想網(wǎng)站定義了標(biāo)準(zhǔn)后,我們總結(jié)出:要想達(dá)到預(yù)期效果,就要能對(duì)網(wǎng)站各方面的控制都游刃有余。我們選擇構(gòu)建自己的靜態(tài)站點(diǎn)生成器,包括資源傳輸,并且由我們自己操控。

我們使用 作為那些不支持 或者 JS 的瀏覽器的后備元素。使用圖片的大實(shí)例確保了它在后備方案中的可行性。

生成

盡管圖片傳輸方式已經(jīng)確定了,我們?nèi)孕枰伎荚撛鯓佑行У貓?zhí)行。我喜歡元素的功能,但不喜歡寫上面那些代碼段,尤其是寫內(nèi)容時(shí)必須把它加進(jìn)去。我們不想做這么費(fèi)力的事情:每張圖片都要寫6 個(gè)實(shí)例,所以優(yōu)化這些圖片并且把它們寫在markdown文件的 里面。所以:

生成圖片

在構(gòu)建過(guò)程中,原圖片的多個(gè)實(shí)例,包括JPG, PNG和WebP格式,我們使用gulp responsive 來(lái)生成。

最小化圖片

在markdown文件中寫[圖片描述](image.jpg).

在構(gòu)建過(guò)程中使用自定義Markdown渲染器來(lái)為已經(jīng)完全成熟的 元素編譯傳統(tǒng)的markdown圖片聲明。

SVG動(dòng)畫

我們?yōu)樽约旱木W(wǎng)站選擇了特定的圖標(biāo)類型,其中SVG插圖占了主要地位。這樣做有以下幾個(gè)原因:

  • 首先,SVG的圖片比位圖更小;

  • 其二,SVG圖片本身就是響應(yīng)式的,有很棒的伸縮性, 所以不需要圖片生成及 元素;

  • 最后也是很重要的一點(diǎn),就是我們可以通過(guò)CSS來(lái)不斷改變它,賦予它新的活力!我們所有的組合頁(yè)面都有一個(gè)自定義的動(dòng)態(tài)SVG圖, 可以被概述頁(yè)面所復(fù)用。這張圖片作為我們所有組合頁(yè)面的一種循環(huán)風(fēng)格,使得頁(yè)面設(shè)計(jì)一體化,同時(shí)又幾乎不會(huì)對(duì)性能造成影響。請(qǐng)看這張動(dòng)畫,看看我們是如何用CSS來(lái)改變它的。

自定義網(wǎng)頁(yè)字體

在深入之前,這里有一個(gè)關(guān)于在瀏覽器設(shè)置自定義字體的簡(jiǎn)短介紹。當(dāng)瀏覽器發(fā)現(xiàn)CSS里面有 @font-face 的定義,但是用戶的電腦并不支持該字體時(shí),它會(huì)嘗試下載該字體文件。在下載時(shí),多數(shù)瀏覽器根本不會(huì)用這種字體來(lái)展示文本。這種現(xiàn)象稱為“不可見文本的閃現(xiàn)” 或者FOIT。如果你有留意,你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)上都有這種情況存在。如果你問我,我會(huì)告訴你這會(huì)影響用戶體驗(yàn)。它延遲了用戶讀取他們所需內(nèi)容的時(shí)間。我們可以迫使瀏覽器改變這種行為,變成 “無(wú)樣式內(nèi)容閃現(xiàn)” 或者稱為FOUT。我們告訴瀏覽器先使用普通字體,像 Arial 或者 Georgia。當(dāng)自定義的字體下載完成后,再代替標(biāo)準(zhǔn)字體并且重新渲染。這樣,即使自定義字體下載失敗,仍然不會(huì)影響內(nèi)容的可讀性。然而,有人會(huì)認(rèn)為這是一種妥協(xié)的做法,但我們認(rèn)為自定義字體只是一種優(yōu)化。盡管沒有自定義字體,網(wǎng)頁(yè)看起來(lái)也完好,也能百分百的正常運(yùn)行。勾選/不勾選復(fù)選框來(lái)切換我們的網(wǎng)頁(yè)字體,來(lái)自己體驗(yàn)一下:

切換下載的字體類 使用自定義網(wǎng)頁(yè)字體可以改善我們的用戶體驗(yàn),只要你能夠優(yōu)化他們,并且負(fù)責(zé)任地為之服務(wù)。

字型子集設(shè)定

到目前為止,子集設(shè)定是改善網(wǎng)頁(yè)字體性能最快的方式。我將會(huì)向每個(gè)使用自定義字體的網(wǎng)頁(yè)開發(fā)者推薦它。如果你能完全控制網(wǎng)頁(yè)內(nèi)容,并且知道它將要展示哪些特性的話,你可以完全使用子集設(shè)定。但是,即使是僅僅把字體設(shè)為西方語(yǔ)言,也會(huì)對(duì)文件大小造成很大的影響。例如,我們的Noto Regular WOFF 字體,默認(rèn)是246KB,將其設(shè)為西方語(yǔ)言后,大小下降到31KB。我們使用Font squirrel webfont, 這種字體真的很易用。

字體監(jiān)聽器

Bram Stein 推出的字體監(jiān)聽器是一個(gè)很了不起的腳本,可以幫助檢查字體是否已被加載。至于你是如何加載字體的,是通過(guò)一個(gè)網(wǎng)頁(yè)字體服務(wù),還是自己上傳就不可知了。在這個(gè)監(jiān)聽器告訴我們所有自定義的字體已經(jīng)下載完畢后,我們就可以在 元素上添加一個(gè)字體加載完畢的類,我們的頁(yè)面就會(huì)重新用新的字體:

html{font-family:Georgia,serif; }html.fonts-loaded{font- family : Noto, Georgia,serif; }

注意: 為了簡(jiǎn)短,我沒有給上面CSS中的Noto 加上@font-face 的聲明。

我們可以設(shè)定一個(gè)cookie來(lái)記住所有的字體已經(jīng)被加載過(guò),就可以讓他們緩存在瀏覽器里面了。我們使用這個(gè)cookie來(lái)做重復(fù)的瀏覽,這個(gè)我后續(xù)會(huì)解釋。

在不久的將來(lái),我們或許不需要 Bram Stein 的腳本來(lái)監(jiān)聽這個(gè)行為。CSS開發(fā)團(tuán)隊(duì)已經(jīng)提案一個(gè)新的@font-face 描述器,也叫font-display。它的屬性值控制著一個(gè)可下載的字體是如何在還沒加載出來(lái)時(shí)就渲染頁(yè)面的。這是CSS對(duì) font-display的描述:它將帶給我們像上面方法一樣的行為效果。你可以讀讀更多關(guān)于font-display 的屬性。

JS和CSS懶加載

一般來(lái)講,我們都是盡可能快的加載需要的資源。我們移除一些堵塞的請(qǐng)求來(lái)加快頁(yè)面渲染,優(yōu)化首屏,用瀏覽器緩存來(lái)處理重復(fù)的頁(yè)面。

JS懶加載

設(shè)計(jì)上,我們的網(wǎng)站并沒有很多JS。我們發(fā)展了一個(gè)JavaScript工作流來(lái)處理我們目前已有的js, 以及未來(lái)會(huì)用到的js資源。

JS在 塊里面渲染,這是我們想要的。JS應(yīng)該只是用來(lái)提高用戶體驗(yàn),不應(yīng)該是訪問者需要的關(guān)鍵。處理JS堵塞渲染的簡(jiǎn)單方法就是把腳本放在頁(yè)面的尾部。這樣網(wǎng)頁(yè)就會(huì)在整個(gè)HTML 渲染完畢后才去加載JS。

另一種可以把腳本放在head 執(zhí)行的方案是在

我們把這小段腳本放在頁(yè)面頭部,來(lái)檢測(cè)瀏覽器是否支持原生JavaScript的 document.querySelector 和window.addEventListener 屬性。如果支持,我們通過(guò)

當(dāng)前名稱:成都網(wǎng)站建設(shè)如何運(yùn)用最新的技術(shù)提升網(wǎng)頁(yè)速度和性能
分享路徑:http://m.rwnh.cn/news/42117.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
新平| 栾城县| 印江| 曲周县| 凌源市| 大姚县| 武宣县| 古丈县| 靖州| 姜堰市| 军事| 新龙县| 刚察县| 崇阳县| 根河市| 黔江区| 昆明市| 左贡县| 西林县| 尼木县| 林州市| 富裕县| 顺昌县| 鄄城县| 蓝山县| 如皋市| 岳阳市| 四平市| 恩平市| 外汇| 湟中县| 申扎县| 克什克腾旗| 福清市| 东兰县| 昌江| 闸北区| 宜城市| 武城县| 武义县| 庐江县|