- Learning HTML5 by Creating Fun Games
- Rodrigo Silveira
- 312字
- 2021-08-13 17:00:57
A warning about performance
Something that is often overlooked in web design and front-end web development is performance. While today's major browsers make rendering HTML seem like a trivial task, there is actually a lot of work going on behind the scenes in order to turn a collection of HTML tags and CSS into a nice looking web page. What's more, as it becomes easier to add bells and whistles to a web page through rollover effects, drop down menus, and automatic slideshows, it is easy to forget about what the browser still needs to do to get that work done.
If you think about an HTML document as a tree structure, where each nested tag is like a branch in the structure, then it's easy to understand what a deep layout would look like compared to a shallow layout. In other words, the more nested tags you have, the deeper the structure.
With that said, always keep in mind that the slightest change in an HTML node (such as the physical size a text tag takes up on the page changing because a hover effect caused the text to become bold, thus taking a few extra pixels on the screen) may trigger what is called a reflow, which essentially will cause the browser to perform many calculations on each and every branch (tag) in your HTML structure, because it will need to recalculate where each element needs to go, so it can redraw the page properly.
The more shallow you can make your HTML structures, the less calculations the browser will need to make every time it needs to redraw the page, thus causing a smoother experience. While the argument that deeply nested <div>
tags cause HTML files to become harder to read and maintain can be subjective, there is no arguing that deep HTML structures perform much worse than flatter alternatives.
- MySQL數據庫管理實戰
- C/C++算法從菜鳥到達人
- Python程序設計(第3版)
- Blender 3D Incredible Machines
- Rust Essentials(Second Edition)
- Learning Three.js:The JavaScript 3D Library for WebGL
- Visual C#通用范例開發金典
- jQuery Mobile移動應用開發實戰(第3版)
- C語言程序設計與應用(第2版)
- QGIS 2 Cookbook
- Mapping with ArcGIS Pro
- Pandas入門與實戰應用:基于Python的數據分析與處理
- 陪孩子像搭積木一樣學編程:Python真好玩+Scratch趣味編程(全2冊)
- Implementing NetScaler VPX?(Second Edition)
- 區塊鏈原理、架構與應用(第2版)