国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談網(wǎng)站性能之前端性能優(yōu)化

Winer / 1014人閱讀

摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無(wú)非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。

最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下內(nèi)容僅為個(gè)人理解，如果本內(nèi)容大家覺得哪里寫的不對(duì)，望大家指出，供一起討論。
淺談網(wǎng)站性能之前端性能優(yōu)化

性能優(yōu)化的目的無(wú)非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。

前端性能優(yōu)化

減少 HTTP 請(qǐng)求數(shù)量

基本原理：在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過 HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對(duì)資源文件并發(fā)請(qǐng)求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請(qǐng)求數(shù)量達(dá)到一定數(shù)量，資源請(qǐng)求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請(qǐng)求數(shù)量可以很大程度上對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。

CSS Sprites：國(guó)內(nèi)俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請(qǐng)求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)，節(jié)省命名詞匯量（由命名多張圖片文件變成一張，哈哈哈）。

合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件。

采用 lazyLoad：俗稱懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。

控制資源文件加載優(yōu)先級(jí)

基本原理：說到這里就需要知道瀏覽器加載 HTML 內(nèi)容的原理，瀏覽器在加載 HTML 內(nèi)容時(shí)，是將 HTML 內(nèi)容從上至下依次解析，解析到 link 或者 script 標(biāo)簽就會(huì)加載 href 或者 src 對(duì)應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁(yè)面給用戶，就需要將 CSS 提前加載，不要受 JS 加載影響。

遵循原則：主要文件放在 head 內(nèi)部，次要文件放在 body 底部。一般情況下都是 CSS 在頭部，JS 在底部。

利用瀏覽器緩存

基本原理：瀏覽器緩存分強(qiáng)緩存和協(xié)商緩存，他們是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果命中就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。

強(qiáng)緩存：在 web 服務(wù)器返回的響應(yīng)中添加 Expires 和 Cache-Control Header。

協(xié)商緩存：通過【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對(duì) Header 分別管理。

使用 CDN

基本原理：CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。

減少重排（Reflow）

基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹上的所有其它結(jié)點(diǎn)的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁，CPU 使用率就會(huì)急劇上升。

減少 Reflow，如果需要在 DOM 操作時(shí)添加樣式，盡量使用 增加 class 屬性，而不是通過 style 操作樣式。

減少 DOM 操作

圖標(biāo)使用 IconFont 替換

花絮

在開始提筆寫這篇博客前就遇到了一個(gè)很棘手的問題，這篇博客標(biāo)題叫什么，思考了一會(huì)，我心里冒出了三個(gè)答案：

淺談網(wǎng)站性能優(yōu)化

第一個(gè)標(biāo)題網(wǎng)站性能優(yōu)化，一看標(biāo)題可以理解為是講網(wǎng)站性能，而且是對(duì)網(wǎng)站進(jìn)行優(yōu)化，描述的是一種解決方案，然而網(wǎng)站性能包括的太多了，超出了我的知識(shí)范疇，所以放棄。

淺談網(wǎng)站性能之前端性能優(yōu)化

第二個(gè)標(biāo)題正適我懷，答題概括了我本期博客內(nèi)容，既有性能介紹，又有前端性能優(yōu)化解決方案。

淺談前端性能優(yōu)化

第三個(gè)標(biāo)題前端性能優(yōu)化，心想這不就是我要寫的內(nèi)容嘛，等我寫完內(nèi)容發(fā)現(xiàn)，不對(duì)，我寫的內(nèi)容不僅僅是解決方案，好包括的其他內(nèi)容，所以放棄。

以上內(nèi)容僅為個(gè)人理解，如果本內(nèi)容大家覺得哪里寫的不對(duì)，望大家指出，供一起討論，點(diǎn)擊此處更多文章。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80382.html

相關(guān)文章

  • 淺談網(wǎng)站性能之前端性能優(yōu)化

    摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無(wú)非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...

    philadelphia 評(píng)論0 收藏0

  • React | 高效前端之淺談

    摘要：毫無(wú)疑問，作為近兩年前端三大流行框架之一，正成為程序員們最喜愛的框架。自年月開源至今，已有千萬(wàn)網(wǎng)站使用來進(jìn)行前端構(gòu)架，使之成為最受歡迎的項(xiàng)目之一。經(jīng)過這幾年的沉淀，越來越強(qiáng)大，暫不提這幾年在國(guó)內(nèi)與之間的矛盾，這其中還有很大談判空間。 showImg(https://segmentfault.com/img/bV0dY9?w=469&h=240); React在國(guó)外已被各個(gè)公司的各種產(chǎn)品...

    曹金海 評(píng)論0 收藏0

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬(wàn)惡之源。 優(yōu)化向：?jiǎn)雾?yè)應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一...

    Dean 評(píng)論0 收藏0

  • 網(wǎng)站部署

    摘要：就鹿晗宣布戀情導(dǎo)致微博宕機(jī)事件淺談大型網(wǎng)站高可用性架構(gòu)中午吃飯刷著刷著微博發(fā)現(xiàn)微博突然掛了。用戶在使用瀏覽器訪問一個(gè)網(wǎng)站時(shí)需要先通過協(xié)議向服務(wù)器發(fā)送請(qǐng)求，之后服務(wù)器返回文件與響應(yīng)信息。 webpack：從入門到真實(shí)項(xiàng)目配置 自從出現(xiàn)模塊化以后，大家可以將原本一坨代碼分離到個(gè)個(gè)模塊中，但是由此引發(fā)了一個(gè)問題。每個(gè) JS 文件都需要從服務(wù)器去拿，由此會(huì)導(dǎo)致加載速度變慢。Webpack 最主...

    endless_road 評(píng)論0 收藏0

  • 淺談前后端分離與實(shí)踐 之 nodejs 中間層服務(wù)（二）

    摘要：服務(wù)端任需要進(jìn)行校驗(yàn)來達(dá)到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請(qǐng)求時(shí)間。關(guān)于作者本人主頁(yè)本文部分圖片段落參考文章淘寶前后端分離實(shí)踐微信公眾號(hào)會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注 一、背景 書接上文，淺談前后端分離與實(shí)踐(一) 我們用mock服務(wù)器搭建起來了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進(jìn)行各自的開發(fā)...

    ddongjian0000 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<