• 查看 1,583 次, 回复 0
  • 关于小蜜蜂云系统创建的网站使用内嵌样式表的问题说明
    5年前 (2019/01/29 12:02)
  • 举报
    加载中…
  • 首先了解下浏览器从发起请求到看到网页的过程浏览器的内核渲染大致过程!

    1):客户发起请求  

    2):服务器获得相应并返回Document文档。

    3):浏览器分析头部的内容。

    4):当出现外部样式表引用的时候

    5):分析样式表是采用同步方式引用外部样式表,还是采用异步外部引用样式表。

    6):如果是同步引用样式表,浏览器内核将请求外部样式表,等待返回样式表数据在解析Document文档呈现在页面上。

    7):如果是异步那么内核将发起请求外部样式表,同时直接呈现Document文档,当样式表数据返回后再渲染Document文档。


    从上面的内核渲染Document文档的过程我们可以看出,当采用外联样式的方式,如果使用同步的方式,那么用户想要看到渲染后的Document文档就需要等待再一次发起的样式表请求返回。

    以我们的美国硅谷服务器为例:中国到美国一次请求到响应最低网络延迟为350ms左右(不计算应用程序对样式表的处理时间)。如果外链同步样式表,用户至少需要额外多等待至少350ms的时间才能查看到你的网页。很不利于客户的友好访问。


    如果我们采用异步的方式:可以解决用户不用等待350ms的时间直接查看Document文档,但是确是还没被样式表渲染过后的效果(无样式表效果),只有当异步样式表返回后才能看到正常效果。同样很不利于客户的友好访问


    因此不管是采用同步方式引用外部样式表,还是异步方式引用外部样式表都将对客户的访问产生很不友好的情况。


    小蜜蜂云系统因此采用内嵌样式表的方式:虽然 Document 文档会增大,但是我们服务器采用GZIP压缩,同时使用大吞吐的高并发服务器群集负载均衡作为WEB数据输出。因此我们可以加快网站的访问速度!


    一下是Google性能测速报告!


    同时Google站长工具发布的 2018-07 网页性能评估报告中也明确建议使用内嵌样式表。网站访问的速度将是Google  SEO 好坏的一个重要指标

    https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html


    JS脚本也是同样的原理






  • 签名:
  • 天意如刀,天刀斩天骄