web page performance

整个web页面优化,涉及了传输,运行,渲染中的每个步骤。

自然每一步都有优化的可能性。

本质上使用的方法还是很朴素:

缓存(时、空局部性)
批量并发

类似方法在CPU的指令运行(cache,pipeline),网络协议栈(累积发送)中都大量存在。
甚至公司、团体的组织运行 ,供应链的运行,都蕴含着相同的原理。所谓大道至简吧。

客观业务的多样性,导致这些方法在实际应用的过程中复杂多变。做起来有难度,有经济价值。
可从技术上,并没什么新意。

webpage的灵活性注定了它相对原生应用的低效。无论从传输代价或运行、渲染代价方面考量。

原生会有更高的执行效率,更少传输代价。可却没有了webpage的广泛适应性。例如各类大型联机游戏。

舍与得的动态平衡。

webpage这个臃肿的流程中,人们一直在尝试想出各种方法优化,更快的执行,更少的传输。

TCP太慢,换QUIC,UDP更小更快(网络)
React等框架不断优化DOM等操作以提升layout,repaint效率(排版算法)
客户端、服务器缓存
V8优化(虚拟机)
webassembly
更好的视频,图片压缩格式
webpack去除无用代码(编译原理)
分块加载,延迟加载,缓存
.
.
.

魔鬼在细节中,这些优化都不简单,原理也不是那么容易。

可就像搬砖垒墙一样,要耗费不少人力,有价值,有必要,可真无聊。
可在当下的人类生产力水平看来,这还是蛮有技术工作...

整个流程最大的麻烦就是没有边缘。也没办法,现实世界的复杂度决定的。
任何问题的思考,都需要有个抽象的边缘。否则层层嵌套,代价较大。

例如学习js,不是从js的层面了解即可。为了很好的利用这个语言,你需要学习虚拟机的实现,
编译原理,甚至CPU的体系结构等才能更好的使用它。这就是典型的没有抽象边缘。自然也可以不学这些,
可了解这些的人通常能写出更高效的程序,通常意味着更好的体验,更少的代价---更多的利益。有利益的
驱使...

再如webpage的渲染,涉及到复杂的排版算法,虽然不用大家完全了解,可还是要大致知道些,未知导致
恐惧,滋生玄学。这样写效率就高...

不过当下没有一门语言可以只学它的规则, 不用学习它的实现,就能用起来非常高效。理想总是那么遥远。

这种抽象边缘的缺失,导致真正想学好一门语言代价巨大,可从本质原理上又没有什么新奇的技术。
只是1+1换成了0+2

生命就在这种重复的内耗中流失(前进是螺旋的,迂回的...),也是生在这个生产力低下的时代的悲哀。
不过相比以前,现在好多了.

整体大致流程

传输资源: 代码,图片等

少传
缓存
压缩
优先传,延迟传

运行代码

更少的代码
更好的利用V8的优化功能

计算页面布局

CSS更新
内容更新
批量更新
读写分离
60FPS

绘制

batch

Loading Performance
    Optimizing Content Efficiency
        Eliminating Unnecessary Downloads
        Optimizing Encoding and Transfer Size of Text-based Assets
        Image Optimization
        Automating Image Optimization
        Replace Animated GIFs with Video
        JavaScript Start-up Optimization
        Loading Third-Party JavaScript
        Web Font Optimization
        HTTP Caching
        Adapting to Users with Client Hints
        Delivering Fast and Light Applications with Save-Data

    Optimizing JavaScript
        Reduce JavaScript Payloads with Tree Shaking
        Reduce JavaScript Payloads with Code Splitting

    Never Load the Same Resource Twice
        Offline Cookbook
        Web Storage
            Offline Storage for Progressive Web Apps
            Using the Cache API
            IndexedDB Best Practices
        Offline UX Considerations

    Lazy Loading Resources
        Images and Video

    Order Loading Thoughtfully
        Critical Rendering Path
            Constructing the Object Model
            Render-Tree Construction  Layout  and Paint
            Render-Blocking CSS
            Adding Interactivity with JavaScript
            Measuring the Critical Rendering Path
            Analyzing Critical Rendering Path Performance
            Optimizing the Critical Rendering Path
            PageSpeed Rules and Recommendations
        Introduction to HTTP2

    PRPL Pattern
        Push (or preload) the most important resources.
        Render the initial route as soon as possible.
        Pre-cache remaining assets.
        Lazy load other routes and non-critical assets.

    Resource Prioritization

    Web Performance Optimization with webpack
        Decrease Front-end Size
        Make Use of Long-term Caching
        Monitor and analyze the app

Rendering Performance
    Optimizing JavaScript Execution
    Reduce the Scope and Complexity of Style Calculations
    Avoid Large Complex Layouts and Layout Thrashing
    Simplify Paint Complexity and Reduce Paint Areas
    Stick to Compositor-Only Properties and Manage Layer Count
    Debounce Your Input Handlers

https://developers.google.cn/web/fundamentals/performance/get-started

原文地址:https://www.cnblogs.com/Searchor/p/13936814.html