`
jobar
  • 浏览: 351060 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高性能web网站优化原则8——脚本和css放在外部引用,避免内联

 
阅读更多
将脚本或css放页面里面叫做内联,将脚本放一个单独的文件里,在页面通过链接引用叫做外部引用。
相比外部引用,内联方式,在页面下载的时候,脚本和css都一起下载了,减少了http请求次数,然而增加了页面的大小,增加了网络负载
采用外部引用的方式,页面的下载和css或者js的下载可以并行执行,这可以减少页面的大小,但增加了http请求数。浏览器可以缓存js或者css文件,用户再次访问时候,可以直接从缓存里面读取。特别是当脚本或css很大的时候,对网站性能的优化是比较明显的。
另外其他页面也可以复用js和css文件,当用户在页面之间跳转的时候,浏览器可以直接从缓存里面获取js或者css文件。并且外部引用的方式对js或者css文件的可维护性和可读性也比较好
当css或者js比较小或者专属于某个页面,并不经常访问的情况下,还是建议采用内联的方式。
分享到:
评论

相关推荐

    javascript面试题

    **13、在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?** - 浏览器缓存:本地缓存、服务端缓存。 - CDN 缓存:减少服务器压力。 - HTTP 协议...

    web-index:静态资源

    在IT行业中,Web开发是至关重要的领域,而“web-index:静态资源”这一主题则聚焦于网站前端的基础构建块——静态资源。静态资源通常是指不依赖服务器动态生成,而是预先制作好并直接发送给用户的文件,如HTML、CSS、...

    JavaScript Programmer's Reference - Alexei White

    - **附录G**:网络资源——收集了与JavaScript相关的外部链接和参考资料。 通过以上章节的详细介绍可以看出,《JavaScript Programmer's Reference》几乎覆盖了JavaScript开发中所需的所有知识点,无论是初学者还是...

    Aggrbion:变得更强计划

    5. **外部链接**:将大的CSS和JavaScript文件放在外部,而不是内联在HTML中,以减少页面大小。 6. **减少HTTP请求**:合并文件、使用CDN(内容分发网络)和缓存策略,以减少网络延迟。 7. **利用HTML5新特性**:如...

    php程序员菜鸟成长手记 php入门教程 pdf

    - **JavaScript执行**:执行内联或外部引用的JavaScript脚本,实现页面交互。 **2. HTML工作原理** HTML(HyperText Markup Language)是用于创建网页的标准标记语言。通过使用各种标签来定义文档的结构和内容。 ...

    wienthtet.github.io:GitHub页面

    JAMstack(JavaScript, APIs, Markup)是一种现代的Web开发架构,强调使用预渲染的静态HTML,结合APIs和客户端JavaScript提供高性能的用户体验。 通过这些知识点,我们可以推断“wienthtet.github.io”是一个基于...

Global site tag (gtag.js) - Google Analytics