前端优化分析 之 javascript引用位置优化

在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢

我通过firebug进行了下简单的分析

看下图


 本页面首尾都存在javascript代码

我们分析得出

1、整个页面文档家在结束才开始加载css和js以及其他的数据

2、当顶部的所有js都家在结束之后才可以加载页面中的图片

3、顶部的common.css和common.js几乎是同时开始加载

4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载

由此,我们可以分析出,至少在这个版本的firefox中

从http的角度看,整个document是使用的一个HTTP连接,并且必须将这个HTTP连接结束后才会创建新的连接。

css和js可以共用一个HTTP连接,他们不能和img图片使用同一个连接

css和js可以同时进行加载,但不能和图片同时加载。

从这里面可以得出的结论是

1、尽量减少整个document的大小和顶部css的大小,加快他们的加载,甚至在整个页面比较小的情况下可以将css放在底部。

2、javascript放在底部,这样就可以和图片几乎同时下载,让图片尽快的下载下来

前端优化分析 之 javascript引用位置优化

时间: 2024-08-02 13:08:41

前端优化分析 之 javascript引用位置优化的相关文章

Javascript常见性能优化

俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个心爱的宝贝都不能买,心里想这尼玛什么玩意. 那么如何让我们的网站给用户最佳的体验呢?大环境我们不说,什么网络啊,浏览器性能啊,这些我们无法改变,我们能改变的就是我们码农能创造的,那就是代码的性能.代码精简,执行速度快,嵌套层数少等等都是我们可以着手优化注意

[转]JavaScript 的性能优化:加载和执行

原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化:加载和执行 蔡 愉晟, 软件工程师, IBM 简介: 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就

【转】js JavaScript 的性能优化:加载和执行

JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详

javascript之DOM优化

DOM访问和操作是现代网页应用中很重要的一部分.但每次你通过“桥梁”从ECMAScript到DOM时,都会被收取“过路费”.为减少DOM编程中的性能损失,具体要注意的有: 一.最小化DOM访问,在javascript端做尽可能多的事. Js代码   function innerHTMLLoop() { for (var count = 0; count < 15000; count++) { document.getElementById('here').innerHTML += 'a'; }

MYSQL 分析表、检查表和优化表

1. 对表进行优化 ( 优化表主要作用是消除删除或者更新造成的空间浪费) 2. 对表进行分析(分析关键字的分布, 分析并存储MyISAM和BDB表中键的分布) 3. 对表进行检查(检查表的错误,并且为MyISAM更新键的统计内容) 4. 对表进行修复(修复被破坏的MyISAM表)   1.分析表   MySQL中使用ANALYZE TABLE语句来分析表,该语句的基本语法如下:   ANALYZE TABLE 表名1 [,表名2…] ; 使用ANALYZE TABLE分析表的过程中,数据库系统会

javascript的性能优化tips

谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for循环等等等. 1.从加载开始 在浏览器中,js文件的执行和下载会阻塞css和dom的渲染,这是浏览器的单线程所致,后来chrome,ff等浏览器启用了js文件的并行下载,然而js文件的运行还是会被阻塞,有的浏览器支持defer关键字. <script type="text/javascript

前端高性能滚动 scroll 及页面渲染优化

前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看

Mysql 索引优化分析

MySQL索引优化分析 为什么你写的sql查询慢?为什么你建的索引常失效?通过本章内容,你将学会MySQL性能下降的原因,索引的简介,索引创建的原则,explain命令的使用,以及explain输出字段的意义.助你了解索引,分析索引,使用索引,从而写出更高性能的sql语句.还在等啥子?撸起袖子就是干! 案例分析 我们先简单了解一下非关系型数据库和关系型数据库的区别. MongoDB是NoSQL中的一种.NoSQL的全称是Not only SQL,非关系型数据库.它的特点是性能高,扩张性强,模式灵

mySql索引优化分析

MySQL索引优化分析 为什么你写的sql查询慢?为什么你建的索引常失效?通过本章内容,你将学会MySQL性能下降的原因,索引的简介,索引创建的原则,explain命令的使用,以及explain输出字段的意义.助你了解索引,分析索引,使用索引,从而写出更高性能的sql语句.还在等啥子?撸起袖子就是干! 案例分析 我们先简单了解一下非关系型数据库和关系型数据库的区别.MongoDB是NoSQL中的一种.NoSQL的全称是Not only SQL,非关系型数据库.它的特点是性能高,扩张性强,模式灵活