当前位置: 海之晶网站设计> 建站知识> 建站教程>避免自动内联代码的缺陷

避免自动内联代码的缺陷

文章出处:网站建设-海之晶网络 | 网站编辑:网站设计 | 发表时间:2020/9/16 16:19:14
分享:

内联是将文件内容直接包含在HTML文档中的过程:CSS文件可以内联到style元素中,JavaScript文件可以内联到script元素中:

通过打印HTML输出中已经存在的代码,内联可以避免呈现阻塞请求,并在呈现页面之前执行代码。因此,它有助于提高站点的感知性能(即页面可用所需的时间)。例如,我们可以使用加载站点时立即交付的数据缓冲区(约14kb)来内联关键样式,包括折叠内容上方的样式(如之前的Smashing Magazine网站上所做的),字体大小和版面宽度和高度,以避免在交付其他数据时出现跳跃式的版面重新渲染。

但是,当过度渲染时,内联代码也会对站点的性能产生负面影响:因为代码不可缓存,相同的内容会反复发送到客户端,并且不能通过服务工作人员预缓存,也不能从内容交付网络进行缓存和访问。此外,在实现内容安全策略(CSP)时,内联脚本被认为是不安全的。然后,将CSS和JS的关键部分进行内联是一个明智的策略,这些部分使站点加载更快,但在其他方面尽可能避免。

为了避免内联,本文将探讨如何将内联代码转换为静态资产:我们不必在HTML输出中打印代码,而是将其保存到磁盘上(有效地创建静态文件)并添加相应的<;script>;或<;link>;标记来加载文件

关键字:
南京市汉中路1号国际金融中心9楼
建站热线:13815417591
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。