web优化-样式表、脚本
为了避免白屏,应将样式表放在文档顶部的HEAD中。将样式表包含在文档中有两种方式:使用LINK标签和@improt规则。一个stryle块可以包含多个@import规则,但@import规则必须放在所有其他规则之前。@import规则会导致组件下载时的无序性。
“如果样式表仍在加载,构建呈现树就是一种浪费,因为在所有样式表加载并拆解完毕之前无需回执任何东西。否则,在其准备好之前显示内容会遇到Flash of Unstyled Content问题。”
对响应时间影响最大的是页面中组件的数量。http1.1规范,该规范建议浏览器从每个主机名并行的下载两个组件。如果一个web页面平均地将组件分别放在两个主机名下,整体响应时间将可以减少大约一半。前端工程师与其依赖用户来修改浏览器设置,不如简单地使用CNAME来将组件分别放在多个主机名中。
并行下载组件的优点是很明显的。然后,在下载脚本时并行下载实际上是被禁用的(即使使用了不同的主机名,浏览器也不会启动其他的下载。)其中一个一个原因是,脚本可能使用document.write来修改页面的内容,因此浏览器会等待,以确保页面能够恰当的布局。另一个原因是为了保证脚本能够按照正确的顺序执行。因为它们之间存在着依赖关系,不按顺序执行就会导致javascript错误。
混淆是可以应用在源代码的另外一种优化方式。和精简一样,它也会溢出注释和空白,同时它还会改写代码。最为改写的一部分,函数和变量的名字将被转换为更短的字符串,这时代码更加精炼,也更难阅读。精简工具可以使用jsmin。
以上内容摘抄于《高性能网站建设指南》