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

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

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

相关推荐

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    - 采用Web标准的优势包括更佳的访问性、兼容性、可维护性和搜索引擎优化等。 4. HTML5文档结构 - HTML5文档基本结构包括、和等标签,其中标签定义了文档的标题,是中必须的元素。 - 元素是HTML文档的基本单元,...

    WEB前端面试——常见CSS知识点

    WEB前端面试——常见CSS知识点 CSS是一种标记语言,用于描述网页的样式和布局。以下是常见的CSS知识点: 一、CSS盒子模型 CSS盒子模型分为标准盒模型(content-box)和怪异盒模型(border-box)。标准盒模型的...

    CSS——web静态页面设计

    八、CSS性能优化 1. 减少选择器复杂度,避免过多嵌套。 2. 使用外部样式表,提高缓存利用率。 3. 合理使用内联样式和!important。 4. 避免使用影响渲染的动画和过渡。 九、CSS新特性 CSS Grid、Flexbox、CSS ...

    构建高性能web站点 精选版

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    高性能网站建设指南.pdf

    - **使用外部JavaScript和CSS**:相比内联脚本和样式,外部文件可以被浏览器缓存,多次访问时可直接从缓存中加载,提高加载速度。 - **减少DNS查找**:DNS解析时间会增加首次加载时间,可以通过减少域名数量、预加载...

    前端 web素材 中级进阶 JavaScript 优化 css优化

    在前端开发领域,JavaScript 和 CSS 优化是提升网站性能、用户体验和搜索引擎排名的关键技术。中级进阶阶段,开发者需要深入理解这些技术的优化策略,以实现更高效、更流畅的网页应用。 首先,我们来探讨JavaScript...

    高性能网站建设指南.part1.rar

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    web常用的优化细节

    8. **JavaScript优化**:将脚本放在页面底部,避免阻塞DOM解析,使用异步加载或 defer 属性来控制脚本执行时机。 9. **Web安全**:防止SQL注入、XSS攻击和文件上传漏洞。对于SQL注入,应使用预编译语句或参数化查询...

    简单的css——simplecss

    **简单的CSS——SimpleCSS** CSS(层叠样式表)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。在网页设计中,CSS扮演着至关重要的角色,它允许我们将表现(样式)与内容(HTML结构)...

    HTML5及CSS3web前端开发技术习题答案解析.pdf

    - **数据存储和处理功能**:提供了离线应用、Web通信、本地存储等功能,支持`WebSQL`和`IndexedDB`等轻量级数据库。 - **获取地理位置信息**:通过`Geolocation API`可以直接获取用户的地理位置信息。 - **多线程...

    Web前端性能优化全攻略

    Web前端性能优化是提高网页加载速度和用户体验的关键因素。Yahoo! 的 Exceptional Performance team 提出了一系列不断更新的优化策略,从最初的13条发展到现在的34条,涵盖了多个角度,包括内容、服务器、Cookie、...

    js css 优化软件

    在IT行业中,优化JavaScript(js)和CSS(css)是提升网页性能的关键步骤。这两个文件类型对于网页的呈现和交互性至关重要,但未优化的代码可能会导致加载速度慢,影响用户体验。下面,我们将深入探讨js和css优化的...

    CSS网站布局实录-基于Web标准的网站设计指南(第2版)

    9. **优化与性能**:除了设计,书中还会涉及CSS性能优化,包括最小化CSS、避免阻塞渲染的关键CSS(Critical CSS)以及使用CSS Sprites和Icon Fonts来减少HTTP请求。 10. **实战案例**:书中包含丰富的实例和项目,...

    Web前端开发案例教程(HTML5+CSS3)(微课版)_PPT课件.zip

    《Web前端开发案例教程(HTML5+CSS3)(微课版)》是一份全面介绍Web前端开发技术的教育资料,特别关注HTML5和CSS3的应用。这份PPT课件旨在帮助初学者和有一定基础的学习者掌握现代网页设计与开发的核心技能。HTML5...

    Web程序设计的平时作业——Web经典项目,小白必看

    在"Web程序设计的平时作业——Web经典项目,小白必看"这个压缩包中,你可以找到一系列关于Web开发的基础知识和实践经验。这个作业项目旨在帮助初学者掌握Web开发的核心概念,通过实际操作来学习HTML(超文本标记语言...

    Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)

    ### Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript) #### 一、网站题目 此项目的主题围绕“美食”展开,旨在通过HTML、CSS与JavaScript技术创建一个展示各种美食及其相关信息的静态网站。...

    高效前端:Web高效编程与优化实践.pdf

    - CSS内联和外部引用:首屏内容可内联在HTML中,其余内容外部引用。 3. **JavaScript优化**: - 模块化:使用CommonJS、ES6模块或Webpack等工具管理代码。 - 代码压缩:使用UglifyJS或Terser进行JavaScript压缩...

    htmlcss多选题及答案,前端面试题含答案——HTML、CSS相关.docx

    HTML/CSS 相关知识点 ...本节我们详细介绍了 HTML 和 CSS 相关的知识点,包括 HTML 文档类型定义、块级元素和内联元素、HTML 文档结构、HTML 元素、CSS 简介、CSS 选择器、CSS 属性和 CSS 布局等。

Global site tag (gtag.js) - Google Analytics