css 与 javascript 摆放顺序 - { focus : web } - ITeye博客

`

yiminghe

浏览: 1466714 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

luhouxiang：写的很不错，学习了
Extjs 模块化动态加载js实践
kingkongtown：如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
kissy editor 阶段体会
317966578：兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端
liuweihug： Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题
辽主临轩：怎么能让浏览器不进入文档模式的quirks模式，进入标准的
浏览器模式与文本模式

css 与 javascript 摆放顺序

博客分类：

xhtml / css

CSS JavaScript 脚本 HTML 浏览器

阅读更多

根据 yahoo 的性能调优建议 , css 放在头部，javascript放在尾部，可是由于其他一些原因，如遗留代码等，往往javascript和css都放在头部。

示例：

<html>
<head>
    <link rel="stylesheet" type='text/css' href="w3c/layout.css" />
    <script type="text/javascript">
          //some time consuming operations
    </script>
</head>
<body>
      <!--  big pictures -->
      <img src="big.jpg" />
</body>
</html>

那么根据Even fast websits的实验，big.jpg的下载得等到脚本执行完毕才开始，不能和layout.css并行下载。

根据他的建议改作

改进示例:

<html>
<head>
    <script type="text/javascript">
          //some time consuming operations
    </script>
    <link rel="stylesheet" type='text/css' href="w3c/layout.css" />
</head>
<body>
      <!--  big pictures -->
      <img src="big.jpg" />
</body>
</html>

即可实现 big.jpg和 layout.css 的并行下载了。

总结一下原因:

头部css后的脚本阻止了后续资源的并行下载，根本原因还是浏览器害怕脚本有document.writeln的操作，很多网站都有这个问题，注意啦。脚本放在头部时，请放在css的前面

分享到：

初探淘宝查询的方便功能 | 如何成为一名优秀的软件工程师

2009-09-07 17:31
浏览 1977
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

详解关于html，css，js三者的加载顺序问题: 总结一下，HTML、CSS和JavaScript的加载顺序问题对于提高网页性能至关重要。合理的加载顺序和资源管理策略可以大大提升用户体验。在实践中，开发者应该根据具体情况和资源的依赖关系选择合适的解决方案，以确保网页...

JavaScript+css实现拖拽效果: 本文将详细讲解如何使用JavaScript和CSS来实现这一效果，以创建一个可拖拽的元素并处理其在页面上的位置。首先，我们需要理解JavaScript在拖放功能中的角色。JavaScript提供了`dragstart`、`drag`、`dragend`以及`...

韩顺平html+css+js之javascript笔记: - **语法结构**：尽管JavaScript拥有类似于Java的语法结构，如变量、函数以及控制语句（顺序、分支、循环），但它们在执行方式上有着本质的不同——Java需要经过编译成字节码，再由JVM执行；而JavaScript则是直接由...

CSS那些事儿：掌握网页样式与CSS布局核心技术: 同时，CSS模块化方案如CSS Modules和CSS-in-JS也逐渐流行，它们将CSS与JavaScript紧密结合，增强了代码复用和组件化开发。最后，CSS性能优化也是不可忽视的一环。减少HTTP请求、合理使用CSS选择器、避免使用通配符...

HTML5及CSS3web前端开发技术习题答案解析.pdf: - **`dropzone`**：定义当被拖动的项目/数据被放置到该元素时发生的行为。 - **`hidden`**：指定元素是否被隐藏。 - **`id`**：定义元素的唯一标识符。 - **`lang`**：定义元素内容的语言。 - **`spellcheck`**：...

css 经典成功案例: 8. **CSS-in-JS**：这是一种将CSS样式写入JavaScript中的新兴趋势，如styled-components和emotion。这种方法的优点在于样式和组件可以更紧密地绑定，提供更好的封装和主题化支持。 9. **浏览器兼容性**：尽管CSS有...

CSS 的加载及加载顺序简介: CSS的加载与加载顺序是前端开发中的重要话题，因为它直接影响到网页的渲染速度和用户体验。首先，我们了解一个基本的加载原则：CSS样式通常被放置在HTML文档的部分，以便在页面开始渲染时能立即应用样式，避免出现...

HTML和CSS和JavaScriptFromQu: 它通过一系列标签来描述...这些章节按照学习顺序排列，旨在逐步引导初学者掌握HTML、CSS和JavaScript的基本技能，最终能够独立创建具有交互性的网页。通过实践这些示例，可以加深对网页开发的理解，提升实际操作能力。

html延迟加载JS和CSS: 通常，JavaScript脚本如果放置在`<head>`标签内，会阻塞页面的渲染，直到脚本加载并执行完毕。为了改善这种情况，我们可以将脚本放在页面底部（`<body>`标签的末尾），或者使用`async`或`defer`属性来实现异步加载或...

011韩顺平轻松搞定网页设计(html+css+js)之javascript现场授课笔: #### 三、JavaScript代码的放置位置在HTML文档中，JavaScript代码可以通过以下几种方式嵌入： - 将代码放在`<script>`标签内部，位于`<head>`标签内。 - 将代码放在`<script>`标签内部，位于`<body>`标签内。 - ...

Html+javascript教程: 接下来的章节将会深入探讨CSS和DOM操作，以及如何将JavaScript与HTML元素相互作用，实现动态效果和用户交互。CSS用于控制网页的样式，DOM（Document Object Model）是HTML和XML文档的结构化表示，JavaScript可以借助...

HTML5 CSS3编码规范: 此外，文件的引入位置也有讲究，通常推荐将所有的CSS文件放在文档的部分，而将JavaScript文件放置在标签的底部，这可以保证在页面渲染时不会因为执行脚本而阻塞内容的加载。对于HTML标签的使用，应当尽量减少标签...

【第八章】JavaScript【Script标签与访问HTML页面(2)】: JavaScript是一种广泛用于Web开发的脚本语言，它允许动态内容的创建，提升用户体验，并与用户进行交互。在HTML文档中，`<script>`标签是引入和执行JavaScript代码的关键。 1. `<script>`标签的使用： - 内联方式：...

前端项目-css-layout.zip: JavaScript版本的Flexbox布局可能包含计算每个子元素的大小、顺序和对齐方式的算法。 3. **Grid布局**：提供二维布局，使得在行和列中放置元素变得更加简单。JavaScript实现可能包括创建和管理行和列的逻辑，以及...

2011韩顺平轻松搞定网页设计(html+css+js)之javascript现场授课笔记(完整版).doc: 然而，JavaScript代码不仅可以放在`<head>`标签中，还可以放在`<body>`或其他适当的位置，浏览器会按照遇到的顺序依次执行。 JavaScript具有以下特性： 1. **解释型语言**：与Java等编译型语言不同，JavaScript代码...

css 3布局与技术外国大牛写的: ### CSS3布局与技术知识点详解 #### 一、前言《ProCSS3Layout Techniques》是一本由国外知名作者Sam Hampton-Smith编写的关于CSS3布局技术的专业书籍。本书旨在帮助读者深入了解并掌握CSS3的强大功能，以便能够...

网页 Demo，div+css: `div`可以作为布局的基本构建块，通过CSS调整它们的大小、位置和顺序，从而实现各种视觉效果。此外，压缩包内的子文件可能包含了HTML文件（展示`div`元素的结构）、CSS文件（定义样式规则）和可能的JavaScript文件...

CSS中文手册必备: 1. **定位**：CSS提供了多种定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed），以实现元素在页面上的精确放置。 2. **流体布局**：通过百分比宽度和自动填充（auto...

HTML5+CSS3实现图片可倾斜摆放的动画相册效果源码: 本项目"HTML5+CSS3实现图片可倾斜摆放的动画相册效果源码"就是利用这两者的优势，创造了一种创新的图片展示方式。首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，旨在提高网页的语义性和可...

Global site tag (gtag.js) - Google Analytics