I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a different value. Here is the structure of my HTML file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/divtest.js"></script>
<link rel="stylesheet" type="text/css" href="css/divtest1.css"/>
<title>TEST</title>
</head>
<body>
<div id="canvas">
hello
</div>
<div id="msg">
</div>
</body>
JavaScript file:
$(function(){
var margin;
margin=$('#canvas').offset().left;
$('#msg').html(margin);
});
CSS file:
*{
margin:0px;
padding:0px;
}
#canvas{
margin-left:200px;
background-color:red;
width:300px;
height:300px;
}
You can view the test page at
The layout appears correct on all browsers, but there are variations in the values returned by offset().left. In IE and Firefox, it shows 200, while in Chrome, it displays 8. The version of Chrome being used is 41.0.2272.118m. After asking friends to check, they encountered the same issue. However, changing the order of CSS and JS resolved the discrepancies, with all browsers returning 200. It seems like the $(function(){}) behavior in Chrome may not be as expected. Did I misunderstand something? Is it advisable to avoid placing JS before CSS? Thank you!