Web 优化——正确放置CSS和Javascript,减少页面渲染时间

阅前悉知:

  • 其一、本文是《Web 优化》系列的第二篇。该系列是我查阅了大量资料总结而来的。其中可能存在不足之处。希望大家在阅读时,抱着质疑的态度去阅读

  • 其二、因为本文内容是承接本系列的第一篇文章所讲内容。所以阅读本文前,希望各位优先看下第一篇:《Web 优化——简述访问某个网址浏览器背后所做的工作》。有第一篇的基础,可以比较好的进行理解。

  • 其三、本文将从CSS和JavaScript两者出发,讲述如何减少页面渲染时间。


本系列其他文章:
Web 优化——浏览器访问某个网址背后所做的工作
Web 优化——资源加载优化

前言

在《Web 优化——简述访问某个网址浏览器背后所做的工作》一文中了解到浏览器渲染页面的工作原理:

浏览器会解析HTML文件以及CSS文件生成DOM TreeCSS Rule Tree,两者结合生成Rendering(渲染) Tree。接着执行布局过程(layoutreflow),确定每个节点在屏幕上的确切坐标。最后调用操作系统Native GUI的API,paint(绘制)Rendering(渲染) Tree每个节点。

这个过程有两个特点:

  • 其一,如果渲染过程中(包括刚刚渲染完时),加载解析CSS,会引发Reflow(回流)与 Repaint(重绘)

  • 其二,如果浏览器加载到

你可能感兴趣的:(Web,优化)