tag web性能優化

標籤
貢獻13
14
02:40 PM · Nov 23 ,2025
minnanitkong 頭像 delai 頭像 zhengcaiyunqianduantuandui 頭像 lichking24 頭像 jdcdevloper 頭像 _west 頭像 gaoshu883 頭像 wecteam 頭像 wuyuedexingkong 頭像 samchow 頭像 claiyre_58c4faf69a458 頭像 oneapm_official 頭像

@web性能優化 / 博客 RSS 訂閱

minnanitkong 頭像

王大冶 - Web 性能優化： 使用 React.memo() 提高 React 組件性能

想閲讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！ 這是 Web 性能優化的第四篇，之前的可以在下面點擊查看： Web 性能優化： 使用 Webpack 分離數據的正確方法 Web 性能優化： 圖片優化讓網站大小減少 62% Web 性能優化： 緩存 React 事件來提高性能 React.js 核心團隊一直在努力使 React 變得更快，就像燃燒的速度一樣。為了讓開

react , web性能優化 , 程序員 , 前端

收藏 評論

liusaint1992 頭像

liusaint1992 - 前端性能優化小結

http優化，加大併發，減少請求數量以及傳輸量 domain hash技術突破併發限制。http1.x瀏覽器對於發起的連接有併發限制，這個限制是針對域名的，所以將靜態資源放在多個不同的域名下，也可以突破這個限制。但是也不宜使用太多域名。會增加額外的dns解析成本。 合理使用http頭。使用expires,cache-control,Etags等http頭緩存靜態資源。這篇文章介紹的很詳

前端性能優化 , web性能優化

收藏 評論

oneapm_official 頭像

OneAPM藍海訊通 - HTTP/2 對 Web 性能的影響（下）

一.前言 我們在 HTTP/2 對 Web 性能的影響（上）已經和大家分享了一些關於 Http2 的二項制幀、多用復路以及 APM 工具等，本文作為姊妹篇，主要從 http2 對 Web 性能的影響、http2 使用的利弊以及一些正在進行中的相關工作等方面與大家進行分享。 二.Web 性能影響：與內聯、級聯及圖像精靈説再見？ HTTP/2 多路複用對前端 Web 開發人員造成了深遠的影響。長久以來

web性能優化

收藏 評論

claiyre_58c4faf69a458 頭像

Claiyre - 從網絡通信角度談web性能優化

博客原文地址：Claiyre的個人博客 https://claiyre.github.io 如需轉載，請在文章開頭註明原文地址 衡量一個網站的性能有多個指標，DNS解析時間，TCP鏈接時間，HTTP重定向時間，等待服務器響應時間等等，從用户角度來看，就可以歸結為該網站訪問速度的快慢。也就是説性能等於網站的訪問速度。 早些年Amazon曾經做過一個統計：網頁加載時間每延長1秒鐘

web性能優化

收藏 評論

delai 頭像

德來 - 預加載系列一：DNS Prefetching 的正確使用姿勢

發現 很多人都知道現代瀏覽器都支持 DNS 的預解析，學名：DNS Prefetching。用法也很簡單，就是在html代碼里加入這樣的 link 標籤 link rel="dns-prefetch" href="//delai.me" 我們之前的用法是在 Head 為2個 靜態資源服務器的域名 和 日誌圖片的域名 建了3條 dns-prefetch link。 link rel="dns-pre

prefetch , dns , web性能優化 , 前端

收藏 評論

delai 頭像

德來 - JS 一定要放在 Body 的最底部麼？聊聊瀏覽器的渲染機制

説明： 本文提到的瀏覽器均是指Chrome。 “script標籤“指的都是普通的不帶其他屬性的外聯javascript。 web性能優化的手段並不是非黑即白的，有些手段過頭了反而降低性能，所以在討論條件和結論的時候，雖然很多條件本身會帶來其他細微的負面或正面影響，為了不使論述失去重點，不會擴展太開。 一、從一個面試題説起 面試前端的時候我喜歡問一些看上去

瀏覽器原理 , web性能優化 , Javascript

收藏 評論

samchow 頭像

samchowgo - 瀏覽器線程阻塞和無阻塞加載腳本的理解

一個頁面，從被請求訪問，到用户可以看到頁面、操作頁面，到最後頁面完全加載完畢，中間需要經歷一個相當奇幻的過程，這個過程的速度被“web性能師”孜孜不倦、前赴後繼的優化。本文討論的是其中一個優化。 瀏覽器線程和阻塞 雖然大家耳熟能詳的一句話是： JavaScript是單線程的。 但是： 瀏覽器當然不是單線程的。 瀏覽器的多線程中，有的線程負責加載資源，有的線程負責執行腳本，有的線程負責渲

web性能優化

收藏 評論

wuyuedexingkong 頭像

五月的星空 - web性能優化規則

1、減少HTTP請求 why 減少響應時間。 how CSS Sprites 合併樣式腳本 內聯圖片（使用data:URL模式可以在web頁面中包含圖片但不需要額外的HTTP請求） 2、使用內容發佈網絡（CDN） why 瀏覽器是根據域(Domain)來緩存內容資源的，只要域不一樣，那麼它就需要重複下載這些資源，而且使用同樣的方式將它們緩存起來。 帶來的問題：重複地下載，這會佔用網絡資源

web性能優化 , Javascript

收藏 評論

lichking24 頭像

LichKing24 - Vue項目構建持續集成阿里雲CDN

CDN加速是Web應用性能優化和用户體驗提升的至關重要的一環，當一個項目構建部署時，就需要考慮到如何高效的去完成相關資源的CDN部署。 本文以一個基於 vue-cli3 構建的項目實例，來簡單講解如何配合Teamcity，自動進行阿里雲CDN資源部署和持續集成。 項目構建 vue-cli3 默認支持將項目以 test、development、production 三種模式構建，其中 product

web性能優化 , webpack , cdn , ci , vue-cli

收藏 評論

delai 頭像

德來 - 預加載系列二：讓File Prefetching絲絲潤滑無痛無癢

所謂 File Prefetching 就是在一個頁面加載成功後，默默去預加載後續可能會被訪問到的頁面的資源。 前端資源預加載其實沒啥新鮮的，我們倒騰這個事情的過程卻是很有有意思也很有啓發性。 第一個版本，簡單粗暴有點痛 1、建一個獨立的頁面，裏面索引了各種需要預加載的css、js，代碼類似下面這樣。 html head link rel="stylesheet" hre

prefetch , web性能優化 , 緩存 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 淺談HTTP緩存與CDN緩存的那點事

HTTP緩存與CDN緩存一直是提升web性能的兩大利器，合理的緩存配置可以降低帶寬成本、減輕服務器壓力、提升用户的體驗。而不合理的緩存配置會導致資源界面無法及時更新，從而引發一系列的衍生問題。本文將分別將從HTTP緩存與cdn緩存的規則、流程、配置入手，能讓大家瞭解基礎概念的同時，可對自己的項目配置定製化的緩存調優方案，以及在遇到緩存問題時如何快速定位解決。 首先，讓我們來了解一下緩存在實際場景中

web性能優化 , http緩存 , cdn緩存 , 緩存設計

收藏 評論

lichking24 頭像

LichKing24 - Web應用性能優化隨筆

優化思路是什麼？ BIG QUESTION: 當我們談到一個web應用的性能優化，應該從哪些方面去考慮？ 思路就是，當我們去訪問一個web應用的時候，都做了哪些操作？對應這些操作的，就是我們所能進行的優化的模塊！ 瀏覽器請求DNS服務器，獲取IP地址； 建立TCP連接； 瀏覽器發出詳細請求，通常為HTTP(s)、WebSocket之類； 服務器響應請求，並返回數據； 瀏覽器渲染返回的數

web性能優化

收藏 評論

zhengcaiyunqianduantuandui 頭像

政採雲前端團隊 - ZooTeam 前端週刊｜第 54 期

政採雲前端小報第54期 瀏覽更多往期小報，請訪問： https://weekly.zoo.team ES6、ES7、ES8、ES9、ES10新特性一覽 掌握不斷更新的ES新特性 從程序媛角度去看項目管理 | Aotu.io「凹凸實驗室」 項目管理一般是從技術負責人、項目產品負責人的角度去看的，程序員雖然碼代碼很重要，但對項目的領悟能力也同樣重要。我們經常會遇到各種困惑：手上的項目需求越來越

node.js , web性能優化 , ecmascript , Css , 前端

收藏 評論

minnanitkong 頭像

王大冶 - Web 性能優化：理解及使用 JavaScript 緩存

阿里雲最近在做活動，低至2折，有興趣可以看看： https://promotion.aliyun.com/... 為了保證的可讀性，本文采用意譯而非直譯。 這是 Web 性能優化的第 5 篇，上一篇在下面看點擊查看： Web 性能優化：使用 Webpack 分離數據的正確方法 Web 性能優化：圖片優化讓網站大小減少 62% Web 性能優化：緩存 React 事件來提高性能

web性能優化 , 程序員 , 前端 , Javascript

收藏 評論

wecteam 頭像

WecTeam - 【譯】Web內容如何影響電池的使用

原文地址：https://webkit.org/blog/8970/... 原文作者：Benjamin Poulain Simon Fraser 譯者：劉輝 校驗：李剛鬆 現在用户上網大多使用移動設備或者筆記本電腦。對這兩者來説，電池壽命都很重要。在這篇文章裏，我們將討論影響電池壽命的因素，以及作為一個web開發者，我們如何讓網頁耗電更少，以便用户有更多時間來關注我們的內容。

web性能優化 , Javascript

收藏 評論

minnanitkong 頭像

王大冶 - Web 性能優化： 圖片優化讓網站大小減少 62%

阿里雲最近在做活動，低至2折，有興趣可以看看： https://promotion.aliyun.com/... 為了保證的可讀性，本文采用意譯而非直譯。 這是 Web 性能優化的第二篇，上一篇在下面看點擊查看： Web 性能優化： 使用 Webpack 分離數據的正確方法 圖像是web上提供的最基本的內容類型之一。他們説一張圖片勝過千言萬語。但是如果你不小心的話，圖片大小有時

圖片處理 , web性能優化 , 程序員 , 前端

收藏 評論

zhengcaiyunqianduantuandui 頭像

政採雲前端團隊 - ZooTeam 前端週刊｜第 59 期

政採雲前端小報第59期 瀏覽更多往期小報，請訪問： https://weekly.zoo.team 扛住100億次請求？我們來試一試 實現單機支持100萬用户，同時模擬了2015年微信紅包的1400萬QPS的場景，讓服務器在壓力下，輕鬆地完成業務。 深入淺出 SWR 原理 - 知乎 本文主要是基於 SWR 源碼對其原理進行分析，但並不會直接從源碼開始，而是從實際需求場景一步一步推導進而實現

hooks , web性能優化 , babel7 , 微前端 , 前端

收藏 評論

minnanitkong 頭像

王大冶 - Web 性能優化：21種優化CSS和加快網站速度的方法

阿里雲最近在做活動，低至2折，有興趣可以看看： https://promotion.aliyun.com/... 為了保證的可讀性，本文采用意譯而非直譯。 這是 Web 性能優化的第 4 篇，上一篇在下面看點擊查看： Web 性能優化：使用 Webpack 分離數據的正確方法 Web 性能優化：圖片優化讓網站大小減少 62% Web 性能優化：緩存 React 事件來提高性能

web性能優化 , Css , 程序員 , 前端 , Javascript

收藏 評論

gaoshu883 頭像

gaoshu883 - Web性能優化系列之一工具篇

WEB性能優化，是前端不可避免的問題，值得拿來好好思考一番，然後搞明白： 為什麼需要考慮這個問題 如何去衡量這個問題 如何解決這個問題 每個人都有自己的對問題的思考方式和路徑，今天不妨就按照我的思路走一走吧。 雖然，這篇文章的標題突出的是工具，但具體闡述這個問題之前，先回答：為什麼需要考慮這個問題？答案，因為WEB性能差，用户體驗差... 為了提高面對WEB應用時的用户體驗，我們決定對W

web性能優化

收藏 評論

_west 頭像

_west - 網頁加載性能優化方法研究

網頁的加載性能是影響用户體驗的最重要因素，頁面加載時間過長，極有可能會令用户直接關閉網頁，即使網頁本身的流程和UI等方面優化得再出色，也不會有任何價值。本文將以優化網頁加載性能的角度出發，介紹網頁渲染的過程以及各類資源阻塞網頁渲染的情況，並給出優化的方向。 （本文以Chrome為主瀏覽器進行討論，其他瀏覽器可能會存在細微不同的情況，不在本文討論的範圍） 網頁的渲染過程 五個步驟 想要知道如何

web性能優化

收藏 評論