前端面試題大合集8----性能優化篇

一、哪些方法可以提升網站前端性能

1、Http請求優化

主要分為減少Http請求次數,減小請求數據量和緩存三方面。

  • 減少Http請求次數,可以通過以下方法實現:

合并js、css文件;使用css-spirites技術合并圖片;壓縮圖片大小,避免使用多個域名;

  • 減小請求的數據量來降低網絡帶寬消耗

這樣一來,可以提高頁面加載速度。實現方式包括:壓縮JS、CSS文件;開啟gzip壓縮響應數據,精簡html代碼

  • 緩存

在瀏覽器緩存中緩存靜態資源則可以減少Http請求次數,提高頁面加載速度。可以通過設置Expires頭信息;設置Cache-control頭信息,使用Etag頭信息等方式來實現強緩存或者協商緩存。

2、資源加載請求優化

主要分為異步加載js文件、延遲加載圖片、使用CDN三種方法。

  • 異步加載js文件

即采用諸如async、defer等方式將JS文件異步加載,避免JS阻塞頁面渲染的情況,提高頁面加載速度

  • 延遲加載圖片

避免在頁面加載同時請求大量圖片,降低網絡帶寬消耗,提高頁面加載速度,期間可以次采用骨架屏等方式來提高用戶體驗

  • 使用CDN

即利用CDN將資源分發到離用戶更近的服務器上,提高資源加載速度

3、頁面渲染優化

主要包括:減少Dom操作次數、避免table布局、采用Css動畫等

  • 減少Dom操作次數

可以減輕瀏覽器的負擔,提高頁面渲染速度,主要通過緩存Dom元素和一次性對Dom元素進行修改來實現

  • 避免table布局

table布局牽一發而動全身,修改一個小標簽會使得頁面渲染速度變慢,建議使用div+css布局或者flex布局

  • 使用CSS動畫

代替JavaScript動畫。CSS動畫可以減少JS操作DOM的次數,提高頁面渲染速度。

4、代碼優化

主要分為避免使用全局變量、優化重復執行代碼兩個方面

  • 避免使用全局變量。過多的全局變量會占用過多的內存空間,影響頁面性能,為此我們使用命名空間避免全局變量污染或者將全局變量封裝在閉包中。
  • 將重復執行的代碼進行優化。將重復執行的代碼進行優化可以減少代碼運行時間,提高頁面渲染速度,通過緩存DOM元素、事件委托等形式都可以實現。

綜上所述,前端性能優化是提高用戶體驗的重要手段,以上共講述了四點,在日常學習工作中,我們應該根據具體的項目需求選擇合適的優化手段,從而提高頁面加載速度和渲染速度。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/18184.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/18184.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/18184.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTML+CSS+JS簡易計算器

HTMLCSSJS簡易計算器 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>簡易計算器</t…

AAA實驗配置

一、實驗目的 掌握AAA本地認證的配置方法 掌握AAA本地授權的配置方法 掌握AAA維護的方法 1.搭建實驗拓撲圖 2.完成基礎配置&#xff1a; 3.使用ping命令測試兩臺設備的連通性&#xff1a; 二、配置AAA 1.打開R1&#xff1a;配置AAA方案 這兩個方框內的可以改名&#xff0c…

百度頁面奔跑的白熊html、css

一、相關知識-動畫 1.基本使用&#xff1a;先定義再調用 2. 調用動畫 用keyframes定義動畫&#xff08;類似定義類選擇器&#xff09; keyframes動畫名稱{ 0%{ width:100px&#xff1b; } 100%{ width:200px; } } 使用動畫 div { width:200px; height:200px; background-…

前端面試題日常練-day28 【面試題】

題目 希望這些選擇題能夠幫助您進行前端面試的準備&#xff0c;答案在文末。 1. 在Vue中&#xff0c;以下哪個選項用于監聽組件生命周期鉤子函數&#xff1f; a) watch b) computed c) lifecycle d) created 2. 在Vue中&#xff0c;以下哪個選項用于在列表渲染時為每個元素…

Pytorch線性模型(Linear Model)

基本步驟 ①首先準備好數據集&#xff08;DataSet&#xff09; ②模型的選擇或者設計&#xff08;Model&#xff09; ③進行訓練&#xff08;Train&#xff09;大部分模型都需要訓練&#xff0c;有些不需要。這一步后我們會確定不同特征的權重 ④推理&#xff08;inferring…

開封旅游三天兩夜旅游攻略

開封是一座歷史悠久的城市&#xff0c;有著豐富的文化遺產和美食。以下是一個三天兩夜的開封旅游攻略&#xff0c;供你參考&#xff1a; 一、行程安排 第一天&#xff1a; 上午&#xff1a;抵達開封&#xff0c;前往酒店辦理入住手續。隨后參觀開封博物館&#xff0c;了解開封…

【Python安全攻防】【網絡安全】一、常見被動信息搜集手段

一、IP查詢 原理&#xff1a;通過目標URL查詢目標的IP地址。 所需庫&#xff1a;socket Python代碼示例&#xff1a; import socketip socket.gethostbyname(www.163.com) print(ip)上述代碼中&#xff0c;使用gethostbyname函數。該函數位于Python內置的socket庫中&#xf…

廣場舞團|基于SprinBoot+vue的廣場舞團系統(源碼+數據庫+文檔)

廣場舞團系統 目錄 基于SprinBootvue的廣場舞團系統 一、前言 二、系統設計 三、系統功能設計 1 系統功能模塊 2 后臺登錄模塊 5.2.1管理員功能模塊 5.2.2社團功能模塊 5.2.3用戶功能模塊 四、數據庫設計 五、核心代碼 六、論文參考 七、最新計算機畢設選題推…

Pytorch-06 使用GPU加速計算

要在PyTorch中使用GPU加速計算&#xff0c;需要將模型和數據移動到GPU上進行處理。以下是上一節演示修改后的示例代碼&#xff0c;展示了如何在訓練過程中利用GPU加速計算&#xff1a; import torch import torch.nn as nn import torch.optim as optim import time# 檢查GPU是…

2024-05-28 問AI: 在深度學習中,什么是反向隨機失活?

文心一言 在深度學習中&#xff0c;反向隨機失活&#xff08;Inverse Randomized Elimination&#xff0c;通常稱為Dropout&#xff09;是一種在訓練深度神經網絡時常用的正則化技術&#xff0c;用于防止過擬合。該技術通過隨機將神經網絡中的一部分神經元“失活”或“丟棄”來…

深度剖析:為什么 Spring 和 IDEA 都不推薦使用 @Autowired 注解

目錄 依賴注入簡介 Autowired 注解的優缺點 Spring 和 IDEA 不推薦使用 Autowired 的原因 構造器注入的優勢 Autowired 注解的局限性 可讀性和可測試性的問題 推薦的替代方案 構造器注入 Setter 注入 Java Config Bean 注解 項目示例&#xff1a;Autowired vs 構造器…

Android 項目Gradle文件講解(Groovy和Kotlin)

Android 項目Gradle文件講解&#xff08;Groovy和Kotlin&#xff09; 前言正文一、Gradle的作用二、Gradle的種類① 工程build.gradle② 項目build.gradle③ settings.gradle④ gradle.properties⑤ gradle-wrapper.properties⑥ local.properties 三、Groovy和Kotlin的語言對比…

裝飾模式:雞腿堡

文章目錄 UML類圖目錄結構Humburger.javaChickenBurger.javaCondiment.javaChuilli.javaLettuce.javaTest.java深度理解test怎么寫 UML類圖 目錄結構 我們從指向最多的開始寫 Humburger.java package zsms;public abstract class Humburger {protected String name;public S…

【接口自動化_05課_Pytest接口自動化簡單封裝與Logging應用】

一、關鍵字驅動--設計框架的常用的思路 封裝的作用&#xff1a;在編程中&#xff0c;封裝一個方法&#xff08;函數&#xff09;主要有以下幾個作用&#xff1a;1. **代碼重用**&#xff1a;通過封裝重復使用的代碼到一個方法中&#xff0c;你可以在多個地方調用這個方法而不是…

C++貪心算法(3)

整數區間 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…

debian讓dotnet 程序以守護進程方式運行,如果意外退出主動開啟

創建服務文件: 打開一個新的.service文件在/etc/systemd/system/目錄下&#xff0c;例如myapp.service sudo nano /etc/systemd/system/myapp.service編輯服務文件: 添加以下內容到myapp.service文件&#xff0c;確保修改ExecStart以指向你的.NET Core應用程序的可執行文件&am…

JVM-調優之-高內存占用問題排查

排查思路 1&#xff09;檢查jvm內存的分配情況 2&#xff09;檢查jvm的gc情況 3&#xff09; 找出占用量比較大的對象 第一步&#xff1a;jmap -heap PID 查看jvm內存使用情況 jmap -heap 2525 可以看到老年代年輕代等其他內存區域內存使用率百分比 第二步&#xff1a;jsta…

Golang:使用roylee0704/gron實現定時任務

可以使用roylee0704/gron實現定時任務 文檔 https://github.com/roylee0704/gronhttps://pkg.go.dev/github.com/roylee0704/gron 安裝 go get github.com/roylee0704/gron代碼示例 package mainimport ("fmt""time""github.com/roylee0704/gron…

如何用分立器件設計一個過流保護電路

過流保護電路是指當后級負載電流過大或者發生短路時&#xff0c;自動切斷電源與后級負載&#xff0c;從而防止大電流損害電源電路&#xff0c;過流保護又叫OCP。 常見的過流保護電路有保險絲過流保護&#xff0c;集成的過流保護芯片&#xff0c;還有這種分立器件搭建的過流保護…

Browserify:將 Node.js 模塊轉換為瀏覽器可用的 JavaScript

什么是 Browserify&#xff1f; Browserify 是一個 JavaScript 工具&#xff0c;用于將 Node.js 模塊轉換為在瀏覽器環境中可用的單個 JavaScript 文件。通過 Browserify&#xff0c;您可以使用 require() 函數引入其他模塊&#xff0c;就像在 Node.js 中一樣&#xff0c;而不…