浏览器渲染，处理html，js,css的顺序

最新推荐文章于 2025-05-28 23:39:14 发布

class FW

最新推荐文章于 2025-05-28 23:39:14 发布

阅读量1.5k

点赞数 1

文章标签： javascript执行顺序 DOMContentLoaded KindEditor.js

本文链接：https://blog.youkuaiyun.com/qq_37172890/article/details/96866384

版权

本文探讨了JavaScript放置在HTML文档的不同位置（如head与body）对DOM操作的影响，并对比了DOMContentLoaded与$(document).ready()的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js在body和head中的区别

这么理解吧，你可以认为浏览器以异步方式解析渲染两部分：

一行一行顺序解释html，js，js操作的css – (DOM)
解释无关css --（CSSDOM）

所以js放在head中一般无法立刻操作body中元素，因为当时没有，head中代码在body中代码前解释，仅此区别，js放在body后仅仅是为了用户体验可以先看到html，不用等js执行完毕，具体可以看看浏览器的渲染。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="/iay/js/jquery-1.8.3.min.js"></script>
<!-- <script charset="utf-8" src="/iay/js/tmp/kindeditor-all.js"></script>
<script charset="utf-8" src="/iay/js/tmp/lang/zh-CN.js"></script> -->
<script>
    // while(2>1){};
    console.log(1);
    console.log($("#news_content").val());
</script>
</head>

<body>
    <script>
        console.log(2);
        console.log($("#news_content").val());
    </script>
    <textarea id="news_content" class="save_class" name="news_content" style="width:580px;height:280px">abcd</textarea>
    <script>
        console.log(3);
        console.log($("#news_content").val());
    </script>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded',function(){
    console.log(7);
    console.log($("#news_content").val());
});
// while(2>1){};
console.log(4);
console.log($("#news_content").val());
$(document).ready(function(){
    console.log(6);
    console.log($("#news_content").val());
});
console.log(5);
console.log($("#news_content").val());
</script>

DOMContentLoaded和$(document).ready()区别

你以为两个都是等待dom渲染完毕执行的代码，完全没区别吗？
实际上好像并不是：

上面代码输出显示$(document).ready()先执行.
ajax获取的部分html代码（准备嵌入原页面，无head和body标签），$(document).ready()可以正常执行，DOMContentLoaded内的触发代码却不会执行。

kindeditor.js踩的坑

前提:代码通过ajax获取一个整合div然后嵌入到html中。
根据官方文档，无效果，然后就开始踩坑了。

KindEditor.ready(function(K) {
        window.editor = K.create('#new_content');
 });

一开始认为js在head中和body中有不同表现，实际上并不是。
然后对着官方文档查看源码,（js语法操作一个函数对象真的有点难受，虽然java反射也可以获取函数属性，但至少不会是自定义的键值对属性），渲染div代码绑定到DOMContentLoaded触发事件了，然而我这没head，没body的div并不触发。
实际直接create就可以了，jquery虽然现在好像被吐槽挺多的，但是确实比原生js方便太多

$(document).ready(function(){
	KindEditor.create('#news_content');
});

kindeditor.js放在body中css加载地址变成访问地址作为当前地址了，放在head标签中当前js地址作为当前地址

货真价实的后端程序员

这篇文章写的挺乱的，凑合着看吧