mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-31 10:21:49 +02:00
Initial commit
This commit is contained in:
chris
161
5-browser-extension/3-background-tasks-and-performance/README.md
Normal file
161
5-browser-extension/3-background-tasks-and-performance/README.md
Normal file
@@ -0,0 +1,161 @@
|
||||
# Browser Extension Project Part 3: Learn about Background Tasks and Performance
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Introduction
|
||||
|
||||
In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating a web presence on the web. You even learned how to handle fetching data asynchronously. Your browser extension is very nearly complete.
|
||||
|
||||
It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them.
|
||||
|
||||
## Web Performance Basics
|
||||
|
||||
> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
The topic of how to make your websites blazingly fast on all kinds of devices, for all kinds of users, in all kinds of situations, is unsurprisingly vast. Here are some points to keep in mind as you build either a standard web project or a browser extension.
|
||||
|
||||
The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the "Settings and more" button (the three dots icon on the top right of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows or `Option` + `Command` + `I` on Mac to open developer tools.
|
||||
|
||||
The Performance tab contains a Profiling tool. Open a website (try, for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
|
||||
|
||||
|
||||
|
||||
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge
|
||||
|
||||
> Tip: to get an accurate reading of your website's startup time, clear your browser's cache
|
||||
|
||||
Select elements of the profile timeline to zoom in on events that happen while your page loads.
|
||||
|
||||
Get a snapshot of your page's performance by selecting a part of the profile timeline and looking at the summary pane:
|
||||
|
||||
|
||||
|
||||
Check the Event Log pane to see if any event took longer than 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Get to know your profiler! Open the developer tools on this site and see if there are any bottlenecks. What's the slowest-loading asset? The fastest?
|
||||
|
||||
## Profiling checks
|
||||
|
||||
In general, there are some "problem areas" that every web developer should watch for when building a site to avoid nasty surprises when it's time to deploy to production.
|
||||
|
||||
**Asset sizes**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
|
||||
|
||||
✅ Look through the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
|
||||
|
||||
A good practice is to ensure that your images are optimized and delivered at the right size and resolution for your users.
|
||||
|
||||
**DOM traversals**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
|
||||
|
||||
**JavaScript**: Every JavaScript developer should watch for 'render-blocking' scripts that must be loaded before the rest of the DOM can be traversed and painted to the browser. Consider using `defer` with your inline scripts (as is done in the Terrarium module).
|
||||
|
||||
✅ Try some sites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about the common checks that are done to determine site performance.
|
||||
|
||||
Now that you have an idea of how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
|
||||
|
||||
### Create a function to calculate color
|
||||
|
||||
Working in `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to gain access to the DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
What's going on here? You pass in a value (the carbon intensity) from the API call you completed in the last lesson, and then you calculate how close its value is to the index presented in colors array. Then you send that closest color value over to the chrome runtime.
|
||||
|
||||
The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles all kinds of background tasks, and your extension is leveraging that:
|
||||
|
||||
> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
|
||||
|
||||
✅ If you're developing this browser extension for Edge, it might surprise you that you're using a chrome API. The newer Edge browser versions run on the Chromium browser engine, so you can leverage these tools.
|
||||
|
||||
> Note, if you want to profile a browser extension, launch the dev tools from within the extension itself, as it is its own separate browser instance.
|
||||
|
||||
### Set a default icon color
|
||||
|
||||
Now, in the `init()` function, set the icon to be generic green to start by again calling chrome's `updateIcon` action:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Call the function, execute the call
|
||||
|
||||
Next, call that function you just created by adding it to the promise returned by the C02Signal API:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
And finally, in `/dist/background.js`, add the listener for these background action calls:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//borrowed from energy lollipop extension, nice feature!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run to draw an icon of the proper color using the Canvas API.
|
||||
|
||||
✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
|
||||
|
||||
Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!
|
||||
|
||||
Congratulations, you've built a useful browser extension and learned more about how the browser works and how to profile its performance.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Investigate some open source websites that have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Consider signing up for a [performance newsletter](https://perf.email/)
|
||||
|
||||
Investigate some of the ways that browsers gauge web performance by looking through the performance tabs in their web tools. Do you find any major differences?
|
||||
|
||||
## Assignment
|
||||
|
||||
[Analyze a site for performance](assignment.md)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Analyze a site for performance
|
||||
|
||||
Provide a detailed report of a web site, showing areas where performance is problematic. Analyze why the site is slow and what you could do to speed it up. Don't rely only on the browser tools, but do some research on other tools that can help your report.
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | A report is presented with details drawn not only from browser tools but from 3rd party tools if available | A basic report is presented | A minimal report is presented |
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 830 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,153 @@
|
||||
# Proyecto de extensión del navegador, parte 3: Más información sobre el rendimiento y las tareas en segundo plano
|
||||
|
||||
## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Introducción:
|
||||
|
||||
En las dos últimas lecciones de este módulo, aprendió cómo crear un formulario y un área de visualización para los datos obtenidos de una API. Es una forma muy estándar de crear presencias web en la web. Incluso aprendió a manejar la obtención de datos de forma asincrónica. La extensión de su navegador está casi completa.
|
||||
|
||||
Queda por administrar algunas tareas en segundo plano, incluida la actualización del color del icono de la extensión, por lo que este es un buen momento para hablar sobre cómo el navegador administra este tipo de tareas. Pensemos en estas tareas del navegador en el contexto del rendimiento de sus activos web a medida que los crea.
|
||||
|
||||
## Conceptos básicos sobre el rendimiento web
|
||||
|
||||
> "El rendimiento del sitio web se trata de dos cosas: qué tan rápido se carga la página y qué tan rápido se ejecuta el código". - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
El tema de cómo hacer que sus sitios web sean increíblemente rápidos en todo tipo de dispositivos, para todo tipo de usuarios, en todo tipo de situaciones, es sorprendentemente vasto. Estos son algunos puntos que debe tener en cuenta al crear un proyecto web estándar o una extensión de navegador.
|
||||
|
||||
Lo primero que debe hacer para asegurarse de que su sitio funcione de manera eficiente es recopilar datos sobre su rendimiento. El lugar para hacer esto es en las herramientas de desarrollo de su navegador web. En Edge, puede seleccionar los tres puntos en la parte superior derecha del navegador, luego navegar a Más herramientas> Herramientas de desarrollo y abrir la pestaña Rendimiento.
|
||||
|
||||
La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra un sitio web (pruebe, por ejemplo, https://www.microsoft.com) y haga clic en el botón 'Grabar', luego actualice el sitio. Detenga la grabación en cualquier momento y podrá ver las rutinas que se generan para 'escribir', 'renderizar' y 'pintar' el sitio:
|
||||
|
||||
|
||||
|
||||
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) en el panel Rendimiento en Edge
|
||||
|
||||
> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
|
||||
|
||||
Seleccione elementos de la línea de tiempo del perfil para ampliar los eventos que suceden mientras se carga su página.
|
||||
|
||||
Obtenga una instantánea del rendimiento de su página seleccionando una parte de la línea de tiempo del perfil y mirando el panel de resumen:
|
||||
|
||||
|
||||
|
||||
Compruebe el panel Registro de eventos para ver si algún evento tardó más de 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ ¡Conoce a tu perfilador! Abra las herramientas de desarrollo en este sitio y vea si hay cuellos de botella. ¿Cuál es el activo de carga más lenta? ¿El más rápido?
|
||||
|
||||
|
||||
## Comprobaciones de perfiles
|
||||
|
||||
En general, hay algunas "áreas problemáticas" que todo desarrollador web debe tener en cuenta al crear un sitio, para evitar sorpresas desagradables cuando llegue el momento de implementarlo en producción.
|
||||
|
||||
**Tamaños de activos**: la Web se ha vuelto 'más pesada' y, por lo tanto, más lenta en los últimos años. Parte de este peso tiene que ver con el uso de imágenes.
|
||||
|
||||
✅ Busque en el [Archivo de Internet](https://httparchive.org/reports/page-weight) una vista histórica del peso de la página y más.
|
||||
|
||||
Una buena práctica es asegurarse de que sus imágenes estén optimizadas, entregadas con el tamaño y la resolución adecuados para sus usuarios.
|
||||
|
||||
**Recorridos de DOM**: el navegador tiene que construir su Modelo de Objetos de Documento basado en el código que usted escribe, por lo que es de interés para un buen rendimiento de la página mantener sus etiquetas al mínimo, solo usando y estilizando lo que la página necesita. Hasta este punto, se podría optimizar el exceso de CSS asociado con una página; los estilos que deben usarse solo en una página no necesitan incluirse en la hoja de estilo principal, por ejemplo.
|
||||
|
||||
**JavaScript**: Todo desarrollador de JavaScript debe estar atento a los scripts de 'bloqueo de renderizado' que deben cargarse antes de que el resto del DOM pueda atravesarse y pintarse en el navegador. Considere usar "diferir" con sus scripts en línea (como se hace en el módulo Terrarium).
|
||||
|
||||
✅ Pruebe algunos sitios en un [sitio web de prueba de velocidad del sitio](https://www.webpagetest.org/) para obtener más información sobre las comprobaciones comunes que se realizan para determinar el rendimiento del sitio.
|
||||
|
||||
Ahora que tiene una idea de cómo el navegador representa los recursos que le envía, veamos las últimas cosas que debe hacer para completar su extensión:
|
||||
|
||||
### Crea una función para calcular el color
|
||||
|
||||
Trabajando en `/ src / index.js`, agregue una función llamada` calculateColor () `después de la serie de variables` const` que estableció para obtener acceso al DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
¿Que está pasando aqui? Pasa un valor (la intensidad de carbono) de la llamada API que completó en la última lección, y luego calcula qué tan cerca está su valor del índice presentado en la matriz de colores. Luego, envía el valor de color más cercano al tiempo de ejecución de Chrome.
|
||||
|
||||
Chrome.runtime tiene [una API](https://developer.chrome.com/extensions/runtime) que maneja todo tipo de tareas en segundo plano, y tu extensión aprovecha eso:
|
||||
|
||||
> "Utilice la API chrome.runtime para recuperar la página de fondo, devolver detalles sobre el manifiesto y escuchar y responder a eventos en el ciclo de vida de la aplicación o extensión. También puede utilizar esta API para convertir la ruta relativa de las URL a URL calificadas".
|
||||
|
||||
✅ Si está desarrollando esta extensión de navegador para Edge, puede que le sorprenda que esté utilizando una API de Chrome. Las versiones más recientes del navegador Edge se ejecutan en el motor del navegador Chromium, por lo que puede aprovechar estas herramientas.
|
||||
|
||||
> Tenga en cuenta que si desea crear un perfil de una extensión de navegador, inicie las herramientas de desarrollo desde la propia extensión, ya que es su propia instancia de navegador independiente.
|
||||
|
||||
### Establecer un color de icono predeterminado
|
||||
|
||||
Ahora, en la función `init ()`, configure el ícono en verde genérico para comenzar nuevamente llamando a la acción `updateIcon` de Chrome:
|
||||
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Llame a la función, ejecute la llamada
|
||||
|
||||
A continuación, llame a la función que acaba de crear agregándola a la promesa devuelta por la API C02Signal:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Y finalmente, en `/dist/background.js`, agregue el oyente para estas llamadas de acción en segundo plano:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//tomado de la extensión Energy Lollipop, ¡buena característica!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
En este código, está agregando un oyente para cualquier mensaje que llegue al administrador de tareas de backend. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un icono del color adecuado usando la API de Canvas.
|
||||
|
||||
✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../../6-space-game/2-drawing-to-canvas/translations/README.es.md).
|
||||
|
||||
Ahora, reconstruya su extensión (`npm run build`), actualice y ejecute su extensión, y observe el cambio de color. ¿Es un buen momento para hacer un mandado o lavar los platos? ¡Ahora lo sabes!
|
||||
|
||||
Felicitaciones, ha creado una extensión de navegador útil y ha aprendido más sobre cómo funciona el navegador y cómo perfilar su rendimiento.
|
||||
|
||||
🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común?
|
||||
|
||||
## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Considere suscribirse a un [boletín informativo de rendimiento](https://perf.email/)
|
||||
|
||||
Investigue algunas de las formas en que los navegadores miden el rendimiento web consultando las pestañas de rendimiento de sus herramientas web. ¿Encuentra diferencias importantes?
|
||||
|
||||
**Tarea**: [Analizar el rendimiento de un sitio](assignment.md)
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
# Projet d'extension de navigateur Partie 3 : En savoir plus sur les tâches et les performances en arrière-plan
|
||||
|
||||
## Quiz préalable
|
||||
|
||||
[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=fr)
|
||||
|
||||
### Introduction
|
||||
|
||||
Dans les deux dernières leçons de ce module, vous avez appris à créer un formulaire et une zone d'affichage pour les données extraites d'une API. C'est un moyen très standard de créer des présences Web sur le Web. Vous avez même appris à gérer la récupération de données de manière asynchrone. Votre extension de navigateur est presque terminée.
|
||||
|
||||
Il reste à gérer certaines tâches en arrière-plan, dont le rafraîchissement de la couleur de l'icône de l'extension, c'est donc le moment idéal pour parler de la façon dont le navigateur gère ce genre de tâche. Pensons à ces tâches de navigateur dans le contexte des performances de vos ressources Web au fur et à mesure que vous les créez.
|
||||
|
||||
## Notions de base sur les performances Web
|
||||
|
||||
> "Les performances du site Web dépendent de deux choses : la vitesse à laquelle la page se charge et la vitesse à laquelle le code s'exécute dessus." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
La question de savoir comment rendre vos sites Web incroyablement rapides sur toutes sortes d'appareils, pour toutes sortes d'utilisateurs, dans toutes sortes de situations, est sans surprise vaste. Voici quelques points à garder à l'esprit lorsque vous créez un projet Web standard ou une extension de navigateur.
|
||||
|
||||
La première chose que vous devez faire pour vous assurer que votre site fonctionne efficacement est de collecter des données sur ses performances. Le premier endroit pour le faire est dans les outils de développement de votre navigateur Web. Dans Edge, vous pouvez sélectionner le bouton "Paramètres et plus" (l'icône à trois points en haut à droite du navigateur), puis accédez à Plus d'outils > Outils de développement et ouvrez l'onglet Performances. Vous pouvez également utiliser les raccourcis clavier `Ctrl` + `Maj` + `I` sur Windows, ou `Option` + `Commande` + `I` sur Mac pour ouvrir les outils de développement.
|
||||
|
||||
L'onglet Performance contient un outil de profilage. Ouvrez un site Web (essayez, par exemple, https://www.microsoft.com) et cliquez sur le bouton 'Record', puis actualisez le site. Arrêtez l'enregistrement à tout moment et vous pourrez voir les routines générées pour le 'script', le 'render' (rendu), et le 'paint' (l'affichage) du site:
|
||||
|
||||
|
||||
|
||||
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) à propos du panneau Performances dans Edge
|
||||
|
||||
> Astuce : pour avoir une vraie lecture de l'heure de démarrage de votre site web, videz le cache de votre navigateur
|
||||
|
||||
Sélectionnez des éléments de la chronologie du profil pour zoomer sur les événements qui se produisent pendant le chargement de votre page.
|
||||
|
||||
Obtenez un aperçu des performances de votre page en sélectionnant une partie de la chronologie du profil et en regardant le volet récapitulatif :
|
||||
|
||||
|
||||
|
||||
Vérifiez le volet Journal des événements pour voir si un événement a pris plus de 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Apprenez à connaître votre profileur! Ouvrez les outils de développement sur ce site et voyez s'il y a des goulots d'étranglement. Quel est l'élément le plus lent? Le plus rapide?
|
||||
|
||||
## Contrôles de profilage
|
||||
|
||||
En général, il existe des "zones à problèmes" que chaque développeur Web doit surveiller lors de la création d'un site, afin d'éviter les mauvaises surprises au moment du déploiement en production.
|
||||
|
||||
**Tailles des éléments**: Le Web est devenu 'plus lourd', et donc plus lent, au cours des dernières années. Une partie de ce poids est liée à l'utilisation d'images.
|
||||
|
||||
✅ Parcourez les [archives d'Internet](https://httparchive.org/reports/page-weight) pour une vue historique du poids des pages et plus encore.
|
||||
|
||||
Une bonne pratique consiste à vous assurer que vos images sont optimisées, livrées à la bonne taille et à la bonne résolution pour vos utilisateurs.
|
||||
|
||||
**Traversées du DOM**: Le navigateur doit construire son modèle objet de document en fonction du code que vous écrivez, il est donc dans l'intérêt d'une bonne performance de la page de garder vos balises minimales, en utilisant et en stylisant uniquement ce dont la page a besoin. À ce stade, l'excès de CSS associé à une page pourrait être optimisé ; les styles qui ne doivent être utilisés que sur une seule page n'ont pas besoin d'être inclus dans la feuille de style principale, par exemple.
|
||||
|
||||
**JavaScript**: Chaque développeur JavaScript doit surveiller les scripts 'bloquant le rendu' qui doivent être chargés avant que le reste du DOM puisse être parcouru et peint sur le navigateur. Pensez à utiliser `defer` avec vos scripts en ligne (comme cela se fait dans le module Terrarium).
|
||||
|
||||
✅ Essayez certains sites sur un [site Web de test de vitesse de site](https://www.webpagetest.org/) pour en apprendre plus sur les vérifications courantes qui sont effectuées pour déterminer les performances du site.
|
||||
|
||||
Maintenant que vous avez une idée de la façon dont le navigateur rend les ressources que vous lui envoyez, examinons les dernières choses que vous devez faire pour terminer votre extension:
|
||||
|
||||
### Créer une fonction pour calculer la couleur
|
||||
|
||||
En travaillant dans `/src/index.js`, ajoutez une fonction appelée `calculateColor()` après la série de variables `const` que vous avez définies pour accéder au DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
Que se passe t-il ici? Vous transmettez une valeur (l'intensité carbone) de l'appel d'API que vous avez terminé dans la dernière leçon, puis vous calculez à quel point sa valeur est proche de l'indice présenté dans le tableau de couleurs. Ensuite, vous envoyez la valeur de couleur la plus proche au moteur d'exécution Chrome.
|
||||
|
||||
Le chrome.runtime a [une API](https://developer.chrome.com/extensions/runtime) qui gère toutes sortes de tâches en arrière-plan, et votre extension en tire parti:
|
||||
|
||||
> "Utilisez l'API chrome.runtime pour récupérer la page d'arrière-plan, renvoyer des détails sur le manifeste, et écouter et répondre aux événements dans le cycle de vie de l'application ou de l'extension. Vous pouvez également utiliser cette API pour convertir le chemin relatif des URL en URL entièrement qualifiées."
|
||||
|
||||
✅ Si vous développez cette extension de navigateur pour Edge, vous pourriez être surpris d'utiliser une API Chrome. Les nouvelles versions du navigateur Edge s'exécutent sur le moteur de navigateur Chromium, vous pouvez donc tirer parti de ces outils.
|
||||
|
||||
> Notez que si vous souhaitez profiler une extension de navigateur, lancez les outils de développement à partir de l'extension elle-même, car il s'agit de sa propre instance de navigateur distincte.
|
||||
|
||||
### Définir une couleur d'icône par défaut
|
||||
|
||||
Maintenant, dans la fonction `init()`, définissez l'icône sur un vert générique pour commencer en appelant à nouveau l'action `updateIcon` de chrome:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Appeler la fonction, exécuter l'appel
|
||||
|
||||
Ensuite, appelez cette fonction que vous venez de créer en l'ajoutant à la promesse renvoyée par l'API C02Signal:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Et enfin, dans `/dist/background.js`, ajoutez l'écouteur pour ces appels d'action en arrière-plan:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//emprunté à l'extension energy lollipop, fonctionnalité intéressante !
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
Dans ce code, vous ajoutez un écouteur pour tous les messages arrivant au gestionnaire de tâches principal. S'il s'appelle 'updateIcon', le code suivant est exécuté pour dessiner une icône de la bonne couleur à l'aide de l'API Canvas.
|
||||
|
||||
✅ Vous en saurez plus sur l'API Canvas dans les [Cours sur le jeu spatial](../../../6-space-game/2-drawing-to-canvas/translations/README.fr.md).
|
||||
|
||||
Maintenant, recompiler votre extension (`npm run build`), actualisez et lancez la, et observez le changement de couleur. Est-ce le bon moment pour faire une course ou faire la vaisselle? Vous le savez maintenant!
|
||||
|
||||
Félicitations, vous avez créé une extension de navigateur utile et en avez appris davantage sur le fonctionnement du navigateur et sur la façon de profiler ses performances.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
|
||||
Enquêtez sur certains sites Web open source qui existent depuis longtemps et, sur la base de leur historique GitHub, voyez si vous pouvez déterminer comment ils ont été optimisés au fil des ans pour les performances, le cas échéant. Quel est le point sensible le plus courant?
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
Pensez à vous inscrire à une [newsletter sur les performances](https://perf.email/)
|
||||
|
||||
Étudiez certaines des façons dont les navigateurs évaluent les performances Web en consultant les onglets de performances de leurs outils Web. Trouvez-vous des différences majeures?
|
||||
|
||||
## Affectation
|
||||
|
||||
[Analyser un site par rapport à la performance](assignment.fr.md)
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 3: पृष्ठभूमि कार्य और प्रदर्शन के बारे में जानें
|
||||
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=hi)
|
||||
|
||||
### परिचय
|
||||
|
||||
इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
|
||||
|
||||
यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
|
||||
|
||||
## वेब प्रदर्शन मूल बातें
|
||||
|
||||
> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
सभी प्रकार की स्थितियों में, सभी प्रकार के उपयोगकर्ताओं के लिए, आपकी वेब साइटों को सभी प्रकार के उपकरणों पर तेज़ी से तेज़ बनाने का विषय, बहुत ही विशाल है। यहां कुछ बिंदुओं को ध्यान में रखा जाता है क्योंकि आप या तो एक मानक वेब परियोजना या एक ब्राउज़र एक्सटेंशन का निर्माण करते हैं।
|
||||
|
||||
अपनी साइट को कुशलतापूर्वक चलाने के लिए सबसे पहले आपको यह सुनिश्चित करने की आवश्यकता है कि उसके प्रदर्शन के बारे में डेटा इकट्ठा किया जाए। ऐसा करने का पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल में है।. एज में, आप "Settings and more" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools> Developer Tools पर नेविगेट करें और प्रदर्शन टैब खोलें। आप विंडोज पर कीबोर्ड शॉर्टकट `Ctrl` +` शिफ्ट` + `I` या मैक पर डेवलपर विकल्प खोलने के लिए `Option` + `Command` +` I` का भी उपयोग कर सकते हैं।
|
||||
|
||||
प्रदर्शन टैब में एक प्रोफ़ाइल उपकरण होता है। एक वेब साइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रीफ़्रेश करें। किसी भी समय रिकॉर्डिंग बंद कर दें, और आप साइट को 'स्क्रिप्ट', 'रेंडर' और 'पेंट' से उत्पन्न रूटीन को देख पाएंगे:
|
||||
|
||||
|
||||
|
||||
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
|
||||
|
||||
> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
|
||||
|
||||
आपके पृष्ठ लोड होने पर होने वाली घटनाओं को ज़ूम करने के लिए प्रोफ़ाइल समयरेखा के तत्वों का चयन करें।
|
||||
|
||||
प्रोफ़ाइल टाइमलाइन के एक भाग का चयन करके और सारांश फलक को देखकर अपने पृष्ठ के प्रदर्शन का एक स्नैपशॉट प्राप्त करें:
|
||||
|
||||
|
||||
|
||||
यह देखने के लिए कि क्या कोई घटना 15 ms से अधिक समय की नहीं है, इवेंट लॉग फलक की जाँच करें:
|
||||
|
||||
|
||||
|
||||
✅ अपने प्रोफाइलर को जाने! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई अड़चन है। सबसे धीमी गति से लोड होने वाली ऐसेट क्या है? सबसे तेज?
|
||||
|
||||
## प्रोफाइल की जाँच
|
||||
|
||||
सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
|
||||
|
||||
**एसेट आकार**: पिछले कुछ वर्षों में वेब 'भारी' हो गया है, और इस तरह धीमा है। इस वजन का कुछ छवियों के उपयोग के साथ क्या करना है।
|
||||
|
||||
✅ पृष्ठ भार और अधिक के ऐतिहासिक दृश्य के लिए [इंटरनेट आर्काइव](https://httparchive.org/reports/page-weight) देखें।
|
||||
|
||||
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियों को अनुकूलित किया जाए, आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन पर वितरित किया जाए।
|
||||
|
||||
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
|
||||
|
||||
**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
|
||||
|
||||
✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
|
||||
|
||||
अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
|
||||
|
||||
### रंग की गणना करने के लिए एक फ़ंक्शन बनाएं
|
||||
|
||||
`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप DOM तक पहुँच प्राप्त कर सकते हैं:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
|
||||
|
||||
Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
|
||||
|
||||
> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
|
||||
|
||||
✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
|
||||
|
||||
> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
|
||||
|
||||
### एक डिफ़ॉल्ट आइकन रंग सेट करें
|
||||
|
||||
अब, `init()`फंक्शन में, आइकॉन को फिर से क्रोम के `updateIcon` एक्शन को कॉल करके शुरू करने के लिए जेनेरिक ग्रीन होने के लिए सेट करें:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### फ़ंक्शन को कॉल करें, कॉल निष्पादित करें
|
||||
|
||||
इसके बाद, उस फ़ंक्शन को कॉल करें जिसे आपने C02Signal API द्वारा दिए गए वादे से जोड़कर बनाया है:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
और अंत में, `/dist/background.js` में, इन बैकग्राउंड एक्शन कॉल के लिए श्रोता जोड़ें:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//borrowed from energy lollipop extension, nice feature!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
|
||||
|
||||
✅ आप [अंतरिक्ष खेल के पाठों](../../../6-space-game/2-drawing-to-canvas/translations/README.hi.md) में कैनवस एपीआई के बारे में अधिक जानेंगे
|
||||
|
||||
आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
|
||||
|
||||
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
|
||||
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें
|
||||
|
||||
कुछ ऐसे तरीकों की जाँच करें जो ब्राउज़र अपने वेब टूल में प्रदर्शन टैब के माध्यम से वेब प्रदर्शन को गेज करते हैं। क्या आपको कोई बड़ा अंतर लगता है?
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[प्रदर्शन के लिए एक साइट का विश्लेषण करें](assignment.hi.md)
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Progetto di Estensione del Browser Parte 3: Conoscere le attività in background e le prestazioni
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=it)
|
||||
|
||||
### Introduzione
|
||||
|
||||
Nelle ultime due lezioni di questo form, si è imparato a creare un form e un'area di visualizzazione per i dati recuperati da un'API. È un modo molto standard per creare presenze web. Si è anche appreso come gestire il recupero dei dati in modo asincrono. L'estensione del browser è quasi completa.
|
||||
|
||||
Restano da gestire alcune attività in background, incluso l'aggiornamento del colore dell'icona dell'estensione, quindi questo è un ottimo momento per parlare di come il browser gestisce questo tipo di attività. Si pensi a queste attività del browser nel contesto delle prestazioni delle proprie risorse web mentre vengono create.
|
||||
|
||||
## Nozioni di base sulle prestazioni web
|
||||
|
||||
> "Le prestazioni del sito web riguardano due cose: la velocità di caricamento della pagina e la velocità di esecuzione del codice su di essa." - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
L'argomento su come rendere i propri siti web incredibilmente veloci su tutti i tipi di dispositivi, per tutti i tipi di utenti, in tutti i tipi di situazioni, non sorprende sia vasto. Di seguito sono riportati alcuni punti da tenere a mente quando si crea un progetto web standard o un'estensione del browser.
|
||||
|
||||
La prima cosa da fare per assicurarsi che il proprio sito funzioni in modo efficiente è raccogliere dati sulle sue prestazioni. Il primo posto per farlo è negli strumenti di sviluppo del proprio browser web. In Edge, selezionare il pulsante "Impostazioni e altro ancora" (l'icona dei tre punti in alto a destra nel browser), quindi accedere a Altri strumenti > Strumenti di sviluppo e aprire la scheda Prestazioni. Si può anche utilizzare la scorciatoia da tastiera `Ctrl` + `Maiusc` + `I` su Windows o `Opzione` + `Comando` + `I` su Mac per aprire gli strumenti di sviluppo.
|
||||
|
||||
La scheda Prestazioni contiene uno strumento di profilazione. Aprire un sito web (provare, ad esempio, https://www.microsoft.com) e fare clic sul pulsante "Registra", quindi aggiornare il sito. Interrompendo la registrazione in qualsiasi momento si sarà in grado di vedere le routine generate per "Esecuzione script", "Rendering" e "Disegno" per il sito:
|
||||
|
||||
|
||||
|
||||
✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge
|
||||
|
||||
> Suggerimento: per ottenere una lettura fedele del tempo di avvio del proprio sito web, svuotare la cache del browser
|
||||
|
||||
Selezionare elementi della sequenza temporale del profilo per ingrandire gli eventi che si verificano durante il caricamento della pagina.
|
||||
|
||||
Ottenere un'istantanea delle prestazioni della propria pagina selezionando una parte della sequenza temporale del profilo e guardando il riquadro di riepilogo:
|
||||
|
||||
|
||||
|
||||
Controllare il riquadro "Registro Eventi" per vedere se un evento ha richiesto più di 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Conoscere il propro profilatore! Aprire gli strumenti di sviluppo su questo sito e verificare se ci sono colli di bottiglia. Qual è la risorsa a caricamento più lento? La più veloce?
|
||||
|
||||
## Controlli di profilazione
|
||||
|
||||
In generale ci sono alcune "aree problematiche" che ogni sviluppatore web dovrebbe tenere d'occhio durante la costruzione di un sito, in modo da evitare brutte sorprese quando è il momento di distribuire in produzione.
|
||||
|
||||
**Dimensioni delle risorse**: negli ultimi anni il Web è diventato "più pesante" e quindi più lento. Parte di questo peso ha a che fare con l'uso delle immagini.
|
||||
|
||||
✅ Cercare in [Internet Archive](https://httparchive.org/reports/page-weight) una visualizzazione storica del peso della pagina e altro ancora.
|
||||
|
||||
Una buona pratica è garantire che le proprie immagini siano ottimizzate, distribuite con le dimensioni e la risoluzione giuste per i propri utenti.
|
||||
|
||||
**Attraversamenti DOM**: il browser deve costruire il suo Document Object Model in base al codice che si scrive, quindi è nell'interesse di una buona prestazione della pagina mantenere i propri tag minimi, usando e disegnando solo ciò di cui la pagina ha bisogno. A questo punto si potrebbe ottimizzare il CSS in eccesso associato a una pagina; gli stili che devono essere utilizzati solo su una pagina non devono essere inclusi nel foglio di stile principale, ad esempio.
|
||||
|
||||
**JavaScript**: ogni sviluppatore JavaScript dovrebbe controllare che gli script che bloccano il rendering siano caricati prima che il resto del DOM possa essere attraversato e visualizzato nel browser. Si consideri l'idea di utilizzare `defer` con i propri script inline (come è stato fatto nel modulo Terrario).
|
||||
|
||||
✅ Provare alcuni siti su un [sito web che verifica la velocità](https://www.webpagetest.org/) dei siti per ulteriori informazioni sui controlli comuni eseguiti per determinare le prestazioni del sito.
|
||||
|
||||
Ora che si ha un'idea di come il browser esegue il rendering delle risorse che gli vengono inviate, si darà un'occhiata alle ultime cose da fare per completare la propria estensione:
|
||||
|
||||
### Creare una funzione per calcolare il colore
|
||||
|
||||
Lavorando in `/src/index.js`, aggiungere una funzione chiamata `calcolateColor()` dopo la serie di variabili `const` impostate per ottenere l'accesso a elementi del DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
Cosa sta succedendo qui? Si passa un valore (l'intensità di carbonio) dalla chiamata API completata nell'ultima lezione, quindi si calcola quanto è vicino il suo valore all'indice presentato nell'array colors. Quindi si invia il valore di colore più vicino al runtime di chrome.
|
||||
|
||||
chrome.runtime ha [un'API](https://developer.chrome.com/extensions/runtime) che gestisce tutti i tipi di attività in background e l'estensione sta facendo leva su questo:
|
||||
|
||||
> "Utilizzare l'API chrome.runtime per recuperare la pagina in background, restituire dettagli sul manifest e ascoltare e rispondere agli eventi nel ciclo di vita dell'app o dell'estensione. Si può anche utilizzare questa API per convertire il percorso relativo degli URL in percorsi URL completi ".
|
||||
|
||||
✅ Se si sta sviluppando questa estensione del browser per Edge, potrebbe sorprendere che si sta utilizzando un'API chrome. Le versioni più recenti del browser Edge vengono eseguite sul motore del browser Chromium, quindi si possono sfruttare questi strumenti.
|
||||
|
||||
> Nota, se si desidera profilare un'estensione del browser, avviare gli strumenti di sviluppo dall'interno dell'estensione stessa, poiché si tratta di un'istanza del browser separata.
|
||||
|
||||
### Impostare un colore predefinito per l'icona
|
||||
|
||||
Ora, nella funzione `init()` , impostare l'icona come verde generico per iniziare di nuovo chiamando l'azione `updateIcon` di chrome:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Chiamare la funzione, eseguire la chiamata
|
||||
|
||||
Successivamente chiamare la funzione appena creata aggiungendola alla promessa restituita dall'API C02Signal:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Infine, in `/dist/background.js,`aggiungere l'event listener per queste chiamate di azione in background:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//presa in presito dall'estensione energy lollipop, simpatiica funzionalità!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
In questo codice, si sta aggiungendo un listener per tutti i messaggi che arrivano al gestore di attività di backend. Se questo messaggio si chiama 'updateIcon', viene eseguito il codice successivo per disegnare un'icona del colore corretto utilizzando l'API Canvas.
|
||||
|
||||
✅ Si Imparerà di più sull'API Canvas nelle [lezioni di Gioco Spaziale](../../../6-space-game/2-drawing-to-canvas/translations/README.it.md).
|
||||
|
||||
Ora, ricompilare l'estensione (`npm run build`), aggiornare e avviare l'estensione e verificare il cambio di colore. È un buon momento per fare una commissione o lavare i piatti? Ecco, adesso è noto, non ci sono più scuse!
|
||||
|
||||
Congratulazioni, è stata creata un'utile estensione per il browser e si è imparato di più su come funziona il browser e su come profilarne le prestazioni.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Esaminare alcuni siti web open source che esistono da molto tempo e, in base alla loro cronologia GitHub, vedere se si riesce a determinare come sono stati ottimizzate nel corso degli anni le prestazioni, se non del tutto. Qual è il punto dolente più comune?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=it)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Considerare l'idea di iscriversi a una [newsletter sulle prestazioni](https://perf.email/)
|
||||
|
||||
Analizzare alcuni dei modi in cui i browser misurano le prestazioni web esaminando le schede delle prestazioni nei loro strumenti web. Si sono riscontrate differenze importanti?
|
||||
|
||||
## Compito
|
||||
|
||||
[Analizzare un sito per le prestazioni](assignment.it.md)
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# ブラウザ拡張機能プロジェクト その 3: バックグラウンドタスクとパフォーマンスについて学ぶ
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=ja)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
このモジュールの最後の2つのレッスンでは、API からフェッチしたデータのフォームと表示領域を構築する方法を学びました。これは、Web 上でウェブプレゼンスを作成するための非常に標準的な方法です。非同期的にデータをフェッチする方法も学びました。ブラウザ拡張機能はほぼ完成しています。
|
||||
|
||||
拡張機能のアイコンの色を更新するなどのバックグラウンドタスクが残っているので、この機会にブラウザがこのようなタスクをどのように管理しているのかについて話しましょう。これらのブラウザタスクについて、Web 資産を構築する際のパフォーマンスとの関連で考えてみましょう。
|
||||
|
||||
## Web パフォーマンスの基礎
|
||||
|
||||
> "Web サイトのパフォーマンスには2つのことがあります: ページの読み込み速度と、その上のコードの実行速度です。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
どのようにしてあらゆるデバイス、あらゆるユーザー、あらゆる状況で、あなたのウェブサイトを燃えるように高速化するかという話題は、当然のことながら膨大なものになります。ここでは、標準的な Web プロジェクトまたはブラウザ拡張機能を構築する際に留意すべきポイントをいくつか紹介します。
|
||||
|
||||
サイトが効率的に動作していることを確認するために最初に行う必要があることは、そのパフォーマンスに関するデータを収集することです。これを行う最初の場所は、Web ブラウザの開発者ツールにあります。Edge では、「設定とその他」ボタン（ブラウザの右上にある3つの点のアイコン）を選択してから、「その他のツール」→「開発者ツール」に移動し、「パフォーマンス」タブを開きます。Windows ではキーボードショートカット `Ctrl` + `Shift` + `I`、Mac では `Option` + `Command` + `I` を使用して開発者ツールを開くこともできます。
|
||||
|
||||
パフォーマンスタブには、プロファイリングツールが含まれています。Web サイトを開いて (例えば https://www.microsoft.com を試してみてください)、「記録」ボタンをクリックし、サイトを更新します。いつでも録画を停止することができ、サイトを「スクリプト」、「レンダリング」、「ペイント」するために生成されたルーチンを見ることができます。
|
||||
|
||||
|
||||
|
||||
✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/?WT.mc_id=academic-77807-sagibbon) を参照してください。
|
||||
|
||||
> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。
|
||||
|
||||
プロファイルのタイムラインの要素を選択すると、ページの読み込み中に発生するイベントをズームインできます。
|
||||
|
||||
プロファイルのタイムラインの一部を選択してサマリーペインを見ることで、ページのパフォーマンスのスナップショットを得ることができます。
|
||||
|
||||
|
||||
|
||||
イベントログペインをチェックして、15ms 以上かかったイベントがあるかどうかを確認します。
|
||||
|
||||
|
||||
|
||||
✅ プロファイラを知りましょう! このサイトの開発者ツールを開いて、ボトルネックがないか確認してみましょう。最も読み込みが遅いアセットは? 一番速いのは?
|
||||
|
||||
## プロファイリングチェック
|
||||
|
||||
一般的には、本番環境にデプロイする際に厄介な驚きを避けるために、すべての Web 開発者がサイトを構築する際に注意すべき「問題点」がいくつかあります。
|
||||
|
||||
**アセットサイズ**: Web はここ数年で「重く」なり、その結果、遅くなっています。この重さのいくつかは、画像の使用に関係しています。
|
||||
|
||||
✅ ページの重さなどの歴史的な見方については、[Internet Archive](https://httparchive.org/reports/page-weight) を参照してください。
|
||||
|
||||
良い方法は、画像が最適化され、ユーザーにとって適切なサイズと解像度で配信されるようにすることです。
|
||||
|
||||
**DOM トラバーサル**: ブラウザはあなたが書いたコードに基づいて Document Object Model を構築しなければならないので、タグを最小限に抑え、ページが必要とするものだけを使用してスタイリングすることがページパフォーマンスの向上につながります。この点については、ページに関連する余分な CSS を最適化することができます。例えば、1 つのページでのみ使用する必要のあるスタイルは、メインのスタイルシートに含める必要はありません。
|
||||
|
||||
**JavaScript**: すべての JavaScript 開発者は、DOM の残りの部分を走査してブラウザに描画する前にロードしなければならない 'レンダーブロッキング' スクリプトに注意する必要があります。(テラリウムモジュールで行われているように) インラインスクリプトで `defer` を使うことを検討してください。
|
||||
|
||||
✅ [Site Speed Test の Web サイト](https://www.webpagetest.org/)でいくつかのサイトを試してみると、サイトのパフォーマンスを判断するために行われる一般的なチェックについて詳しく知ることができます。
|
||||
|
||||
これで、ブラウザが送信したアセットをどのようにレンダリングするかがわかったので、拡張機能を完成させるために必要な最後のいくつかのことを見てみましょう。
|
||||
|
||||
### 色を計算する関数の作成
|
||||
|
||||
`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
|
||||
|
||||
```javascript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
ここでは何をしているのでしょうか? 前回のレッスンで完了した API コールの値 (炭素強度) を渡して、その値が colors 配列のインデックスにどれだけ近いかを計算します。そして、最も近い色の値を chrome.runtime に送ります。
|
||||
|
||||
chrome.runtime には、あらゆる種類のバックグラウンドタスクを処理する [API](https://developer.chrome.com/extensions/runtime) があり、あなたの拡張機能はそれを利用しています。
|
||||
|
||||
> "chrome.runtime API を使用して、バックグラウンドページを取得したり、マニフェストの詳細を返したり、アプリや拡張機能のライフサイクルでイベントをリッスンして応答したりすることができます。また、この API を使用して URL の相対パスを完全修飾 URL に変換することもできます。"
|
||||
|
||||
✅ このブラウザ拡張を Edge 用に開発していると、chrome の API を使っていることに驚くかもしれません。新しい Edge ブラウザのバージョンは Chromium ブラウザエンジン上で動作しているので、これらのツールを活用することができます。
|
||||
|
||||
> ブラウザ拡張機能をプロファイル化したい場合は、拡張機能自体が独立したブラウザインスタンスであるため、拡張機能自体の中から開発ツールを起動してください。
|
||||
|
||||
### デフォルトのアイコンの色の設定
|
||||
|
||||
ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
|
||||
|
||||
```javascript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### 関数の呼び出し、呼び出しの実行
|
||||
|
||||
次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
|
||||
|
||||
```javascript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
|
||||
|
||||
```javascript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//エナジーロリポップの拡張機能から借りた、良い機能
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
このコードでは、バックエンドのタスクマネージャに来るメッセージのリスナーを追加しています。'updateIcon' と呼ばれる場合、次のコードを実行して、Canvas API を使って適切な色のアイコンを描画しています。
|
||||
|
||||
✅ Canvas API については、[スペースゲームのレッスン](../../../6-space-game/2-drawing-to-canvas/translations/README.ja.md)で詳しく説明しています。
|
||||
|
||||
さて、拡張機能を再構築 (`npm run build`) して、リフレッシュして拡張機能を起動し、色の変化を見てみましょう。用事を済ませるのにも、お皿を洗うのにも良い時間帯でしょうか? これでわかりました!
|
||||
|
||||
おめでとうございます。あなたは便利なブラウザ拡張機能を構築し、ブラウザがどのように動作するのか、そのパフォーマンスをどのようにプロファイルするのかについて、より多くのことを学びました。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
オープンソースの Web サイトの中には、かなり昔からあるものもあり、それらの GitHub の歴史に基づいて、何年にもわたってどのようにパフォーマンスが最適化されてきたのかを調べてみましょう。最も一般的な問題点は何でしょうか?
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=ja)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
[パフォーマンスニュースレター](https://perf.email/)への登録を検討してみませんか?
|
||||
|
||||
Web ツールのパフォーマンスタブを見て、ブラウザが Web のパフォーマンスを評価する方法のいくつかを調査してください。大きな違いはありますか?
|
||||
|
||||
## 課題
|
||||
|
||||
[パフォーマンスのためにサイトを分析する](assignment.ja.md)
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# 브라우저 확장 프로젝트 파트 3: 백그라운드 작업과 성능 학습
|
||||
|
||||
## 강의 전 퀴즈
|
||||
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=ko)
|
||||
|
||||
### 소개
|
||||
|
||||
이 모듈의 마지막 두 강의에서는, API에서 가져온 데이터에 대한 폼과 출력 영역을 만드는 방법을 배웠습니다. 웹에서 웹 프레즌스를 만드는 매우 표준적인 방법입니다. 비동기로 데이터를 가져와서 처리하는 방법도 배웠습니다. 브라우저 확장이 거의 완성되었습니다.
|
||||
|
||||
확장의 아이콘 색상을 새로 고치는 것부터 포함하여, 일부 백그라운드 작업을 관리하는 것도 남아있으므로, 브라우저가 이러한 종류의 작업을 관리하는 방법에 대해 이야기해 볼 수 있는 시간입니다. 웹 어셋을 구축하며 성능과 관련한 브라우저 작업에 대해 생각합시다.
|
||||
|
||||
## 웹 성능 기초
|
||||
|
||||
> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
모든 종류의 사용자와 상황에서의 모든 장치에서, 웹 사이트를 매우 빠르게 작동하도록 만드는 방법은 놀랍지 않을 정도로 많습니다. 표준 웹 프로젝트 혹은 브라우저 확장을 만들 때 알아두어야 할 몇 가지 사항이 있습니다.
|
||||
|
||||
사이트가 효율적으로 실행되는지 확인하기 위해 가장 먼저 할 일은 성능 데이터를 모으는 것입니다. 첫 번째 장소는 웹 브라우저의 개발자 도구입니다. Edge에서는, 브라우저 우측 상단에 존재하는 세 개 점을 선택한 다음, More Tools > Developer Tools로 이동하여 Performance 탭을 열 수 있습니다.
|
||||
|
||||
Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고 (예를 들어, https://www.microsoft.com) 'Record' 버튼을 클릭한 뒤에, 사이트를 새로 고칩니다. 언제든 recording을 중단하면, 사이트를 'script', 'render', 그리고 'paint' 하려고 만든 루틴을 볼 수 있습니다:
|
||||
|
||||
|
||||
|
||||
✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)를 방문하세요
|
||||
|
||||
> Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요
|
||||
|
||||
프로필 타임라인의 요소를 선택하여 페이지가 불러지는 동안에 발생하는 이벤트를 확대합니다.
|
||||
|
||||
프로필 타임라인의 일부를 선택하고 요약 패널을 보게된 뒤 페이지 performance의 snapshot을 가져옵니다:
|
||||
|
||||
|
||||
|
||||
이벤트 로그 패널을 확인하여 15ms 이상 넘긴 이벤트가 있는지 확인합니다:
|
||||
|
||||
|
||||
|
||||
✅ 프로파일러에 대해 알아보세요! 이 사이트에서 개발자 도구를 열고 병목 현상이 있는지 확인하세요. 불러오는 속도가 가장 느린 어셋은 무엇인가요? 가장 빠른가요?
|
||||
|
||||
## 프로파일링 점검
|
||||
|
||||
일반적으로 모든 웹 개발자가 사이트를 만들 때는 주의해야 하는 몇 가지 "problem areas"가 있습니다, 따라서 프로덕션으로 배포할 때 깜짝 놀라는 것을 피할 수 있습니다.
|
||||
|
||||
**어셋 크기**: 웹은 지난 몇 년 동안 '무거워'지고 느려졌습니다. 이렇게 무거워지는 일부 원인은 이미지를 사용하는 것과 관련이 있습니다.
|
||||
|
||||
✅ 페이지 무게 등의 역사적 관점을 보려면 [Internet Archive](https://httparchive.org/reports/page-weight) 를 살펴보세요.
|
||||
|
||||
이미지가 최적화되어 사용자에게 적당한 크기와 해상도로 제공하고 있는지, 확인해보는 것이 좋습니다.
|
||||
|
||||
**DOM 순회**: 브라우저는 작성한 코드를 기반으로 Document Object Model을 작성하므로, 페이지에 필요한 것만 사용하며 스타일을 지정하고, 태그도 적게 사용하는 것이 좋은 페이지 성능을 위해 필요합니다. 이 시점에서, 페이지와 관련되어 많은 CSS를 최적화할 수 있습니다: 예를 들면, 한 페이지에서만 사용할 스타일은 main style sheet에 포함할 필요가 없습니다.
|
||||
|
||||
**JavaScript**: 모든 JavaScript 개발자는 나머지 DOM을 탐색하는 과정을 브라우저에 그리기 전에 불러와야 한다면 'render-blocking' 스크립트를 봐야 합니다. inline 스크립트와 (Terrarium 모듈에서 한 것처럼) `defer` 사용을 고려해보세요.
|
||||
|
||||
✅ [Site Speed Test website](https://www.webpagetest.org/)에서 일부 사이트를 시도해보고 사이트 성능을 결정하기 위해 수행되는 일반적인 확인 사항에 대해 알아보세요.
|
||||
|
||||
이제 브라우저가 전송한 어셋을 렌더링하는 방법에 대한 아이디어를 얻었으므로, 확장을 완료하고자 하는 마지막 몇 작업을 봅시다:
|
||||
|
||||
### 색상 계산하는 함수 생성하기
|
||||
|
||||
`/src/index.js`에서 작업하면서, DOM에 접근하기 위해 설정한 `const` 변수 뒤에 `calculateColor()`라는 함수를 추가합니다:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
여기에 어떤 일이 일어나고 있나요? 지난 강의에서 완료한 API 호출에서 값(탄소 강도)을 전달한 다음에, 값이 colors 배열에 표시된 인덱스에서 얼마나 가까운 지 계산합니다. 그러고 가장 가까운 색상 값을 chrome 런타임으로 보냅니다.
|
||||
|
||||
hrome.runtime은 [API](https://developer.chrome.com/extensions/runtime)는 모든 종류의 백그라운드 작업을 제어하며, 확장은 다음을 활용합니다:
|
||||
|
||||
> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
|
||||
|
||||
✅ Edge 용 브라우저 확장을 개발하고 있다면, chrome API를 사용하고 있다는 점에 놀랄 수 있습니다. 최신 Edge 브라우저 버전은 Chromium 브라우저 엔진에서 실행되므로, 이 도구를 활용할 수 있습니다.
|
||||
|
||||
> 참고로 브라우저 확장을 프로파일링하려면, 이는 분리된 브라우저 인스턴스이므로 확장 자체적으로 dev tools를 시작합니다.
|
||||
|
||||
### 기본 아이콘 색상 지정하기
|
||||
|
||||
이제, `init()` 함수에서, chrome의 `updateIcon` 액션을 다시 호출하여 시작할 때의 아이콘을 평범한 녹색으로 설정합니다:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### 함수 호출하고, call 실행하기
|
||||
|
||||
다음, 방금 전에 만든 함수를 C02Signal API가 반환한 promise에 추가하여 호출합니다:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
그리고 마지막으로, `/dist/background.js` 에서, 백그라운드 엑션 호출하는 리스너를 추가합니다:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//borrowed from energy lollipop extension, nice feature!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
코드에서, 백엔드 작업 매니저로 들어오는 모든 메시지 리스너를 추가합니다. 'updateIcon' 이라고 불리면, 다음 코드가 수행되고, Canvas API를 사용해서 적절한 색상의 아이콘을 그립니다.
|
||||
|
||||
✅ [Space Game lessons](../../../6-space-game/2-drawing-to-canvas/translations/README.ko.md)에서 Canvas API에 대해 더 배울 것 입니다.
|
||||
|
||||
이제, 확장을 (`npm run build`)로 다시 빌드합니다, 확장을 새로 고치고 시작한 뒤, 색상이 변하는 것을 봅니다. 심부름을 하거나 설거지를 하기에 좋을 때 인가요? 이제 압니다!
|
||||
|
||||
축하합니다, 유용한 브라우저 확장을 만들었고 브라우저 작동 방식과 성능 프로파일링 방식에 대해 더 배웠습니다.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
일부 오픈소스 웹 사이트가 옛날에도 있었는지 알아보고, GitHub 히스토리를 바탕으로, 몇 년 동안 성능을 위해 최적화되고 있었는가에 대해 확인하세요. 가장 일반적인 문제점은 무엇일까요?
|
||||
|
||||
## 강의 후 퀴즈
|
||||
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=ko)
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
[performance newsletter](https://perf.email/) 가입을 고려해보세요
|
||||
|
||||
웹 도구의 performance 탭을 통하여 브라우저에서 웹 성능을 측정하는 방식이 어떤 것인지 알아보세요. 큰 차이점을 찾을 수 있나요?
|
||||
|
||||
## 과제
|
||||
|
||||
[Analyze a site for performance](../assignment.md)
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
# Projek Pelanjutan Penyemak Imbas Bahagian 3: Ketahui mengenai Tugas dan Prestasi Latar Belakang
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Pengenalan
|
||||
|
||||
Dalam dua pelajaran terakhir modul ini, anda belajar bagaimana membuat borang dan kawasan paparan untuk data yang diambil dari API. Ini adalah kaedah yang sangat standard untuk membuat kehadiran web di web. Anda juga belajar bagaimana menangani pengambilan data secara tidak serentak. Sambungan penyemak imbas anda hampir selesai.
|
||||
|
||||
Masih perlu untuk menguruskan beberapa tugas latar belakang, termasuk menyegarkan warna ikon pelanjutan, jadi ini adalah masa yang tepat untuk membincangkan bagaimana penyemak imbas menguruskan tugas seperti ini. Mari fikirkan tugas penyemak imbas ini dalam konteks prestasi aset web anda semasa anda membuatnya.
|
||||
|
||||
## Asas Prestasi Web
|
||||
|
||||
> "Prestasi laman web adalah mengenai dua perkara: seberapa pantas halaman dimuat, dan seberapa pantas kod di dalamnya berjalan." - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
Topik bagaimana membuat laman web anda sangat cepat di semua jenis peranti, untuk semua jenis pengguna, dalam semua jenis situasi, sangat mengejutkan. Berikut adalah beberapa perkara yang perlu diingat semasa anda membina projek web standard atau pelanjutan penyemak imbas.
|
||||
|
||||
Perkara pertama yang perlu anda lakukan untuk memastikan laman web anda berjalan dengan cekap adalah mengumpulkan data mengenai prestasinya. Tempat pertama untuk melakukan ini adalah dengan alat pembangun penyemak imbas web anda. Di Edge, anda boleh memilih butang "Tetapan dan lain-lain" (ikon tiga titik di kanan atas penyemak imbas), kemudian arahkan ke Lebih Banyak Alat> Alat Pembangun dan buka tab Prestasi. Anda juga boleh menggunakan pintasan papan kekunci `Ctrl` + `Shift` + `I` pada Windows, atau `Option` + `Command` + `I` di Mac untuk membuka alat pembangun.
|
||||
|
||||
Tab Prestasi mengandungi alat Profil. Buka laman web (cuba, misalnya, https://www.microsoft.com) dan klik butang 'Rakam', kemudian muat semula laman web tersebut. Hentikan rakaman pada bila-bila masa, dan anda akan dapat melihat rutin yang dihasilkan untuk 'script', 'render', dan 'cat' laman web ini:
|
||||
|
||||
|
||||
|
||||
✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge
|
||||
|
||||
> Petua: untuk mendapatkan bacaan sebenar mengenai masa permulaan laman web anda, kosongkan cache penyemak imbas anda
|
||||
|
||||
Pilih elemen garis masa profil untuk memperbesar peristiwa yang berlaku semasa halaman anda dimuat.
|
||||
|
||||
Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan:
|
||||
|
||||
|
||||
|
||||
Periksa panel Log Peristiwa untuk melihat apakah ada acara yang mengambil masa lebih dari 15 ms
|
||||
|
||||
|
||||
|
||||
✅ Kenali profiler anda! Buka alat pembangun di laman web ini dan lihat apakah ada kesulitan. Apakah aset pemuatan paling lambat? Paling pantas?
|
||||
|
||||
## Pemeriksaan profil
|
||||
|
||||
Secara umum ada beberapa "masalah" yang harus diperhatikan oleh setiap pembangun web ketika membangun laman web, untuk mengelakkan kejutan buruk ketika tiba waktunya untuk digunakan.
|
||||
|
||||
**Saiz aset**: Web menjadi 'lebih berat', dan dengan itu lebih perlahan, sejak beberapa tahun kebelakangan. Sebilangan berat ini ada kaitannya dengan penggunaan gambar.
|
||||
|
||||
✅ Lihat melalui [Arkib Internet](https://httparchive.org/reports/page-weight) untuk melihat sejarah berat halaman dan banyak lagi.
|
||||
|
||||
Amalan yang baik adalah memastikan gambar anda dioptimumkan, disampaikan pada ukuran dan resolusi yang tepat untuk pengguna anda.
|
||||
|
||||
**DOM traversals**: Penyemak imbas harus membina Model Objek Dokumennya berdasarkan kod yang anda tulis, jadi demi prestasi halaman yang baik untuk memastikan tag anda minimum, hanya menggunakan dan menggayakan apa yang diperlukan oleh halaman. Hingga saat ini, lebihan CSS yang dikaitkan dengan halaman dapat dioptimumkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu disertakan dalam helaian gaya utama, misalnya.
|
||||
|
||||
**JavaScript**: Setiap pengembang JavaScript harus menonton skrip 'render-blocking' yang mesti dimuat sebelum sisa DOM dapat dilalui dan dicat ke penyemak imbas. Pertimbangkan untuk menggunakan `defer` dengan skrip sebaris anda (seperti yang dilakukan dalam modul Terrarium).
|
||||
|
||||
✅ Cubalah beberapa laman web di [laman web Uji Kelajuan Web](https://www.webpagetest.org/) untuk mengetahui lebih lanjut mengenai pemeriksaan biasa yang dilakukan untuk menentukan prestasi laman web.
|
||||
|
||||
Setelah anda mempunyai idea tentang bagaimana penyemak imbas memberikan aset yang anda hantar kepadanya, mari kita lihat beberapa perkara terakhir yang perlu anda lakukan untuk menyelesaikan peluasan anda:
|
||||
|
||||
### Buat fungsi untuk mengira warna
|
||||
|
||||
Bekerja di `/src/index.js`, tambahkan fungsi yang disebut `calculColor ()` setelah rangkaian pemboleh ubah `const` yang anda tetapkan untuk mendapatkan akses ke DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
Apa yang berlaku di sini? Anda memasukkan nilai (intensiti karbon) dari panggilan API yang anda selesaikan pada pelajaran terakhir, dan kemudian anda mengira seberapa dekat nilainya dengan indeks yang disajikan dalam array warna. Kemudian anda menghantar nilai warna yang paling hampir ke masa krom.
|
||||
|
||||
The chrome.runtime mempunyai [API](https://developer.chrome.com/extensions/runtime) yang menangani semua jenis tugas latar belakang, dan pelanjutan anda memanfaatkan:
|
||||
|
||||
> "Gunakan API chrome.runtime untuk mengambil halaman latar belakang, mengembalikan butiran tentang manifes, dan mendengarkan dan menanggapi peristiwa dalam aplikasi atau kitaran hayat pelanjutan. Anda juga dapat menggunakan API ini untuk menukar jalur relatif URL menjadi sepenuhnya- URL yang berkelayakan."
|
||||
|
||||
✅ Sekiranya anda mengembangkan pelanjutan penyemak imbas ini untuk Edge, mungkin mengejutkan anda bahawa anda menggunakan API krom. Versi penyemak imbas Edge yang lebih baru dijalankan pada enjin penyemak imbas Chromium, jadi anda dapat memanfaatkan alat ini.
|
||||
|
||||
> Perhatikan, jika anda ingin membuat profil pelanjutan penyemak imbas, lancarkan alat dev dari dalam pelanjutan itu sendiri, kerana ia adalah contoh penyemak imbas tersendiri.
|
||||
|
||||
### Tetapkan warna ikon lalai
|
||||
|
||||
Sekarang, dalam fungsi `init()`, tetapkan ikon menjadi hijau generik untuk dimulakan dengan memanggil sekali lagi tindakan `updateIcon` chrome:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Panggil fungsi, laksanakan panggilan
|
||||
|
||||
Seterusnya, panggil fungsi yang baru anda buat dengan menambahkannya pada janji yang dikembalikan oleh C02Signal API:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Dan akhirnya, di `/dist/background.js`, tambahkan pendengar untuk panggilan tindakan latar ini:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//dipinjam dari pelanjutan lollipop, ciri menarik
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
Dalam kod ini, anda menambahkan pendengar untuk sebarang mesej yang datang ke pengurus tugas backend. Sekiranya disebut 'updateIcon', maka kod seterusnya dijalankan, untuk menggambar ikon warna yang tepat menggunakan Canvas API.
|
||||
|
||||
✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../../6-space-game/2-drawing-to-canvas/translations/README.ms.md).
|
||||
|
||||
Sekarang, buat semula pelanjutan anda (`npm run build`), muat semula dan lancarkan peluasan anda, dan perhatikan perubahan warnanya. Adakah masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
|
||||
|
||||
Tahniah, anda telah membina pelanjutan penyemak imbas yang berguna dan mengetahui lebih lanjut mengenai cara penyemak imbas berfungsi dan bagaimana profil prestasinya.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Selidiki beberapa laman web sumber terbuka telah lama wujud, dan, berdasarkan sejarah GitHub mereka, lihat apakah anda dapat menentukan bagaimana mereka dioptimumkan selama bertahun-tahun untuk prestasi, jika tidak. Apakah titik kesakitan yang paling biasa?
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Pertimbangkan untuk mendaftar ke [buletin prestasi](https://perf.email/)
|
||||
|
||||
Selidiki beberapa cara penyemak imbas mengukur prestasi web dengan melihat tab prestasi di alat web mereka. Adakah anda menemui perbezaan besar?
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Menganalisis laman web untuk prestasi](assignment.ms.md)
|
||||
@@ -0,0 +1,160 @@
|
||||
# 瀏覽器擴充功能專案 Part 1：學習背景工作與效能
|
||||
|
||||
## 課前測驗
|
||||
|
||||
[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=zh_tw)
|
||||
|
||||
### 大綱
|
||||
|
||||
在前兩堂課程中，你學會如何建立表單、顯示 API 回覆的資料在結果區塊中，這是網頁處理網頁資訊的標準行為。你甚至學會了如何非同步性地抓取資料。你的擴充套件就快完成了。
|
||||
|
||||
它只剩管理背景工作：包括刷新套件的圖示顏色，我們來討論瀏覽器是如何處理這類的工作。也讓我們探討你所建立的網頁，瀏覽器會多有效地處理其中的內容。
|
||||
|
||||
## 網頁處理效能的基礎
|
||||
|
||||
> "網頁處理效能攸關兩件事：網頁多快地載入，與程式多快地執行。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
關於如何讓你的網頁能快速地運作在各類裝置、各個使用者以及各種情況，是一件難以想像的龐大主題。這裡有一些要點確保你在開發網頁或是擴充功能時，銘記在心。
|
||||
|
||||
第一件事為確保網頁收集關於網頁效能的資料，在瀏覽器的開發者工具中可以實現它。在 Edge 中，選擇「設定及更多」按鈕(瀏覽器上三個點的圖示)，並選擇更多工具 > 開發人員工具並開啟 Performance 分頁。你也可以使用鍵盤快捷鍵，Windows 上的 `Ctrl` + `Shift` + `I` 與 Mac 上的 `Option` + `Command` + `I` 來開啟開發人員工具。
|
||||
|
||||
Performance 分頁包括了效能分析工具。開啟一個網頁，例如 https://www.microsoft.com ，點擊 'Record' 按鈕並重新整理網頁。停止錄製後你就能取得網頁的 'script'、'render' 與 'paint' 的過程與資訊：
|
||||
|
||||
|
||||
|
||||
✅ 造訪 [Microsoft 文件](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)觀看 Edge 的 Performance 分頁資訊
|
||||
|
||||
> 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。
|
||||
|
||||
選擇一樣網頁在載入時，時間列中出現的事件物件。
|
||||
|
||||
觀看它的總覽面板並截圖你的網頁效能。
|
||||
|
||||
|
||||
|
||||
檢查 Event Log 面板，是否有網頁事件花超過 15 毫秒：
|
||||
|
||||
|
||||
|
||||
✅ 了解你的性能分析工具！在這個網頁中，開啟開發者工具，檢查是否有任何 bottleneck。什麼是載入最久的物件？哪個又是最快的？
|
||||
|
||||
## 效能分析
|
||||
|
||||
總體而言，每一位網頁開發者一定要注意一些「有問題的地方」，避免在發布作品時有令人意想不到的驚喜。
|
||||
|
||||
**資產(Asset)大小**：過去幾年來，網頁「變重」了，也因此變慢了。有些負擔來自於圖片的使用。
|
||||
|
||||
✅ 查詢 [Internet Archive](https://httparchive.org/reports/page-weight)，看看過去的網頁負擔等資訊。
|
||||
|
||||
一個好的習慣是確保你的圖片有做最佳化，呈現合理的檔案大小及解析度影像給你的使用者。
|
||||
|
||||
**DOM 查找元素(Traversal)**：瀏覽器必須依照你的程式碼建立 Document Object Model，請確保你的 tags 最小化，網頁只使用必須的功能與造型。另外，過量的網頁 CSS 也可以被最佳化，舉例來說，造型樣板只用在單頁上，而非全域上。
|
||||
|
||||
**JavaScript**：每一位 JavaScript 開發者會觀察 'render-blocking' 腳本，它會在 DOM 查找與瀏覽器呈現前被載入好。請考慮使用 `defer` 在你的程式碼中，我們的盆栽盒專案就有實踐這行。
|
||||
|
||||
✅ 在[網頁測速網](https://www.webpagetest.org/)上測試一些網頁，學習確認網頁效能的基本檢查。
|
||||
|
||||
現在你了解瀏覽器如何呈現你所提供的資產，我們來看看我們的擴充功能最後需要補齊的項目：
|
||||
|
||||
### 建立函式計算顏色
|
||||
|
||||
編輯 `/src/index.js`，新增函式 `calculateColor()` 在一系列為了 DOM 存取的 `const` 變數之後：
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
發生了什麼事？你傳遞了 API 回傳的二氧化碳濃度數值，計算出它最適合對應的顏色矩陣索引位置。之後，你將這個顏色數值傳給了 chrome runtime。
|
||||
|
||||
chrome.runtime 有[一個 API](https://developer.chrome.com/extensions/runtime)處理所有的背景工作，你的擴充套件借助了此功能：
|
||||
|
||||
> "在應用程式中，使用 chrome.runtime API 來接收背景頁面，回傳關於 manifest 的資訊，監聽並回應事件。你也可以利用此 API 轉換 URL 的相對路徑成絕對路徑。"
|
||||
|
||||
✅ 如果你正打算開發此專案給 Edge 瀏覽器上使用，你會訝異你使用的是 chrome API。新的 Edge 瀏覽器執行在 Chromium browser 引擎上，所以你也能使用這些工具。
|
||||
|
||||
> 注意，如果你想要剖析瀏覽器擴充功能，請在擴充套件上執行開發者工具，它與瀏覽器主視窗為不同的個體。
|
||||
|
||||
### 設定圖示預設顏色
|
||||
|
||||
現在，在函式 `init()` 中，利用呼叫 chrome `updateIcon` 設定圖示顏色為通用綠：
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### 呼叫函式、執行呼叫
|
||||
|
||||
接下來，在 C02Signal API 回傳的 promise 物件下方呼叫函式：
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
最後，在檔案 `/dist/background.js` 中，新增事件監聽者給這些背景行為的呼叫：
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//參考 energy lollipop extension，很好的程式！
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
在此程式中，你建立了事件監聽者給任何前到背景工作管理者的訊息。若 'updateIcon' 被呼叫，則接下來的程式會被執行，利用 Canvas API 繪製出對應顏色的圖示。
|
||||
|
||||
✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。
|
||||
|
||||
現在，重新建制你的擴充功能(`npm run build`)，刷新並運行你的套件，觀察圖示的顏色變化。現在是時候去跑腿或是洗碗嗎？現在你知道了！
|
||||
|
||||
恭喜你，你已經建立了一款實用的瀏覽器擴充功能，並學到更多瀏覽器的運作方式與監測它的效能分析。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
調查一些悠久的開源網站，並根據它們的 GitHub 歷史，你能分辨它們過去幾年以來效能上的調整嗎？什麼它們是共同的痛點？
|
||||
|
||||
## 課後測驗
|
||||
|
||||
[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
請考慮註冊[performance newsletter](https://perf.email/)
|
||||
|
||||
調查瀏覽器測量網頁效能的方法，查看開發者工具內的 Performance 分頁。你能找到什麼巨大的差別嗎？
|
||||
|
||||
## 作業
|
||||
|
||||
[分析網頁效能](assignment.zh-tw.md)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Analizar el rendimiento de un sitio
|
||||
|
||||
Proporcione un informe detallado de un sitio web, que muestre las áreas donde el rendimiento es problemático. Analice por qué el sitio es lento y qué podría hacer para acelerarlo. No confíe solo en las herramientas del navegador, investigue un poco sobre otras herramientas que pueden ayudar a su informe.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | -------------------------------------------------- -------------------------------------------------- ------ | --------------------------- | ----------------------------- |
|
||||
| | Se presenta un informe con detalles extraídos no solo de las herramientas del navegador, sino también de herramientas de terceros, si están disponibles | Se presenta un informe básico | Se presenta un informe mínimo |
|
||||
@@ -0,0 +1,9 @@
|
||||
# Analyser un site par rapport à la performance
|
||||
|
||||
Fournissez un rapport détaillé d'un site Web, indiquant les domaines où les performances sont problématiques. Analysez pourquoi le site est lent et ce que vous pourriez faire pour l'accélérer. Ne vous fiez pas uniquement aux outils du navigateur, mais faites des recherches sur d'autres outils qui peuvent vous aider dans votre rapport.
|
||||
|
||||
## Rubrique
|
||||
|
||||
| Critère | Exemplaire | Adéquat | Besoin d'amélioration |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Un rapport est présenté avec des détails tirés non seulement des outils de navigation, mais aussi d'outils tiers si disponibles | Un rapport basique est présenté | Un rapport minimal est présenté |
|
||||
@@ -0,0 +1,9 @@
|
||||
# प्रदर्शन के लिए एक साइट का विश्लेषण करें
|
||||
|
||||
वेब साइट की एक विस्तृत रिपोर्ट प्रदान करें, जिसमें ऐसे क्षेत्र दिखाए जा रहे हैं जहाँ प्रदर्शन समस्याग्रस्त है. विश्लेषण करें कि साइट धीमी क्यों है और आप इसे गति देने के लिए क्या कर सकते हैं. केवल ब्राउज़र टूल पर भरोसा न करें, लेकिन अन्य उपकरणों पर कुछ शोध करें जो आपकी रिपोर्ट में मदद कर सकते हैं.
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------ |
|
||||
| | एक रिपोर्ट न केवल ब्राउज़र टूल से नहीं, बल्कि उपलब्ध है तो थर्ड पार्टी टूल्स से भी विवरण के साथ प्रस्तुत की जाती है | एक बुनियादी रिपोर्ट प्रस्तुत की गई है | एक न्यूनतम रिपोर्ट प्रस्तुत की गई है |
|
||||
@@ -0,0 +1,9 @@
|
||||
# Analizzare un sito per le prestazioni
|
||||
|
||||
Fornire un rapporto dettagliato di un sito Web, mostrando le aree in cui le prestazioni sono problematiche. Analizzare perché il sito è lento e cosa si potrebbe fare per velocizzarlo. Non fare affidamento solo sugli strumenti del browser, ma fare qualche ricerca su altri strumenti che possono aiutare la stesura del rapporto.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Viene presentato un rapporto con i dettagli tratti non solo dagli strumenti del browser ma anche da strumenti di terze parti, se disponibili | Viene presentato un rapporto di base | Viene presentato un rapporto minimo |
|
||||
@@ -0,0 +1,9 @@
|
||||
# パフォーマンスのためにサイトを分析する
|
||||
|
||||
Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される |
|
||||
@@ -0,0 +1,9 @@
|
||||
# 사이트 성능 분석
|
||||
|
||||
웹 사이트에서 성능에 문제가 있는 영역을 보여주는 자세한 보고서를 만들어 봅시다. 사이트가 느린 이유와 속도를 높이기 위해 무엇을 할 수 있는지 분석해보세요. 브라우저 도구에만 의존하지 말고, 성능 분석을 위한 다른 도구들도 알아보세요.
|
||||
|
||||
## 평가 기준
|
||||
|
||||
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||
--- | --- | --- | ---
|
||||
| 브라우저 도구 뿐만 아니라 다른 도구에서 제공하는 세부 정보를 포함하여 보고서를 만든 경우 | 브라우저 도구를 사용하여 기본적인 보고서를 만든 경우 | 최소한의 보고서를 만든 경우
|
||||
@@ -0,0 +1,9 @@
|
||||
# Menganalisis laman web untuk prestasi
|
||||
|
||||
Berikan laporan terperinci dari laman web, menunjukkan kawasan di mana prestasi bermasalah. Analisis mengapa laman web ini perlahan dan apa yang anda boleh lakukan untuk mempercepatnya. Jangan hanya bergantung pada alat penyemak imbas, tetapi lakukan kajian mengenai alat lain yang dapat membantu laporan anda.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Laporan disajikan dengan perincian yang diambil bukan hanya dari alat penyemak imbas tetapi dari alat pihak ketiga jika ada | Laporan asas dibentangkan | Laporan minimum dibentangkan |
|
||||
@@ -0,0 +1,9 @@
|
||||
# Analyseer een site op prestaties
|
||||
|
||||
Geef een gedetailleerd rapport van een website, met de gebieden waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat u zou kunnen doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe wat onderzoek naar andere tools die u kunnen helpen bij uw rapportage.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Er wordt een rapport gepresenteerd met details die niet alleen uit browsertools zijn gehaald, maar ook uit tools van derden, indien beschikbaar | Er wordt een basisrapport gepresenteerd | Er wordt een minimaal rapport gepresenteerd |
|
||||
@@ -0,0 +1,9 @@
|
||||
# 分析网页的性能
|
||||
|
||||
提供一份详细的报告，指出某个网页上性能有问题的地方。分析这个网页变慢的原因并提供解决方案。不要只依赖于浏览器工具，可以做些研究，寻找更多能够帮到你的工具。
|
||||
|
||||
## 评价表
|
||||
|
||||
| 指标 | 优秀 | 良好 | 尚可进步 |
|
||||
| --- | ---- | ---- | ------- |
|
||||
| | 呈现了详细的报告，并从非浏览器的第三方工具中获取了信息 | 呈现了基本的报告 | 呈现了极简单的报告 |
|
||||
@@ -0,0 +1,9 @@
|
||||
# 分析網頁效能
|
||||
|
||||
請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ---------------------------------- | -------------- | ------------ |
|
||||
| | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 |
|
||||
Reference in New Issue
Block a user