Web Render Tuning List

• 2019-Rendering on the Web: The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.

Rendering Mechanism | 渲染机制

• 2017-Pulling Back The Curtains on Your Stylesheets: My talk (and this post) will focus on the why by taking a deep dive into browser internals to see how our styles are parsed and rendered.

• 浏览器的工作原理：新式网络浏览器幕后揭秘

• 浅析渲染引擎与前端优化

• 浏览器工作原理

• 从输入 URL 到页面加载完成的过程中都发生了什么事情？

• CSDN-开发者应该知道的有关于网页渲染的事

• JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

• how-browsers-work

• the-rendering-process-of-a-web-page

• 2018-How browser rendering works — behind the scenes: The purpose of this article is to explain, in very simple terms, the steps your browser takes to convert HTML, CSS and JavaScript into a working website you can interact with.

Scripting | 脚本解析与执行

• 2019-The cost of JavaScript in 2019: In 2019, the dominant costs of processing scripts are now download and CPU execution time. User interaction can be delayed if the browser’s main thread is busy executing JavaScript, so optimizing bottlenecks with script execution time and network can be impactful.

• Planning for Performance

• Solving the Web Performance Crisis by Nolan Lawson

• JS Parse and Execution Time

• Measuring Javascript Parse and Load

• Unpacking the Black Box: Benchmarking JS Parsing and Execution on Mobile Devices

• slides)

• When everything’s important, nothing is!

• The truth about traditional JavaScript benchmarks

• Do Browsers Parse JavaScript On Every Page Load

• optimize-js

• lazy-parsing-in-javascript-engines

• Turn off negate_iife by default as it hurts V8 performance.

• Optimization killers: This document will contain advice to avoid writing code that will perform significantly worse than expected. Specifically those patterns that cause V8 (relevant to Node.JS, Opera, Chromium…) to refuse to optimize the affected function.

• 2017-Optimizing dynamic JavaScript with inline caches: This is an overview of an optimization technique I’ve been using in JSIL for a while, where you create and update polymorphic inline caches in your JavaScript code at runtime so that it can stay fast while adapting to unexpected changes.。( https://parg.co/b4a )

• 2017-Improved JavaScript performance, WebAssembly, and Shared Memory in Microsoft Edge

• 2012:writing-fast-memory-efficient-javascript

• 2016:efficient-javascript

• 2014-Refactoring your JavaScript code with Grasp: Grasp 这个小小的 JavaScript 的命令行重构工具让我们所有人印象深刻。它为抽象语法树提供了丰富的选择器和操作，比摆弄 sed 和 grep 要先进多了。这给我们正在进行的将 JavaScript 做为一等编程语言的运动添加了一个有用的新工具。

• 2016-Butternut : The fast, future-friendly minifier.

• 2017-Prepack : Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations.

Layout & Rendering: 界面布局与渲染策略

• 高性能 JavaScript 重排与重绘

• improving-your-css-with-parker

• 避免大规模、复杂的布局

• 一篇文章说清浏览器解析和 CSS(GPU )动画优化

• What forces layout / reflow: All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*.

Interaction & Animation | 交互与动画

CSS

• 2017-高性能动态 CSS 样式：本文是对 JSS 新近提供的函数式值的介绍，其与 React 内联样式以及其他 CSS 解决方案相比有数倍的性能提升。在 Web 开发中动态设置样式往往会触发页面的重渲染，而本文则是介绍了如何使用 CSSOM 的 API 来在元素渲染之前即完成样式的设置。

• fake-it-til-you-make-it-css

• You-Dont-Need-Javascript:一些纯粹的基于 CSS 的有趣的小实验

• CSS Protips:一些关于 CSS 的小建议