笔记摘要【一些网址】
Vue CLI 项目页面打开时间优化：从16秒到2秒内 - dev-zuo 技术日常
在日常开发中，经常要写一些 demo 来测试一些功能，于是专门新建了一个 github 仓库来管理，方便积累。这次想着把 vue demo 部署到服务器，方便 PC/手机 实时看效果。于是把 vue-cli 项目 npm run build 后，将 dist 部署到服务器 nginx 下，但发现打开很慢，下面来看看怎么优化。如下图，DOM 加载完 15 秒，完全加载 16 秒
本文讲述了优化Vue CLI项目加载速度的方法。原来项目加载时间长达16秒，主要原因是chunk-vendors.js文件过大。通过以下步骤优化：
1. 开启nginx服务器的gzip压缩，使vendors.js从1.7MB减至600KB，加载时间减少5秒。
2. 使用Vue CLI的webpack包体积优化工具分析，发现ElementUI和Echarts占用空间大。将Echarts改为CDN引用，ElementUI改为按需加载，进一步减小vendors.js到596KB。
3. 将Vue和ElementUI也改为外部CDN引用，使vendors.js降至68KB，加载时间约3秒。
4. 优化ElementUI CSS引用，从unpkg切换到bootcdn，最终将加载时间优化到1.89秒。
通过上述步骤，项目加载时间从16秒优化到2秒以内。
展开摘要
www.zuo11.com
People | Web Game Dev
https://www.webgamedev.com/resources/people
这篇文章提供了一份值得关注的人员列表，他们专注于3D、VR和Web游戏开发的最新进展。其中包括Three.js的创建者Ricardo Cabello和维护者Mugen87，Babylon.js的创造者David Catuhe和维护者Raanan Weber，以及A-Frame的开发者Diego Marcos。此外，还有Meta公司的工程师，如Rik Cabanier、Scott Nagy和Dave Hill，他们在Quest浏览器和WebXR领域有所贡献。其他重要人物包括Hendrik Mans、SimonDev、Don McCurdy等，他们在相关领域有教育和创新项目。关注这些人可以深入了解这个行业的动态和学习资源。
展开摘要
www.webgamedev.com
从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载 | HeapDump性能社区
此性能文章由HeapDump性能专家 (งᵒ̌皿ᵒ̌)ง⁼³₌₃ 更新于 2023年08月31日06时05分，全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步👉「开始优化」部分直接查看优化手段背景前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。在网络
文章摘要：
文章详细阐述了前端性能优化，尤其是首屏加载速度的提升，从11秒缩短至1秒以内。优化背景源于公司服务器网络波动导致的访问速度减慢，以及用户在弱网环境下的不良体验反馈。作者通过对项目进行一系列优化措施，显著提高了加载速度。
优化手段包括体积优化（如移除冗余依赖、压缩图片、使用webP格式、优化SVG图标、精简Ant-design组件）、传输优化（如改进分包策略、启用HTTP2、Gzip压缩、预加载和预请求资源）、以及感知性能优化（如加载动画、首屏骨架屏、渐进式图片加载）。文章强调了性能优化的目的在于提升用户体验，包括“真的快”（客观指标改善）和“觉得快”（通过视觉引导等手段优化用户感知）。
作者还分享了具体的技术细节，如使用Webpack插件、调整Babel配置、优化依赖管理和图片处理策略，以及如何利用OSS和CDN加速资源加载。最后，文章指出性能优化不仅关乎用户体验，还直接影响到业务转化率和收入，鼓励开发者建立性能优化与产品指标之间的正向联系，以便更好地推动技术方案实施。
整体而言，文章提供了全面的前端性能优化指南，覆盖了从理论到实践的各个方面，对希望提升网页加载速度的开发者具有很高的参考价值。
展开摘要
heapdump.cn
https://kentcdodds.com/discord
https://dev.to/
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Squoosh is a tool designed to shrink image sizes significantly, enhancing web page loading speeds without compromising quality. It simplifies image optimization, allowing instant savings or customizable adjustments for further reduction. Importantly, it ensures user privacy by processing images locally, preventing data from leaving the device.
展开摘要
squoosh.app
boutique-books/b04-图形学与可视化/WebGL编程指南.pdf at master
Some of the fine books I have read. Contribute to linghuam/boutique-books development by creating an account on GitHub.
It appears the provided content is not an article but a list of services and features offered by GitHub, along with unrelated links. Here's a concise summary:
GitHub offers various tools for software development including automated workflows, package hosting, security checks for vulnerabilities, instant development environments (Codespaces), AI-assisted coding (GitHub Copilot), code review management, issue tracking, and collaboration beyond code. It also provides learning resources, customer stories, partnerships, and an AI-powered developer platform. Pricing information and sign-up options are available.
Note: The original text did not contain an article to summarize, so this response is based on interpreting the listed features and services.
展开摘要
github.com
https://pagespeed.web.dev/
People | Web Game Dev
https://www.webgamedev.com/resources/people
这篇文章提供了一份值得关注的人员列表，他们专注于3D、VR和Web游戏开发的最新进展。其中包括Three.js的创建者Ricardo Cabello和维护者Mugen87，Babylon.js的创造者David Catuhe和维护者Raanan Weber，以及A-Frame的开发者Diego Marcos。此外，还有Meta公司的工程师，如Rik Cabanier、Scott Nagy和Dave Hill，他们在Quest浏览器和WebXR领域有所贡献。其他重要人物包括Hendrik Mans、SimonDev、Don McCurdy等，他们在相关领域有教育和创新项目。关注这些人可以深入了解这个行业的动态和学习资源。
展开摘要
www.webgamedev.com
How browsers work
https://taligarsiel.com/Projects/howbrowserswork1.htm
The article explains how web browsers work, focusing on the main components and processes involved. It highlights that open-source browsers like Firefox, Chrome, and Safari dominate the market. The browser's primary function is to fetch and display web resources, usually in HTML, CSS, and other formats, using a URI. Browsers interpret HTML and CSS per W3C specifications, with most now conforming to standards to reduce compatibility issues.
The browser consists of a user interface, browser engine, rendering engine, networking component, UI backend, and JavaScript interpreter. The rendering engine plays a crucial role in parsing HTML, creating a DOM tree, and rendering content on the screen. Chrome stands out by running each tab in a separate process.
The article also discusses parsing, with lexical analysis breaking input into tokens and syntax analysis applying language rules. HTML parsing is complex due to its forgiving nature, requiring custom parsers. The HTML5 specification details the tokenization and tree construction process. Overall, the article provides an overview of the intricate mechanisms behind web browsing.
展开摘要
taligarsiel.com
Learn the Latest Tech Skills; Advance Your Career
Learn online and advance your career with courses in programming, data science, artificial intelligence, digital marketing, and more. Gain in-demand technical skills. Join today!
www.udacity.com
undefined:
Vue CLI 项目页面打开时间优化：从16秒到2秒内 - dev-zuo 技术日常
在日常开发中，经常要写一些 demo 来测试一些功能，于是专门新建了一个 github 仓库来管理，方便积累。这次想着把 vue demo 部署到服务器，方便 PC/手机 实时看效果。于是把 vue-cli 项目 npm run build 后，将 dist 部署到服务器 nginx 下，但发现打开很慢，下面来看看怎么优化。如下图，DOM 加载完 15 秒，完全加载 16 秒
本文讲述了优化Vue CLI项目加载速度的方法。原来项目加载时间长达16秒，主要原因是chunk-vendors.js文件过大。通过以下步骤优化：
1. 开启nginx服务器的gzip压缩，使vendors.js从1.7MB减至600KB，加载时间减少5秒。
2. 使用Vue CLI的webpack包体积优化工具分析，发现ElementUI和Echarts占用空间大。将Echarts改为CDN引用，ElementUI改为按需加载，进一步减小vendors.js到596KB。
3. 将Vue和ElementUI也改为外部CDN引用，使vendors.js降至68KB，加载时间约3秒。
4. 优化ElementUI CSS引用，从unpkg切换到bootcdn，最终将加载时间优化到1.89秒。
通过上述步骤，项目加载时间从16秒优化到2秒以内。
展开摘要
www.zuo11.com
undefined:
https://juejin.cn/post/6844904131346300942
undefined:
前端性能优化 - chrome performance看浏览器渲染过程_chrome perform
文章浏览阅读1.4w次，点赞2次，收藏22次。最近一直想看看浏览器渲染以及前端性能优化的内容，可是在网上找到的都是文字描述，所以想通过网上的知识去对应到chrome performance看到的过程。先看一个非常简单的页面代码： Test dom load._chrome performance parse html
本文探讨了浏览器渲染页面的过程，主要关注Chrome的性能分析。浏览器渲染主要包括发送网络请求、接收响应、解析HTML、更新层树、绘制和合成层等步骤。在解析HTML阶段，会经历DOMContentLoaded、Recalculate Style和Layout等关键点，构建DOM、CSSOM和Render树。当包含CSS和JS时，JS的加载和执行会阻塞页面渲染，直到CSSOM和DOM合并成Render树。总的来说，解析HTML涉及构建DOM、CSSOM树，然后布局和绘制，而CSS和JS会影响这个流程。
展开摘要
blog.csdn.net
undefined:
Networking 101: Primer on Latency and Bandwidth -
What every web developer must know about mobile networks, protocols, and APIs provided by browser to deliver the best user experience.
The article emphasizes the crucial role of speed in web performance optimization, as faster sites lead to better user engagement, retention, and conversions. It highlights latency and bandwidth as key factors affecting network performance. Latency refers to the time taken for a packet to travel from source to destination, consisting of propagation, transmission, processing, and queuing delays. Bandwidth represents the maximum data transfer rate of a communication path.
The article explains that while the speed of light sets a limit on propagation time, real-world materials like fiber-optic cables slow signals down. Network latency is influenced by distance, intermediate routers, and traffic loads. Content Delivery Networks (CDNs) help reduce latency by serving content from geographically closer servers.
Bandwidth, though important, is often not the primary bottleneck for website performance compared to latency, especially with modern high-speed backbone networks. However, available bandwidth at the network edges varies greatly and depends on technologies like DSL, cable, and fiber-to-the-home. Tools like speedtest.net can help identify bandwidth bottlenecks.
The increasing demand for high bandwidth, driven by streaming video, is met through strategies like adding more fibers, deploying more links, or improving WDM techniques. Despite capacity growth, managing the variable performance of data networks remains a challenge.
展开摘要
hpbn.co
undefined:
Networking 101: Primer on Latency and Bandwidth -
What every web developer must know about mobile networks, protocols, and APIs provided by browser to deliver the best user experience.
The article emphasizes the crucial role of speed in web performance optimization, as faster sites lead to better user engagement, retention, and conversions. It highlights latency and bandwidth as key factors affecting network performance. Latency refers to the time taken for a packet to travel from source to destination, consisting of propagation, transmission, processing, and queuing delays. Bandwidth represents the maximum data transfer rate of a communication path.
The article explains that while the speed of light sets a limit on propagation time, real-world materials like fiber-optic cables slow signals down. Network latency is influenced by distance, intermediate routers, and traffic loads. Content Delivery Networks (CDNs) help reduce latency by serving content from geographically closer servers.
Bandwidth, though important, is often not the primary bottleneck for website performance compared to latency, especially with modern high-speed backbone networks. However, available bandwidth at the network edges varies greatly and depends on technologies like DSL, cable, and fiber-to-the-home. Tools like speedtest.net can help identify bandwidth bottlenecks.
The increasing demand for high bandwidth, driven by streaming video, is met through strategies like adding more fibers, deploying more links, or improving WDM techniques. Despite capacity growth, managing the variable performance of data networks remains a challenge.
展开摘要
hpbn.co
undefined:
[图片]
undefined:
前端性能精进（六）——网络 | HeapDump性能社区
此性能文章由HeapDump性能专家 咖啡机KFJ 更新于 2023年07月12日01时15分，网络也是前端性能优化的重要一环，网页上的资源都要经过网络来传输。优化网络性能除了缓存和压缩之外，还有就是协议和 CDN
本文探讨了前端性能优化中的网络层面，主要包括缓存、压缩、HTTP协议的演进以及CDN服务。缓存分为强缓存和协商缓存，通过HTTP首部如Cache-Control和ETag来管理。压缩技术如GZip和Brotli能显著减少非媒体文件的传输大小。HTTP/2引入二进制分帧、多路复用和首部压缩，解决了HTTP/1.1的队首阻塞问题。HTTP/3基于QUIC协议，进一步减少了延迟。CDN服务通过边缘节点提供内容分发，提高访问速度，同时边缘计算降低了延迟，尤其适用于物联网和AR/VR场景。通过这些优化，网络性能得以大幅提升。
展开摘要
heapdump.cn
undefined:
https://juejin.cn/post/6844904100035821575
undefined:
Who has the fastest F1 website in 2021? Part 3
Deep-diving on the load performance of F1 websites.
In this third part of a series analyzing Formula 1 (F1) team websites' performance, the focus is on Red Bull's site. Despite showing significant improvement over its 2019 version, the site still has room for optimization. Key issues include a 3-second delay due to unnecessary inlining, a 10-second delay for a main image because of a JavaScript-responsive image implementation, and a 40-second delay for a crucial image loaded with JavaScript. Optimizing images, reducing inlining, and improving font loading could significantly enhance the site's speed. Red Bull's site outperforms others in the series, but further optimization could yield even better results.
展开摘要
jakearchibald.com
undefined:
Who has the fastest F1 website in 2021? Part 1
Deep-diving on the load performance of F1 websites.
In this 2021 performance review of Formula 1 (F1) team websites, the author compares the loading speed and efficiency of 10 sites using WebPageTest on a Moto G4 with a 3G connection. The evaluation focuses on first load interactivity and caching efficiency, not design or features. Key findings include:
1. CSS font trackers causing significant delays in content rendering, such as a 7-second delay due to an external font service.
2. Preload resource priority issues leading to 1-second delays.
3. Unnecessary SVG inlining contributing to slower load times.
4. Unnecessary preloading of primary images causing 5-second delays.
5. Poor image compression adding 1-second delays.
6. Content-blocking cookie modals resulting in extended load times.
The author suggests optimization strategies like deleting or reorganizing @import statements, using preload tags, async-loading font stylesheets, and optimizing image compression. The review highlights the importance of considering performance on mid-to-lower-end devices and the impact of HTTP/2 on hosting practices. The series aims to identify common performance issues and provide solutions, emphasizing that the results do not reflect developer abilities.
展开摘要
jakearchibald.com
undefined:
去掉css文件内import 内联字体改成link方式
undefined:
Who has the fastest website in F1?
Who has the fastest website in F1?Posted 19 March 2019 I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm goin
The article is a humorous approach to predicting the performance of Formula 1 teams by analyzing their website performance instead of traditional factors. The author uses WebPageTest on a Moto G4 with a 3G connection to measure加载速度和交互时间。他们强调了网站在较差网络条件下的可用性，选择中低端设备来代表普通用户的体验。评分标准是页面从开始到可交互所需的时间，以及资源大小对数据消耗的影响。
在分析梅赛德斯、法拉利和红牛的网站时，作者指出了一些常见问题，如阻塞渲染的JavaScript、未优化的图片、延迟加载的字体和缺乏缓存控制。他们建议使用defer属性、预加载、压缩字体和代码分割来提高性能。此外，还提到了不必要的CSS和JavaScript，以及大型图像资源对加载时间的影响。
通过这个非传统的比较，作者展示了如何评估网站性能，并提出了改进网站速度的策略，但强调这并不是对开发团队能力的评价，而是为了展示优化潜力。
展开摘要
jakearchibald.com
undefined:
font-spider 压缩字体 webfontloader
undefined:
【赏金10元】关于优化网络页面的问题 | HeapDump性能社区
努力努力 发布于 2022年06月17日01时49分，我们在进行优化的时候，其中有一条策略就是使用离线dom减少重排与重绘，就是将dom先隐藏再修改，修改完后再显示出来。但是浏览器的渲染策略更倾向于将一个大的任务拆分成多个小的任务进行实时多次的渲染。那么离线dom的这种优化是不是有可能成为一种负优化？将多个渲染任务都集中到一次渲染中，导致页面渲染不够及
文章探讨了离线DOM作为网页优化策略的有效性。该策略涉及隐藏DOM元素以避免频繁的重排和重绘，但作者提出，浏览器倾向于将大任务拆分为多次小渲染。因此，离线DOM可能会导致负优化，将多个渲染任务集中在一次，从而延长当前帧处理时间，引发页面卡顿。文章引发思考，这种优化是否反而影响了页面的及时渲染。读者被鼓励关注“Heapdump性能社区”公众号获取更多信息。
展开摘要
heapdump.cn
undefined:
https://github.com/sisterAn/blog/issues/63
undefined:
构建优化总结 - Webpack Guidebook
https://tsejx.github.io/webpack-guidebook/best-practice/optimization/collection/
Webpack 优化主要包括：配置 `resolve.modules` 以减少文件查找时间，设置 `resolve.mainFields` 和 `resolve.alias` 优化入口文件搜索，使用 `resolve.extensions` 缩短文件扩展名查找，通过 `module.noParse` 忽略非模块化库，利用 `HappyPack` 并行处理 `Loader`，使用 `ParallelUglifyPlugin` 并行压缩 JS，以及通过 `DllPlugin` 提前打包常用模块。此外，减少不必要的 `loader` 和 `plugin`，利用 `Tree-Shaking` 去除未使用代码，开启 `devtool` 以生成 source map，根据环境使用 `webpack.DefinePlugin` 定义变量，使用 `UglifyJSPlugin` 和 `cssnano` 压缩代码。对于开发环境，使用 `webpack-dev-server --watch` 监听文件变化，`HotModuleReplacement` 实现热更新，避免在开发时使用压缩和混淆。在生产环境中，利用 `SplitChunksPlugin` 提取公共代码，通过 CDN 加速静态资源加载，并使用 `externals` 避免重复打包。最后，通过 `webpack-bundle-analyzer` 和 `webpack-analyze` 分析和优化打包结果。
展开摘要
tsejx.github.io
undefined:
面试官：线上崩了，说说你是怎么排查线上问题的？ - 掘金
Hi 你好，我是东东拿铁，一个正在探索个人IP&副业的后端程序员。 工作多年还不会排查线上问题？系统响应时间突增，CPU使用率明显上升，系统偶尔卡顿，一文教你四个排查方向
抱歉，由于您提供的链接无法访问，我无法直接获取文章内容进行摘要。请您提供文章的主要观点和结论，我将很乐意帮您进行摘要。
展开摘要
juejin.cn
undefined:
https://juejin.cn/post/7351300892572745764
undefined:
开源项目经验
项目名称: Fantastic-Project
链接: https://github.com/yourusername/Fantastic-Project
描述: 一款开源的教育平台，提供在线课程管理和学习跟踪功能，采用React + Node.js构建。
我的角色: 主要开发者 & UI设计贡献者
贡献:
设计并实现前端用户界面，提升用户体验，用户满意度提升20%。
重构后端服务，采用GraphQL优化数据查询，响应时间减少40%。
编写详细项目文档，促进社区贡献，新贡献者增长50%。
技术栈: React, Redux, Node.js, GraphQL, PostgreSQL
undefined:
https://martinfowler.com/
undefined:
Medium: （https://medium.com/）上有大量技术博客，很多开发者和团队会在这里分享项目经验、技术选型理由、遇到的挑战及解决方法。内容覆盖广泛，从前端到后端，从AI到区块链都有。
Reddit: （https://www.reddit.com/r/programming/）特别是r/programming、r/webdev、r/softwareengineering等子版块，经常有技术讨论和项目分享，社区活跃，可以直接与他人交流。
Tech Blogs and Personal Websites: 许多知名开发者和技术领导者有自己的博客，他们会详细记录项目经验、技术选型、架构设计思路以及遇到的技术难题和解决方案。例如Martin Fowler的博客(https://martinfowler.com/)就非常有名。
LinkedIn Pulse: （https://www.linkedin.com/pulse/）LinkedIn上的Pulse板块，许多专业人士会在这里分享行业见解、项目经历和职业发展经验。
Project Management Websites: 如PMI（Project Management Institute）的博客(https://www.pmi.org/learning/thought-leadership/blog)或Trello的博客(https://blog.trello.com/)，提供了项目管理和团队协作的洞见和案例分析
undefined:
学习Three.js可以遵循以下步骤：
1. 理解基础概念
WebGL基础：虽然Three.js对WebGL进行了封装，但理解WebGL的基本原理有助于深入学习。了解它是如何在浏览器中实现3D图形渲染的。
Three.js核心概念：熟悉Three.js的三大基础元素：Scene（场景）、Camera（相机）和Renderer（渲染器）。理解它们之间的关系和作用。
2. 官方文档与教程
访问Three.js官网：Three.js官网 提供了大量的官方示例和文档，这是学习的最佳起点。
基础入门教程：跟随官网的“Getting Started”指南，动手创建你的第一个Three.js项目。
3. 实战练习
Hello World：从创建一个简单的3D立方体开始，理解如何设置场景、添加物体、设置相机视角和渲染。
逐步增加复杂度：随着学习的深入，尝试加入光源、材质、纹理等，使场景更加丰富。
4. 学习高级功能
动画与交互：学习如何使用Tween.js等库来创建平滑的动画效果，以及如何处理用户输入和交互。
模型加载：学习如何使用加载器（如GLTFLoader）加载外部3D模型，可能需要了解一些基本的3D建模知识（如使用Blender）。
后处理与特效：探索如何应用后期处理效果，如景深、模糊、颜色校正等，以提升视觉效果。
5. 进阶技巧
性能优化：了解如何优化渲染效率，特别是在处理大量对象或复杂场景时。
物理模拟：学习如何集成物理引擎（如 Cannon.js 或 Ammo.js）来实现更真实的物理交互。
6. 资源与社区
在线教程与课程：利用网上丰富的教程资源，如YouTube上的教程、Medium文章、或专门的在线课程。
参与社区：加入Three.js相关的论坛、Slack频道或Discord服务器，和其他开发者交流心得，解决问题。
查看实例代码：GitHub上有很多使用Three.js的开源项目，查看和分析这些代码可以加深理解。
7. 动手实践
个人项目：选择一个小项目作为实践目标，比如制作一个3D产品展示、游戏或数据可视化应用。
持续迭代：在实践中遇到问题时，查阅文档、搜索解决方案，并不断迭代你的项目。
通过上述步骤，结合理论学习与实践操作，你可以逐步掌握Three.js并开发出精彩的3D Web应用。
undefined:
https://www.wellyyss.cn/demo-old/art-exhibition/#/preview
undefined:
https://playcanvas.com/explore
undefined:
https://2xiao.github.io/leetcode-js/react/
undefined:
https://www.angular.cn/tutorials/learn-angular
undefined:
https://chatglm.cn/video?lang=zh
