Articles on Smashing Magazine — For Web Designers And Developers
·
何时可以“阻塞”主线程
内容提要
在现代网页开发中，虽然通常建议避免阻塞主线程，但在某些情况下可以打破这一规则。作者在开发截图扩展时发现，将任务移至后台反而导致延迟。直接在主线程处理图像可以避免多次序列化和传输的开销。关键在于判断任务是计算密集型还是数据密集型，以决定是否隔离处理。
关键要点
-
在现代网页开发中，通常建议避免阻塞主线程，但在某些情况下可以打破这一规则。
-
作者在开发截图扩展时发现，将任务移至后台反而导致延迟，直接在主线程处理图像可以避免多次序列化和传输的开销。
-
关键在于判断任务是计算密集型还是数据密集型，以决定是否隔离处理。
-
浏览器的主线程是单线程的，处理JavaScript逻辑和用户交互，而Web Workers和Service Workers则用于处理重数据任务。
-
Structured Clone Algorithm（SCA）在数据传输中可能导致延迟，尤其是处理大数据时。
-
Transferable objects可以绕过SCA，提供更快的数据传输，但在某些情况下并不适用。
-
在处理图像时，作者发现将任务放在主线程上可以减少延迟，尤其是在用户需要快速反馈的情况下。
-
任务的处理效率取决于计算成本和数据传输成本，开发者需要根据具体情况决定是否隔离任务。
延伸解读
主线程阻塞的适用场景
在网页开发中，虽然通常建议避免阻塞主线程，但在某些情况下，直接在主线程处理任务可能更有效。特别是在处理图像等数据密集型任务时，避免多次序列化和传输可以显著减少延迟。开发者应根据任务的特性灵活选择处理方式。
数据传输的成本考量
使用Structured Clone Algorithm进行数据传输时，尤其是处理大数据时，可能会导致显著的延迟。开发者需要评估数据传输的成本与处理成本，选择合适的处理方式，以提高应用的响应速度。
Transferable Objects的局限性
虽然Transferable objects可以提高数据传输速度，但并非所有数据都可以转移，且一旦转移后，发送方将失去对数据的访问权。在某些情况下，尤其是浏览器扩展中，仍需依赖传统的JSON序列化，这可能影响性能。
延伸问答
在什么情况下可以考虑阻塞主线程？
在处理图像等需要快速反馈的任务时，可以考虑直接在主线程上处理，以避免数据传输的延迟。
为什么通常建议避免阻塞主线程？
因为主线程是单线程的，阻塞会影响用户交互和应用的响应速度。
什么是结构化克隆算法（SCA），它有什么缺点？
结构化克隆算法用于数据传输，但在处理大数据时会导致延迟，因为它是一个同步阻塞操作。
可转移对象（Transferable objects）有什么优势和限制？
可转移对象可以绕过结构化克隆算法，提供更快的数据传输，但一旦发送后，发送方将失去对数据的访问。
如何判断任务是计算密集型还是数据密集型？
可以通过测量任务的处理时间和数据传输成本来判断，计算密集型任务主要耗时在计算上，而数据密集型任务则在数据传输上耗时较多。
在开发截图扩展时遇到了什么性能问题？
在开发截图扩展时，使用后台处理导致了2到3秒的延迟，直接在主线程处理图像更有效。
