|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/optimizing-web-performance-and-critical-rendering-path/
课程评论：没有评论
课程名称：优化网页性能与关键渲染路径 课程概述：网页性能是每个网络应用程序中非常重要的一个方面。网页应该尽可能快速地加载，并且动画应流畅无阻。用户对任何形式的运动都非常敏感，任何视觉变化（如滚动、悬停效果、打开侧边栏等）都需要浏览器渲染新的帧。当帧渲染耗时较长时，帧率会下降，进而对用户体验产生负面影响。低帧率会导致糟糕的用户体验，而这不仅仅体现在复杂的动画上，普通的页面滚动也可能出现问题。 本课程将讨论如何解决这些性能问题，重点并不在于JavaScript，而是在于CSS。很多开发者认为只要JavaScript运行良好，性能优化就没有其他需要做的。然而，CSS在性能优化方面常常被忽视，实际上在许多情况下，CSS可能是唯一的问题。CSS对网页的渲染影响也非常重要：CSS默认是阻止渲染的，浏览器在下载所有CSS之前不会开始渲染页面。因此，关键渲染路径中的延迟会使用户只能看到空白屏幕，这使得CSS在快速加载页面时显得尤为关键。解析CSS文件有时需要超过500毫秒，即使是从硬盘加载的单个CSS文件也会导致用户在解析过程完成前看到空白屏幕。 此外，优化网站性能也可能影响谷歌搜索结果排名算法。在这个课程中，我们将以新的视角分析和探讨CSS的重要性。
Performance is a very important aspect of every web application.Web page should be loaded as quickly as possible and the animation should flow smoothly.People are very sensitive to any kind of motion. For any kind of visual change on the screen, like scrolling, hover effect, opening the sidebar etc., the browser is going to render a new frame onto the screen. When rendering of the frame takes longer, the frame rate drops, and it negatively impacts the user experience.Low frame rate will create a poor user experience. For this to happen, there doesn't need to be some complex animation, it can happen with just a regular page scrolling!I am pretty sure that you already had experience with websites that have a low frame rate, which causes that "laggy" animation? You click on something, open the sidebar and the whole page is lagging. Or even worse, you might have noticed that you have a laggy experience when scrolling the web page. Scrolling doesn't seem like something you had to think about from the performance perspective, but you should. Therefore, in this course we will be talking about fixing the performance issues and so, you might expect that this course is about JavaScript…but surprisingly - it's not. This course is about CSS. A lot of developers think that as long as JavaScript runs well, there's nothing else left to do for the performance optimization. JavaScript has a great impact on the performance of the website, however CSS is unjustly neglectred in this area. In many situations CSS might be the only problem.There's another very important impact that CSS has on the webpage.CSS is render blocking (by default). The browser will not begin to render the page until all CSS has been downloaded. Any delays on the Critical Rendering Path will leave users looking at a blank screen. CSS is truly critical if you want to have a fast loading page. Sometimes, just to parse CSS file it takes more than 500ms. Just to parse, without network - just a single CSS loaded from a hard drive will cause users to see only a blank screen until the parsing process is finished.Optimizing the performance your website may also have an impact on the google search result ranking algorithm.In this course we will show you CSS in a new light.
