开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JS需要放在</body>之前，但我只能将其添加到头部

在网页开发中，通常将JavaScript（JS）代码放在</body>标签之前是为了优化页面加载速度和用户体验。这是因为浏览器在加载网页时是按照从上到下的顺序解析HTML文档的，当浏览器遇到<script>标签时，会立即停止解析HTML，然后下载并执行JavaScript代码，完成后再继续解析HTML。如果将JS代码放在头部，那么在浏览器下载和执行JS代码期间，用户将看到一个空白页面，这会给用户带来不好的体验。

然而，有时候我们可能只能将JS代码添加到头部。这可能是因为网站的设计或技术要求，或者是由于特定的功能需求。在这种情况下，我们可以通过以下方法来解决问题：

异步加载：可以使用async或defer属性来异步加载JS文件。async属性表示脚本在下载时不会阻塞页面的解析，而defer属性表示脚本会在页面解析完毕后再执行。这样可以确保页面的加载不会被JS代码阻塞，提高用户体验。
DOMContentLoaded事件：可以将JS代码放在<head>标签中，并使用DOMContentLoaded事件来确保JS代码在页面加载完毕后再执行。这样可以避免JS代码影响页面的加载速度。
动态加载：可以使用JavaScript动态创建<script>标签，并将其插入到<body>标签中的合适位置。这样可以在页面加载完毕后再加载JS代码，避免影响页面的加载速度。

需要注意的是，将JS代码放在头部可能会导致一些问题，例如阻塞页面的加载、影响用户体验、影响SEO等。因此，尽量将JS代码放在</body>标签之前，以提高页面加载速度和用户体验。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供弹性计算能力，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云函数（SCF）：无需管理服务器，按需运行代码，实现弹性扩缩容。详情请参考：https://cloud.tencent.com/product/scf
云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等各种文件的存储和管理。详情请参考：https://cloud.tencent.com/product/cos
人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

网页内容加速黑科技趣谈

数周前，在伦敦 Heathrow 机场等飞机的空闲中，我顺便处理了一些工作上的事情。不经意间发现 Github 在性能方面的一些问题，颇为诧异。通过新 tab 打开的页面，其加载速度竟然比直接点击链接打开的页面要快。不信请看视频（译者注：可能需要科学上网）：GitHub link click vs new tab。

01

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）

01

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）

03

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）

02

最新FL Studio 21中文版即将发布，2023年会有哪些新功能呢？

FL Studio已经是音乐制作的旗舰之一，但我们相信随着FL Studio 21的即将发布，Image Line可以将其提升到一个新的水平。

01

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。

02

如何在Nuxt应用程序中加载外部脚本

我需要加载一个样式表和几个脚本。我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。

01

十分钟快速实战Three.js

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。

02

优化你的z-blog代码提高页面加载速度

不知不觉z-blog已经用了三年了，从开始的懵懂到现在的略加熟悉，感觉有必要写篇文章来为广大ZBlogger提一些建议，使用z-blog是否觉得页面访问速度慢？加载慢的情况？今天就为大家来分析一下你的z-blog访问慢的原因，并通过优化一些代码以达到提高页面加载速度的目的，按照以下的方法做一些改变，你会发现博客访问速度明显提高了。

01

three.js 新手指南

在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js，创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。

02

基于Vue.js的大型报告页项目实现过程及问题总结（二）

距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也算对这个项目的一个总结了遇到最大问题: 项目的需求是在一个窗口里生成所有图表,还要考虑到整套打印,所以滚动加载和分页浏览不是最好的方案,这导致数据超级多的时候(大概会生成2000多页的报告且上不封顶),会造成页面假死,疯狂占用电脑内存,低配置的电脑根本无法加载,甚至造成死机在项目结构上我们采用数据分发的方式控制组件的渲染,由大致小每层组件都对数据

十分钟快速实战Three.js

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。学习

04

PWA 入门

渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。

02

一篇文章带你搞定JavaScript 性能调优

JavaScript 是单线程运行的，所以在在执行效率上并不是很高，随着用户体验的日益重视，前端性能对用户体验的影响备受关注，但由于性能问题相对复杂，接下来我们来了解下JavaScript如何提高性能；

01

基于Vue、ElementUI的换肤解决方案

换肤这个功能，不能算是很常见，但是也是有需求的，所以这里提供几种前端的换肤解决方案，供大家参考。

03

服务器端加入自动运行的JS代码

本来不是一个很复杂的事情，就是想通过服务器的代码，控制客户端加载时运行一个js函数。却折腾了一个早上，首先是用 page.ClientScript.RegisterClientScriptBlock(typeof(string), "FomrJS", js); 这个js块将放在</form>之前，并在window.onload之前运行。假如不是复杂的代码的话，如alert之类，完全没有问题。但我用到的js函数刚好比较复杂，结果每次都报错。把代码复制

使用Three.js构建基础3D场景 | 《Three.js零基础直通03》

这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。

04

使用JavaScript和D3.js实现数据可视化

D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。

03

如何使用Vue.js和Axios来显示API中的数据

Vue.js是一个用于构建用户界面的前端JavaScript框架。它的设计从头开始逐步采用，并与其他图书馆或现有项目完美集成。这使它非常适合小型项目以及与其他工具和库一起使用的复杂单页应用程序。

02

眨个眼就学会了Pixi.js

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。

01

WordPress 技巧：将你的博客添加到百度首页

百度的新首页不仅仅有搜索框，下面还有一个小型导航，放着你经常去的网站。当用户登录之后，就可以进行设置，通常来说是选择一些大站、名站，当然也可以手动编辑。如果能在自己的网站上加上这样一个按钮，如果有访问者想要将你的网站添加到首页，只需要点击一下就好了。当然，百度提供了一键添加到百度首页的按钮代码。

01

旁路WAF：使用Burp插件绕过一些WAF设备

我曾经写了一篇关于Burp插件使用的技术的博文在这里。许多WAF设备可以被伪造的请求欺骗，这些伪造的会被认为是自身正常的请求来处理，因为如果被判断有特定的头部存在，那么对于它来说就是可信的。旁路方法的

06

通过 Laravel 创建一个 Vue 单页面应用（一）

使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中，我们将学习如何构建并运行一个以 Vue 路由为前端，laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上，然后在后续的教程中，我们再演示如何将 Laravel 作为 API 层而构建一个完整的应用。

02

网页字体文件最后再加载实现方法

今天在优化主题的时候遇到的问题，发现字体文件的体积实在是太大了，即便是使用了cdn作为缓存，但是加载的时间还是过于久，会导致拖慢了全站的加载速度，于是便将字体样式通过异步加载的形式，让其不拖慢网站的加载速度。

02

浅显易懂讲解如何用JWT来加固API

您一定听说过JSON Web Token(JWT)吧? 它是当前用来保护API的先进技术之一。与大多数安全概念与技术一样，我们在准备使用它之前，了解其工作原理是非常必要且重要的。当然，过于专业和技术性

01

Koa - 初体验（写个接口）

这几年node.js确实是越来越火了，好多公司对node.js都开始有要求。虽说前端不一定要会后端，但想要成为一个优秀的前端，node.js是必经之路。

03

一文入门jQuery

一个JavaScript框架。简化JS开发。 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

02

OAuth 详解<5> 什么是OAuth 2.0 隐式流, 已经不推荐了吗？

您最近可能听说过一些关于 OAuth 2.0 隐式流程的讨论。OAuth 工作组发布了一些关于隐式流程和基于 JavaScript 的应用程序的新指南，特别指出不应再使用隐式流程。在本文中，我们将了解隐式流程发生了什么变化以及原因。

04

AngularDart Material Design 应用布局顶

应用布局应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。它根据材料规格提供应用栏，抽屉和导航样式。

03

Vue教程07(综合小案例)

使用bootstrap来设置table，在vscode中安装bootstrap插件

02

从零开始使用 Astro 的实用指南

在这个实用的Astro指南中，我将指导你完成设置过程，并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件，甚至是markdown文章。我还会告诉你如何从服务器上获取数据，创建布局，并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣，因为我们将一起创建一个小型的网站实例。我们将构建一个多页面的网站，包括一个博客。

04

将你的wordpress博客添加到百度个性首页

当你登陆百度账号后，进入百度首页会显示新的个性首页，不仅仅有搜索框，下面还有一个小型导航，放着你经常去的网站。

01

Speak开坑记录

由于一开始的写法是获取与创建是分开写的，即获取后返回一个promise对象，通过then方法在将获取到的数据进行创建（渲染）。因此放弃jQuery的Ajax方法后也要返回一个Promise对象，这样才能以最小的成本兼容以前的写法。

04

在线算命网站源码|算命小程序源码带uniapp

在本教程中，您将学习如何使用基本的 JavaScript、HTML 和 CSS 构建一个简单的算命应用程序。源码系统独一无二的算命筛选功能可确保您与最能满足您需求的算命先生相匹配。您可以根据算命先生的姓名、评级、定价、语言、专长、位置等筛选算命先生。California Psychics 还拥有全面的算命先生档案，让您更轻松地选择专家。

06

30分钟用Node.js构建一个API服务器[每日前端夜话0x70]

Node.js 对初学者来说可能是令人望而却步的，其灵活的结构和缺乏严格的规范使它看起来很复杂。

01

怎样才能写出更好的 CSS

让我们开门见山：编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行，但是 CSS 还是算了吧。

01

破坏小飞机

网页小游戏，点击按钮可以召唤小飞机，按键盘方向键控制飞机飞行，飞过边界会从屏幕另一侧飞回，可以用空格键发射炮弹击毁网页中的元素，按 B 查看有什么元素可以攻击。

01

lazyload图片延迟加载适用所有类型

LazyLoad大家再熟悉不过的一个jquery插件了，它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才会加载并显示出来，这和图片预加载的处理方式正好刚好相反。图片不多的页面时，效果并不太明显，但是当页面大图片比较多的时候，这种效果就比较显著了，明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状态，在某些情况下还可以帮助降低服务器负担。因此，比较流行的wordpress主题，typecho主题，emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。当然啦，你的网站纯文字的，就没必要多搞个jquery插件了。

01

如何从Django应用程序发送Web推送通知

网络不断发展，现在可以实现以前只能在本机移动设备上使用的功能。JavaScript 服务工作者的引入为Web提供了新的功能，可以执行后台同步，脱机缓存和发送推送通知等功能。

Threejs入门之三:让物体跟随鼠标动起来

上一节我们创建了一个三维的立方体，将其放在了浏览器窗口中，但是目前来讲它只是一个静态的图片，我们并不能通过鼠标控制其旋转、缩放和移动，这一节我们来实现用鼠标控制物体的运动。首先我们要了解一个概念，在三维场景中，我们要控制物体旋转，实际上不是物体在旋转，而是我们的相机（还记得上一节中说的相机吗）在围绕物体旋转，就像电影中的镜头拉近一样，是相机在动，不是物体在动，所以，在Threejs中要想让我们的物探动起来，我们需要引入一个轨道控制器(OrbitControls),它可以使得相机围绕目标进行轨道运动，下面我们来实现下 1.导入轨道控制器OrbitControls OrbitControls是ThreeJS的一个扩展库，其本身不在threejs的基础库里面，其位于threejs—examples—jsm—controls文件夹下面，我们在上一节引入threeJS的下面添加如下代码进行引入

03

两种给 Http 添加状态的方式，都不完美

我们知道，http 是无状态的，也就是说上一次请求和下一次请求之间没有任何关联。但是我们要实现应用的功能，很多时候是需要有状态的，比如登录之后，再添加购物车，那就应该识别出是登录用户做的。

01

「一道面试题」输入URL到渲染全面梳理中-页面渲染篇

接上文，上文我们讲了网络通信的部分，详细请看「一道面试题」输入URL到渲染全面梳理上-网络通信篇，那么该说说页面渲染的流程了，也就是当输入一个URL拿到了页面后，浏览器怎么解析，怎么呈现

02

【译】开始学习React - 概览和演示教程

当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？

02

【ThreeJs】（1）四大组件：场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图

https://github.com/lvtraveler/threejsStart

01

MySQL的缓冲池[Buffer Pool]你知道多少？

buffer pool 就是一个缓存，将磁盘中的数据缓存到内存中，对数据的操作改为通过内存进行操作，然后刷盘的操作，提升性能。

04

动图学 JavaScript 之：事件循环（Event Loop）

今天该学习 Event Loop 啦，其实之前我写过一篇 Event Loop 的文章：

01

GoJS爬坑之旅

我进入项目组后参加了第一次项目会议，在会议上项目经理为每个项目成员都分配了任务，我的任务是使用GoJS实现一个拖拽效果，这也是我第一次听说GoJS，在网上查阅相关的资源后发现GoJS的资料比较少，而且绝大多数资源都是英文的，这也为我学习及使用这个框架带来了不小的困难，好在项目经理看出这块做起来比较难后来又加了一个人，现在这块由我和一个同事两个人共同开发。

01

Vue学习之增删改查小案例

使用bootstrap来设置table，在vscode中安装bootstrap插件

01

嘀~正则表达式快速上手指南（下篇）

上面的代码中用 for 循环去遍历 contents 这样我们就可以一个一个处理每封邮件。我们创建一个字典， emails_dict,这将保存每个电子邮件的所有细节，如发件人的地址和姓名。事实上，这些是我们要寻找的第一项信息。

01

浏览器将标签转成 DOM 的过程

当浏览器获得了资源以后要进行的第一步工作就是 HTML 解析，，它由几个步骤组成:编码、预解析、标记和构建树。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭