前端设计中关于外部js文件加载的速度优化

最新推荐文章于 2022-08-19 11:31:58 发布
VIP文章 最新推荐文章于 2022-08-19 11:31:58 发布
阅读量334 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a406502972/article/details/83034429
版权

 

在一般情况下，许多人都是将<script>写在了<head>标签中，而许多浏览器都是使用单一的线程来加载js文件的，从上往下，从左往右。

若是加载过程出错，那么网页就会阻塞，就像许多网站用Google的CDN库，而我们在墙内访问一样。页面不会出来，一直加载这个js文件，直到浏览器放弃加载为止！

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head id="head">
 6     <title></title>
 7     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
 8     <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
 9     <script src="js/hello.js" type="text/javascript"></script>
10     <script src="js/world.js" type="text/javascript"></script>
11 </head>
12 <body>
13     <img src="1.jpg" width
最低0.47元/天 解锁文章
愤怒的TryCatch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node-minify：轻量Node.js模块，可压缩javascript，css和html文件
01-30
一个非常轻巧的Miner Node.js模块。 产品特点 它允许您压缩JavaScript，CSS和HTML文件。 JavaScript： CSS： HTML： 命令行界面： 安装 npm install @node-minify/core # OR yarn add @node-minify/core 并安装所需的压缩机 npm install @node-minify/uglify-js # OR yarn add @node-minify/uglify-js 快速开始 const minify = require ( '@node-minify/core' ) ; const gcc = require ( '@node-minify/google-closure-compiler' ) ; const uglifyjs = require ( '@node-minify/uglify-js' ) ; // Using Google Closure Compiler minify ( { compressor : gcc , input : 'foo.js' ,
JavaScript与WebAssembly进行比较
weixin_34242331的博客
02-18 172
2019独角兽企业重金招聘Python工程师标准>>> ...
JS实现图片懒加载
xvktdmjg的博客
01-13 272
JS实现图片懒加载 在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。 思路 用data-xxx属性替换img标签的src属性，当页面滚动到图片区域时候再将src属性替换成data-xxx属性 各种宽高 页可见区域宽： document.body.clientWidth; 网页可见区域
nodejs 的 js 及 css 压缩插件--minifier
weixin_34259159的博客
09-27 1150
为什么80%的码农都做不了架构师？>>> ...
WebAssembly 了解 与 js对比
tsqjxy的博客
08-19 639
一旦你把 SessionStack 整合进你的网络应用或网站的生产环境，它会开始记录所有的一切：所有的 DOM 变化，用户交互，JavaScript 异常，堆栈追踪，失败的网络请求和调试数据。当你在 SessionStack 中重放用户会话，我们必须渲染问题产生时你的用户的浏览器所发生的一切，而且我们必须重构整个状态，允许你在会话时间线上来回跳转。例如，如果你有一个已用C语言编写的高效数学函数，并且需要将它合并到某个Web应用程序中，那么，你就可以将它部署为一个WebAssembly模块。
压缩html\js\css模块 html-minifier
weixin_30834019的博客
07-18 395
在线压缩地址：http://kangax.github.io/html-minifier/ git地址：https://github.com/kangax/html-minifier 安装: npm installhtml-minifier 使用： 1、node命令行进入要压缩的项目的根目录后，执行： npm i html-minifier 2、在此根目录下新建一个文...
（24）minify压缩的时候报错
Java田根旺
01-10 453
minify命令执行压缩的时候，报如下错误 解决方案 将node版本升级到v14.18.2，即可解决该问题。
minify自动压缩合并JS和CSS(减少请求数)
08-05
压缩 JavaScript 和 CSS，是为减少文件大小，节省流量开销；合并 JavaScript 和 CSS，是为了减少请求数量，减轻服务器压力。而这些枯燥又没有技术含量的工作，我们以前通常会手动处理，费时又费力。其实这些工作可以让一些工具为我们代劳，比如说，今天我推荐的这个工具—— Minify。 首先，先来看一下 Minify 在我的 WordPress 上使用的效果吧。 上图是本站首页的
读书笔记-高性能js-加载和执行
junjiahuang的博客
11-16 603
减少js对性能的影响： js放文件尾部。 合并js文件。减少外链js,合并js文件。单个文件比多个文件加载快，因为多个文件中间会执行上一个js文件。 一个大的js文件下载会锁死浏览器一段时间。所以我们需要逐步加载文件。 无阻塞脚本 defer 属性。指明脚本不会修改dom，可延迟执行。脚本可放任务位置。只下载不执行，直到dom加载完成。 动态脚本元素。无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。 script标签在head里面创建更保险，在body可能在ie下没有加撤完成会报错。 动态
php 如何安装minify,PHP中，JS和CSS优化工具Minify的使用方法_PHP教程
weixin_33918358的博客
03-11 192
为减少HTTP请求，我们往往需要合并和压缩多个JS和CSS文件，下面记录下网上关于实现这个功能的PHP源码以及开源项目Minify的使用方法一、实现合并和压缩多个JS和CSS文件的代码请参考1、一句命令快速合并JS和CSS文件2、PHP合并多个JS和CSS文件，减少HTTP请求(原型)二、Minify的使用方法1、从code.google.com/p/minify/下载最新版Minify并解压缩，...
JavaScript中的无阻塞加载性能优化方案
12-09
Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题...不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继
nodered加载外部js的使用
03-28
nodered加载外部js的使用
vue使用three.js引入外部obj，mtl模型.zip
05-31
vue使用three.js引入外部obj，mtl模型demo
高性能Javascript--脚本的无阻塞加载策略
01-30
Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题。在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部。...JavaScript代码是内联的还是包含在一个不相干的外部文件中,页面下载
wind.js-API前端开发帮助文档（phpwind9.0版）
02-06
传统上，我们加载JS文件都是使用[removed]标签：[removed][removed]。...wind.js就是为了解决脚本阻塞加载而生，使用异步、并行的方式来加载外部的javascript文件（通过gzip压缩后，wind.js文件为2.6KB）。
minify php,Minify JS及CSS压缩PHP类
weixin_39621185的博客
03-12 115
Minify 是用PHP5开发的php网页压缩应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件。一般情况下，网站...
使用Node.js打包前端
走在bug的路上
10-31 1500
1、下载并安装node.js 下载地址 2、准备配置文件 在demo-html目录下，创建一个名为.editorconfig的文件，内容如下： root = true [*] charset = utf-8 end_of_line = crlf indent_size = 4 indent_style = space insert_final_newline = false max_line_length = 120 tab_width = 4 在demo-html目录下，创建一个名为pack
Sublime Text 3插件Minify的安装与使用(Javascript代码压缩，js压缩)
热门推荐
slongzhang的博客
08-11 13万+
需要用到的软件 SublimeText3+Node.js 进入正题Minify的安装 打开SublimeText，快捷键ctrl+shift+p调出package control输入install package找到minify回车安装即可，安装结成功后该文档在编辑器中弹出。 Minify文档翻译 安装完成后会弹出minify使用文档，下面是文档的翻译 Package Control Messages Minify Thank you for installing `Minify’ for Sublime
加载第三方Js减少页面渲染时间
qq_24892029的博客
07-06 952
如果你的网站上面有很多第三方JS代码，那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候，如果解析到需要下载文件的script标签，那么会停止解析接下来的HTML，然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下：（...
前端js文件中敏感数据脱敏或删除
最新发布
07-14
在前端 JavaScript 文件中，处理敏感数据的方法可以有以下几种： 1. 脱敏：将敏感数据进行脱敏处理，例如使用模糊化、替换等方式隐藏真实数据。这样可以保护用户的隐私信息。例如，将手机号码的中间几位用星号替换，或者将邮箱地址的部分字符用随机字符代替。 2. 删除：如果敏感数据不需要在前端展示或使用，可以直接删除相关代码。将敏感数据的处理交给后端或其他安全环境进行处理，避免将敏感数据暴露在前端。 3. 加密：对于某些敏感数据，可以使用加密算法对其进行加密处理。只有在需要使用或传输时，在安全的环境下进行解密操作。这样可以增加数据的安全性。 4. 客户端保护：在前端代码中，可以采用一些安全措施来保护敏感数据，例如使用 HTTPS 来加密网络传输、使用 Content Security Policy (CSP) 来限制加载外部资源、使用防 XSS (跨站脚本攻击) 和 CSRF (跨站请求伪造) 的技术手段来防止攻击。 需要根据具体的业务场景和敏感数据的类型来选择合适的处理方法，并且结合后端和服务器端的安全措施，以保障敏感数据的安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值