@前端

动态 列表
@vivo_tech

基於three.js的虛擬人陰影渲染優化方案

作者:來自 vivo 互聯網大前端團隊- Su Ning 本文將探討 three.js 中的陰影渲染機制,並分享一些針對性能和效果優化的實用技巧,幫助開發者在不同場景下做出最佳的權衡選擇。 一、前言 在3D網頁應用中,高質量的陰影渲染對於營造場景的真實感至關重要。作為廣泛採用的 WebGL 框架之一,three.js 為開發者提供了多種陰影渲染選項,使得創建生動逼真的光影效果成為可能。然而,實現這

vivo_tech 头像

@vivo_tech

昵称 vivo互聯網技術

@xishui_5ac9a340a5484

手寫一個動態海洋和天空效果的vue hooks

背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面,這不太好看,接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景,這樣的效果總會讓人眼前一亮,如下圖所示。 代碼實現 接下來,讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a

@vivo_tech

擁抱新一代 Web 3D 引擎,Three.js 項目快速升級 Galacean 指南

作者: vivo 互聯網前端團隊- Su Ning 本文從多個維度對比 Galacean 和 Three.js 兩款Web3D 引擎的差異,並介紹擬我形象項目從Three.js 切換到 Galacean 以後帶來的提升以及項目遷移的心得,為其他 Three.js 項目升級到 Galacean 提供參考。 1分鐘看圖掌握核心觀點👇 一、背景 Web 3D 技術的發展日新月異,為我們帶來了

vivo_tech 头像

@vivo_tech

昵称 vivo互聯網技術

@fannaodeshafa

8款高效開發工具,建議放進收藏夾

分享8款能實實在在提升你開發幸福感的好東西。它們有的能幫你一勞永逸地解決環境配置難題,有的能讓煩人的Bug報告變得清晰明瞭。一起來看看吧。 ServBay — 別再折騰本地環境了! 還在為配置Python、Java、PHP、Node.js或者搞定SSL證書而頭疼嗎?ServBay就是來終結這一切的。它不像傳統的集成環境那樣笨重,而是一個清爽的macOS Windows應用,讓你像點菜一樣勾選所需

fannaodeshafa 头像

@fannaodeshafa

昵称 煩惱的沙發

@fannaodeshafa

都2025年了,還有人用Python 2嗎

Python 的程序員應該都遇到一個問題,Python 2 和 3 的兼容問題該怎麼辦?Python 2 發佈於 2000 年,Python 3 發佈於 2008 年,但 Python 開發者都知道,兩者並不兼容。都2025年了,Python 2 和 Python 3 該怎麼選,還用説嗎?當然是選Python 3,且聽我細細道來。 Python 2 早就斷氣了 Python 2 已於 2020

fannaodeshafa 头像

@fannaodeshafa

昵称 煩惱的沙發

@esunr

解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題

前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時,通常會遇到一個很麻煩的問題,即我們無法提前獲取到當前頁面所需的資源,從而不能提前加載當前頁面所需的 CSS,導致客户端在獲取到服務端渲染的 HTML 時,得到的只有 HTML 文本而沒有 CSS 樣式,之後需要等待一會兒才能將 CSS 加載出來,也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐,可以參考:

esunr 头像

@esunr

昵称 EsunR

@zxbing0066

React SSR - 寫個 Demo 一學就會

今天寫個小 Demo 來從頭實現一下 react 的 SSR,幫助理解 SSR 是如何實現的,有什麼細節。 什麼是 SSR SSR 即 Server Side Rendering 服務端渲染,是指將網頁內容在服務器端中生成併發送到瀏覽器的技術。相比於客户端渲染(CSR),SSR 一般用於以下場景: SEO (搜索引擎優化):由於部分搜索引擎對 CSR 內容支持不佳,所以 SSR 可以提升網站在

zxbing0066 头像

@zxbing0066

昵称 嘿嘿不務正業

@coder_64d08a0a77d68

我第一個快200 Star 的項目,Taro H5 SSR 插件現在咋樣了

引言 我寫下這篇文章的初衷是,我認識到,編寫代碼的同時,我們也需要去分享我們的工作和成果,讓更多的人瞭解我們所做的事。這篇文章旨在記錄我的第一個近200 Star 的項目 tarojs-plugin-ssr,能讓更多的人去知道這個項目,瞭解到這個項目還被持續維護中。 我將在文章中講講這個項目的起源,回顧我與 Taro 項目的故事。同時,根據我有限的經驗,來回答一些朋友們關於如何參與開源項目的疑問。

@wentaohu12138

服務端渲染SSR

1.項目背景 需要將一箇舊的用vue+svg搭建的地鐵圖h5改造成有個ssr項目,以提升首屏渲染時間。 2.分析 項目現狀,項目組已有koa搭建的業務中間層,且需要改造的項目為一箇舊項目,綜合考慮,將舊項目進行改造,而非使用nuxt重寫。 3.SSR原理 1.所謂SSR就是將一個項目通過兩種打包配置,分別生成兩份打包代碼,一份在服務端(nodejs)執行,另一份在客户端(browser)上執行。當

wentaohu12138 头像

@wentaohu12138

昵称 牛刀殺雞

@gomi

Astro + NextUI 搭建個人博客(導航組件篇)

Astro 簡介 由於我之前的個人博客是Vue3+Quasar+Koa+MySql搭建的,整體就是SPA的思路,作為練手倒是可以鍛鍊前後端各方面的能力。但考慮到後期的遷移和更新等,實在過於麻煩,個人博客其實使用SSR或SSG之類的框架就行了,比如Nextjs,Nuxtjs,Remix等等。於是我接觸到了Astro這個框架,它厲害的是不與任何前端框架進行強行綁定,比如Nextjs是與React強綁定

gomi 头像

@gomi

昵称 Gomi

@invalidnull

關於 serve-static 的 index.d.ts 報錯的問題分析

理解這條日誌的含義,需要我們深入分析其組成部分和背後可能的原因。這條日誌信息顯然指向了一個 Node.js 項目中的一個具體錯誤,其指出了錯誤發生的文件路徑和具體位置。接下來,我將逐步解析這條日誌信息的各個方面,並解釋可能的原因和解決方法,同時遵守你的要求,使解析過程既詳細又不顯得機械。 日誌信息解析 2024-01-01 05:08:15,120 INFO d.h.c.h.PrintOutput

invalidnull 头像

@invalidnull

昵称 註銷

@jasonma1995

一個開箱即用的已集成全部主流前端工具、類庫的nuxt3服務端渲染ssr項目

項目背景: 需實現公司國際官網項目的seo 如果是react就選用next,因為我最近在用vue3,就試試使用nuxt 在網上找了很多模版,發現都不理想,缺的東西比較多,沒法做到開箱即用,所以自己造個模版項目 採用當前最新的nuxt3實現 目錄簡介: 已集成各類主流vue3生態相關工具或庫 nuxt3 vue官方推薦的最好用,生態最全的nuxt3服務端渲染ssr框架 vue3

jasonma1995 头像

@jasonma1995

昵称 JasonMa

@elegantdevil

Nuxt3入門(上)

Nuxt.js 是一個基於 Vue.js 的通用應用框架。 通過對客户端/服務端基礎架構的抽象組織,Nuxt.js 主要關注的是應用的 UI 渲染。原文可移步我的公眾號文章 🔧 安裝問題 ⚙️ 初始化項目失敗 npx nuxi@latest init my_nuxt3_app 1.連接 raw.githubusercontent.com 失敗 “Failed to connect t

elegantdevil 头像

@elegantdevil

昵称 Believer

@autohometech

汽車之家頁面性能監控建設實踐

1 前言 關注用户體驗,提高頁面性能,是每位前端研發同學的日常工作之一。提高頁面性能對業務的幫助,雖不易衡量,但肯定是利遠大於弊。如何衡量頁面性能優劣?如何幫助研發同學快速定位到頁面性能瓶頸點?一直是前端的重點工作之一。本文分享汽車之家在頁面性能監控建設方面的部分工作,主要包含三方面: 技術選型 該選擇哪些頁面性能監控技術方案? 在儘可能不影響頁面性能的前提下,既能客觀、全面衡量頁面性能,又

autohometech 头像

@autohometech

昵称 之家技術

@seanshi_fe

Vue.js中如何去定位解決內存泄漏?

Vue.js 是一個流行且強大的 JavaScript 框架,它允許我們構建動態和交互式 Web 應用程序。 然而,與任何軟件一樣,Vue.js 應用程序有時會遇到內存泄漏,從而導致性能下降和意外行為。 今天,我們將深入探討 Vue.js 應用程序中內存泄漏的原因,並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時(主要是一些 變量、 方法等),會阻

seanshi_fe 头像

@seanshi_fe

昵称 Sean

@gqkmiss

Web 頁面性能衡量指標-以用户為中心的性能指標

Web 頁面性能衡量指標-以用户為中心的性能指標 以用户為中心的性能指標是理解和改進站點體驗的關鍵點 一、以用户為中心的性能指標 1. 指標是用來幹啥的? 指標是用來衡量性能和用户體驗的 2. 指標類型 感知加載速度:網頁可以多快地加載網頁中的所有視覺元素並將其渲染到屏幕上 加載響應速度:頁面加載和執行組件快速響應用户互動所需的 JavaScript 代碼的速度 運行時響應速度:網頁在加載

gqkmiss 头像

@gqkmiss

昵称 月恆

@gqkmiss

Web 網頁性能及性能優化

Web 網頁性能及性能優化 一、Web 性能 Web 性能是 Web 開發的一個重要方面,側重於網頁加載速度以及對用户輸入的響應速度 通過優化網站來改善性能,可以在為用户提供更好的體驗 網頁性能既廣泛又非常深入 1. 為什麼性能這麼重要? 1. 性能關乎留住用户 性能對於任何在線業務都至關重要 與加載速度緩慢、讓人感覺運行緩慢的網站相比,加載速度快並能及時響應用户輸入的網站能更好地吸引並留住用户

gqkmiss 头像

@gqkmiss

昵称 月恆

@vivo_tech

FunProxy - 使用 Rust 構建跨平台全鏈路測試抓包代理工具

作者:vivo 互聯網大前端團隊- Song Jiachao 在軟件開發過程中,軟件測試對於保障軟件質量和用户滿意度起着關鍵作用。為最大程度上提升軟件品質,我們積極開展全鏈路測試實踐,打造了用Rust語言開發的自研一站式抓包代理工具FunProxy,基於其跨平台、高性能、易於擴展、安全性高等特性,讓全鏈路抓包和環境代理如絲綢般絲滑。 一、背景介紹 1.1 什麼是全鏈路測試 全鏈路測試就是"

vivo_tech 头像

@vivo_tech

昵称 vivo互聯網技術

@marks

10分鐘徹底搞懂前端頁面性能監控

本文首發於知乎《10分鐘徹底搞懂前端頁面性能監控》,搬運轉載請註明出處,否則追究版權責任。 前言 前端頁面性能是一個非常核心的用户體驗指標。本文介紹阿里UC 嶽鷹全景監控平台 如何設計一個通用、低侵入性、自動上報的頁面性能監控方案。主要採用的是Navigation Timing API以及sendBeacon等方法。 為什麼要監控頁面性能? 一個頁面性能差的話會大大影響用户體驗。用户打開頁面等待的

marks 头像

@marks

昵称 Marks

@smalike

不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規

不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規 不得不説現在依然適用於大部分的網站 當年雅虎推薦了一套優化網站加載速度的34條法則(包括Yslow規則22條),以下是詳細説明。 1. Minimize HTTP Requests 減少 HTTP 請求 圖片、css、script、flash 等等這些都會增加 http 請求數,減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能

smalike 头像

@smalike

昵称 smalike

@ruizhengyun

前端初級新人,如何撕去菜鳥標籤

原文地址:https://github.com/ruizhengyu... 作為前端新人,我們常以菜鳥自居,主要是專業程度不高,還有就是自謙。其實,作為菜鳥的我們也想撕掉這類標籤,我們也努力,可還是學不好前端,是真的不適合做這行還是方法不對,沒人告訴我們?如果你覺得自己還處在菜鳥階段的迷茫區,那可以看看本篇文章,希望看完之後你能得到想要的。如果你要闡述你的想法,請在評論區留下你的文字。

ruizhengyun 头像

@ruizhengyun

昵称 前端早8點

@febobo

夢迴前端-數據類型篇

關於夢迴前端 每天一個重要的知識點,以問答的形式進行反推,利用碎片時間來完成自我提升 Day1 數據類型篇 説在前面 JS是典型的弱類型(動態)語言, 意味着你不用提前聲明變量的類型,在程序運行過程中,類型會被自動確定, 也意味着你可以使用同一個變量保存不同類型的數據 請簡述Js中有哪些數據類型? Js中每一個值都屬於某一種數據類型, 根據最新的語言標準,一共有8種類型 Boolean N

febobo 头像

@febobo

昵称 刀哥