shenlei19911210
shenlei19911210

高性能JavaScript：脚本的无阻塞加载策略

在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部 。原因是，事实上，大多数浏览器使用单进程处理UI和更新JavaScript运行等多个任务，而同一时间只能有一个任务被执行。JavaScript运行了多长时间，那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。
高性能JavaScript：脚本的无阻塞加载策略_第1张图片

　　从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继续。这是页面生命周期必不可少的部分,因为脚本可能在运行过程中修改页面 内容。典型的例子是 document.write()函数,例如:
  1. <html>
  2.   <head>
  3.     <title>Script Example</title>
  4.   </head> 

  6.   <body>
  7.      <p>
  8.         <script type="text/JavaScript">
  9.            document.write("The date is " + (new Date()).toDateString());
  10.         </script> 
  11.      </p>
  12.   </body> 
  13. </html>

　　当浏览器遇到一个<script>标签时,正如上面 HTML 页面中那样,无法预知 JavaScript 是否在<p>标签中 添加内容。因此,浏览器停下来,运行此 JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生 在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后 解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。

　　因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有<script>标签放在尽可能接近<body> 标签底部的位置,尽量减少对整个页面下载的影响。例如:
  1. <html>
  2.   <head>
  3.     <title>Script Example</title>
  4.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  5.   </head>

  7.   <body>
  8.     <p>Hello world!</p>
  9.     <-- Example of recommended script positioning --> 
  10.       <script type="text/JavaScript" src="file1.js"></script> 
  11.       <script type="text/JavaScript" src="file2.js"></script> 
  12.       <script type="text/JavaScript" src="file3.js"></script>
  13.   </body> 
  14. </html>

　　此代码展示了所推荐的
  1. <script type="text/JavaScript" src="http://yui.yahooAPIs.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></script>

　　此 URL 调用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此 URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个 <script>标签(每个标签加载一个文件),一个<script>标签就可以加载他们。这是在HTML页面包含多个外部JavaScript的最佳方法。

　　Noblocking Scripts 非阻塞脚本

　　上述是页面初始状态包含多个JavaScript脚本加载的最佳方法。JavaScript倾向于阻塞浏览器某些处理过程，如http请求和界面刷新，这是开发者面临的最显著性能问题。保持JavaScript文件短小，并限制http请求的数量，只是创建反应迅速的网页应用第一步。

　　但诸如大型网页有大量的Js代码，保持源码短小并不总是一种最佳选择。So，非阻塞脚本应运而生，我们需要的是向页面中逐步添加JavaScript，某种程度上而言不会阻塞浏览器。

　　而非阻塞脚本的关键在于，等页面完成加载之后，再加载JavaScript源码，这意味着在window的load事件发出之后开始下载代码。

　　相关解释：

　　window 的load事件只会在页面载入完毕后触发一次且仅一次。

　　window.onload=function(){}必须等待网页中所有的内容加载完毕后 ( 包括元素的所有关联文件，例如图片 ) 才能执行，即JavaScript此时才可以访问页面中的任何元素。

　　如下述几种方法：

　　Deferred Scripts 延期脚本

　　Html4为<script>标签定义了一个扩展属性：defer。

　　这个defer属性指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。defer属性只被Internet Explorer 4+和Firefox 3.5+支持，它不是一个理想的跨浏览器解决方案。在其他浏览器上，defer属性将被忽略。所以，<script>标签会按照正常默认方式处理，即是会造成阻塞。如果得到各个主流浏览器的支持，这仍是一种有效的解决方式。
  1. <html>
  2.   <head>
  3.     <title>Script Defer Example</title>
  4.   </head> 

  6.   <body>
  7.     <script defer> alert("defer");</script> 
  8.     <script> alert("script"); </script> 
  9.     <script> window.onload = function(){ alert("load");}; </script>
  10.   </body> 
  11. </html>

　　如果浏览器不支持defer，那么弹出的对话框的顺序是“defer”，“script”，“load”。

　　如果浏览器支持defer，那么弹出的对话框的顺序是“script”，“load”，“defer”。

　　Dynamic Script Elements 动态脚本元素

　　DOM允许我们使用JavaScript动态创建HTML的几乎所有文档内容，一个新的<script>元素可以非常容易的通过标准DOM创建：
  1. var script = document.createElement ("script");
  2. script.type = "text/JavaScript";
  3. script.src = "file1.js"; 
  4. document.body.appendChild(script);

　　新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

　　当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕）。

　　大多数情况下，我们希望调用一个函数就可以实现JavaScript文件的动态下载。下面的函数封装实现了标准实现和IE实现：
  1. function loadScript(url, callback){
  2.     var script = document.createElement ("script") ;
  3. 　  script.type = "text/JavaScript";

  5.     if (script.readyState){ //IE
  6.        script.onreadystatechange = function(){
  7.          if (script.readyState == "loaded" || script.readyState == "complete"){
  8.            script.onreadystatechange = null;
  9.            callback(); 
  10.           }
  11.        };
  12.      } 
  13.      else { //Others
  14.        script.onload = function(){ callback();
  15.      }; 
  16.    }
  17.    script.src = url;
  18.    document.getElementsByTagName("head")[0].appendChild(script); 
  19. }

  21. loadScript("file1.js", function(){  //调用
  22.     alert("File is loaded!"); 
  23. });

　　此函数接受两个参数：JavaScript文件的Url和一个当JavaScript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将JavaScript文件添加到head。

　　动态脚本加载是非阻塞JavaScript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

　　XMLHttpRequest Script Injection XHR脚本注入

　　另一个以非阻塞方式获得脚本的方法是使用XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术首先创建一个XHR对象，然后下载JavaScript文件，接着用一个动态
  1. var xhr = new XMLHttpRequest(); 
  2. xhr.open("get", "file1.js", true); 
  3. xhr.onreadystatechange = function(){
  4.     if (xhr.readyState == 4){
  5.       if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 检查http状态码
  6.         var script = document.createElement("script"); 
  7.         script.type = "text/JavaScript";
  8.         script.text = xhr.responseText;
  9.         document.body.appendChild(script);
  10.       } 
  11.    }
  12. }; 
  13. xhr.send(null);

　　此代码向服务器发送一个获取file1.js的文件get请求。onreadystatechange事件处理函数检查readyState是不是4，然后检查http状态码是不是有效（200表示确定客户端请求已成功，2xx表示有效回应，304表示一个缓存响应）。如果收到一个有效响应，那么就创建一个新的<script>元素，将它的文本属性设置为从服务器接收到的responseText字符串。这样做实际上会创建一个带有内联代码的<script>元素，一旦新的<script>元素被添加到文档，代码将被执行，并准备使用。

　　此方法的优点是兼容性佳，且你可以下载不立即执行的JavaScript代码。由于代码返回在<script>标签之外，它下载后不会自动执行，这使得你可以推迟执行。

　　此方法的确定是受到浏览器同源限制，JavaScript文件必须与页面放置在同一个域内，不能从CDN(内容分发网络Content Delivery Network)下载。正因为这个原因，大型网页通常不采用XHR脚本注入技术。

　　Recommended Noblocking Pattern 推荐的非阻塞模式

　　推荐的向页面加载大量JavaScript的方法分为两个步骤：

  • 第一步，包含动态加载JavaScript所需的代码，然后加载页面初始化所需的除了JavaScript之外的部分。这部分代码尽量小，可能只包含loadScript()函数，它的下载和运行非常迅速，不会对页面造成很大干扰。
  • 第二步，当初始代码准备好之后，用它来加载其余的JavaScript。

　　例如：
  1. <script type="text/JavaScript" src="loader.js">
  2. </script> <script type="text/JavaScript">
  3. loadScript("the-rest.js", function(){ 
  4. 　　Application.init();
  5. }); 

  7. </script>

　　将此代码放置在body的关闭标签</body>之前。这样做的好处是，首先，这样确保JavaScript运行不会影响其他页面的其他部分显示。其次，当第二部分JavaScript文件完成下载，所有应用程序所必须的DOM已经创建完毕，并做好被访问的准备，避免使用额外的事件处理（如window.onload）来得知页面是否已经准备好了。

　　另一个选择是直接将loadScript()函数嵌入在页面中，这可以减少一个http请求的开销。例如：
  1. <script type="text/JavaScript"> 
  2.   function loadScript(url, callback){
  3.     var script = document.createElement ("script");
  4. 　  script.type = "text/JavaScript";

  6.     if (script.readyState){ //IE script.onreadystatechange = function(){
  7.       if (script.readyState == "loaded" || script.readyState == "complete"){
  8.         script.onreadystatechange = null; 
  9.         callback();
  10.       } 
  11.     };
  12.   } else { //Others 
  13.    script.onload = function(){
  14.    　　callback(); 
  15.    };
  16.   }
  17.   script.src = url; 
  18.   document.getElementsByTagName("head")[0].appendChild(script);
  19. }

  21. loadScript("the-rest.js", function(){
  22. 　　Application.init(); 
  23. });
  24. </script>

　　一旦页面初始化代码下载完成，还可以使用loadScript()函数加载页面所需的额外功能函数。

　　介绍一个通用的工具，Yahoo! Search的Ryan Grove创建了LazyLoad库（参见：http://github.com/rgrove/lazyload/ ）。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下：
  1. <script type="text/JavaScript" src="lazyload-min.js"></script> 
  2. <script type="text/JavaScript">
  3. 　　LazyLoad.js("the-rest.js", function(){ 
  4. 　　　　Application.init();
  5. 　　}); 
  6. </script>

　　Summary 总结

  • 将所有<script>标签放置在页面底部，紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。
  • 将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更迅速。不论外部脚本文件还是内联代码都是如此。
  • 有几种方法可以使用非阻塞方式下载JavaScript：
  • 为<script>标签添加defer属性
  • 动态创建<script>元素，用它下载并执行代码
  • 用XHR对象下载代码，并注入到页面

　　通过上述策略，可以极大提高那些使用JavaScript代码的网友应用的实际性能。

你可能感兴趣的:(JavaScript,前端开发)

  • 前端开发常用的加密算法 爱分享的程序员 前端前端
    以下是前端开发中常用的加密方式及其适用场景的详细说明：一、核心加密方案加密类型常用算法特点适用场景对称加密AES、DES、3DES加密解密使用相同密钥，速度快本地存储加密、HTTPBody加密非对称加密RSA、ECC公钥加密私钥解密，安全性高传输敏感数据、数字签名哈希算法SHA-256、MD5（不推荐）单向不可逆，验证数据完整性密码存储、数据校验消息认证码HMAC带密钥的哈希，防篡改API签名验证
  • 前端21：Vue.js开发实践指南 mater lai
    本文还有配套的精品资源，点击获取简介：Vue.js是前端开发领域流行的JavaScript框架，"前端21"项目展示了基于Vue.js的Web应用程序开发。本文详细介绍了Vue.js的核心概念、项目设置、npm脚本、自定义配置、文件结构、开发过程和VueCLI工具，以帮助开发者高效构建Web应用。1.Vue.js框架基础1.1Vue.js简介Vue.js是一套构建用户界面的渐进式JavaScrip
  • Vue 路由基础：Vue 2 和 Vue 3 的比较与使用 念九_ysl Vuevue.js前端javascript
    Vue.js是一款非常流行的前端框架，而VueRouter是Vue.js的官方路由管理库。在前端开发中，路由是处理页面跳转和视图管理的关键部分。Vue2和Vue3都使用VueRouter来管理路由，但是随着Vue3的发布，VueRouter也有了不少变化。在本文中，我们将详细介绍Vue2和Vue3中的路由使用，比较它们之间的不同，并提供一些示例代码。一、安装VueRouter在Vue项目中使用Vu
  • 前端开发核心知识点深度解析：从CSS到Vue的全面指南 A_cot cssvue.js前端开发语言javascript
    一、CSS篇1.link与@import的区别加载方式：是HTML标签，并行加载；@import是CSS语法，串行加载兼容性：@import不支持IE5以下DOM控制：link可通过JS操作DOM修改，@import不可动态修改权重计算：@import引入的样式优先级低于link@importurl('style.css');二、JavaScript篇2.原型链机制原型对象：每个函数都有proto
  • cookieParser 依赖详解 yqcoder web安全前端
    cookie-parser是一个用于在Express.js中解析HTTPCookie的Node.js中间件。它将Cookie字符串解析为JavaScript对象，使开发者能够方便地在Express应用中访问和操作Cookie。一、安装npminstallcookie-parser二、基本使用constexpress=require("express");constcookieParser=requ
  • HarmonyNext实战案例：构建一个智能健康监测应用 前端
    在本文中，我们将通过一个完整的实战案例，深入探讨如何在HarmonyNext平台上使用ArkTS构建一个智能健康监测应用。该应用将实现以下功能：实时监测用户的心率、步数和睡眠质量，并将数据可视化展示。本文假设读者已经具备一定的编程基础，尤其是对TypeScript或JavaScript有一定的了解，并且熟悉HarmonyNext的基本开发环境。项目概述智能健康监测应用的核心功能包括：心率监测：通过
  • 前端2025 家里有只小肥猫 前端
    2025前端面试总结：趋势、技巧与准备建议随着前端技术的飞速发展，2025年的前端面试不仅考察技术深度，更注重实践能力和对新技术的掌握。作为一名前端开发者，如何在激烈的竞争中脱颖而出，是每一位求职者都需要思考的问题。本文将结合2025年的前端技术趋势，分享面试总结、常见问题及准备建议，帮助大家更好地应对未来的面试挑战。一、2025年前端技术趋势总结WebComponents的广泛应用WebComp
  • 2025前端技能 家里有只小肥猫 前端
    前端开发是现代Web开发中非常重要的一部分，涉及众多技术和工具。以下是一些在前端开发工作中常见的需求和技术：1.技术基础HTML/CSS:构建页面结构和样式。JavaScript:实现交互逻辑和动态功能。ES6+:使用现代JavaScript语法和特性。DOM操作:操作网页元素和事件处理。浏览器兼容性:确保代码在不同浏览器中正常运行。跨设备适配:确保页面在不同设备（PC、手机、平板）上正常显示。2
  • 事件循环_经典面试题 还是鼠鼠 javascriptajax前端vscodehtml5
    目录代码分析代码解读执行顺序执行结果结论文件名：在JavaScript中，理解事件循环（EventLoop）是掌握异步编程的基础。事件循环决定了代码的执行顺序，包括宏任务（Macrotasks）和微任务（Microtasks）的调度。为了更好地理解事件循环，我们通过一个经典的面试题来展示JavaScript中的异步执行顺序。代码分析这是一个简单的HTML文件，包含了一段JavaScript代码，我
  • 零基础程序员如何快速学会python Java进阶营菌 程序员职场Pythonpython开发语言后端pycharm程序人生
    学会Python能做的事情也很多，常见的就有网络爬虫，数据分析，前端开发，机器学习，都能很好地提高工作效率，往任何一个领域发展，工作前景是非常不错的。接下来我从基本的软件安装开始，仔细的给大家分析新手入门应该怎样学习Python吧，如果有讲得不到位的地方也欢迎大家指正，我会及时进行修改。一、软件的安装和选择1、配置环境关系到实操，所以在选择资料的同时，你还需要安装好Python需要的软件，软件版本
  • JavaScript 系列之：函数 程序员SKY JavaScriptjavascript
    函数的定义方式函数声明functionadd(a,b){returna+b;}函数声明的最重要的一个特征是函数声明提升，它允许你在函数声明之前调用该函数。add(1,2);functionadd(a,b){returna+b;}函数表达式//普通的函数表达式letadd=function(a,b){returna+b;}add(1,2)//函数表达式也可以有函数名，这个函数名不能在函数外面用，只能
  • 前端架构设计 weixin_34266504 前端测试javascriptViewUI
    最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发
  • React - 兄弟互传 - 消息订阅 - 发布机制 来一碗刘肉面 Reactreact.js前端javascript
    pubsub-js是一个轻量级的JavaScript库，用于实现发布-订阅（Pub/Sub）模式。该模式使得组件间的通信变得简单和高效，特别适用于React中的兄弟组件之间通信。通过pubsub-js，一个组件可以发布消息，其他组件可以订阅这些消息以获得更新。1.安装pubsub-jsnpminstallpubsub-js//或者yarnaddpubsub-js2.基本概念发布（Publish）:
  • javaScript-系统知识点【 常见问题及其解决办法】 大麦大麦 2025前端面经javascript开发语言ecmascript前端面试
    会造成内存泄漏的情况（中级）setTimeout的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。//setTimeout的错误使用setTimeout('666',100)//setTimeout的正确用法setTimeout(()=>{console.log('666')},1000)前端常见内存泄漏及解决方案如何捕获JS程序的异常？两种方式trycatchwindow.onerror//手
  • JavaScript 系列八：同步与异步 XHSRookies JavaScriptjavascript
    快来加入我们吧！"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们(https://xhs-rookies.com/)进行学习，及时获取最新文章。"Codetailor"，如果您对我们文章感兴趣、或是想提一些建议，微信关注“小和山的菜鸟们”公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
  • 爬虫：一文掌握JavaScript hook的详细使用 数据知道 2025年爬虫和逆向教程爬虫javascript开发语言python数据采集前端
    文章目录一、什么是JavaScriptHook？二、JavaScriptHook的常见用途三、常见的JavaScriptHook技术3.1函数劫持（FunctionHooking）3.2代理对象（Proxy）3.3MutationObserver3.4EventListenerHook四、在爬虫中的应用4.1使用Puppeteer拦截AJAX请求4.2使用Playwright注入Hook4.3表单
  • Node.js学习01-初识Node.js与内置模块 Meowmow nodejsnode.js学习javascript
    目录初识Node.js在Node.js环境执行js代码内置模块fs文件系统模块路径动态拼接问题path路径模块http模块request请求对象初识Node.jsNode.js是基于ChromeV8引擎的JavaScript运行环境，无法调用DOM和BOM等浏览器内置API。使用Node.js可以：基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restif
  • 使用Windows系统进行Node.js离线安装 YOUFDJ windowsnode.js编程
    Node.js是一个基于ChromeV8引擎的JavaScript运行时，广泛用于服务器端开发。通常情况下，我们可以通过官方网站下载安装程序进行Node.js的安装，但有时候在没有网络连接的情况下，我们需要进行离线安装。本文将详细介绍如何在Windows系统下进行Node.js的离线安装。以下是进行Node.js离线安装的步骤：第一步：下载Node.js安装包首先，我们需要从官方网站或其他可信来源
  • 深入探索CSS：从基础到高级，解锁网页设计的无限可能 斯~内克 csscss前端
    CSS（层叠样式表）是现代网页设计中不可或缺的一部分，它不仅决定了网页的外观和风格，还极大地影响了用户体验和交互效果。从简单的文本样式到复杂的布局设计，CSS的灵活性和强大功能使其成为前端开发的核心技术之一。本文将从CSS的基础概念出发，逐步深入到高级应用，带你全面了解CSS的魅力和实用性。一、CSS简介：网页设计的基石CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。它的主要作用是
  • JavaScript--核心语法基础 丿狴犴λ jsjavascripthtml前端
    JavaScript--核心语法基础1.编程语言2.js历史3.js的作用4.JS组成部分5.JS的使用5.1引入方式5.2script位置5.3语法规则5.46.变量（重点）6.1什么是变量？6.2创建变量6.3变量命名规则7、数据类型（重难点）7.1分类7.2基本数据类型7.3引用数据类型--对象（object）7.4数据类型的检测8.数据类型的转换8.1隐式转换8.2强制转换9.运算符9.1
  • webpack基础配置 吃杠碰小鸡 前端前端工具库webpack前端javascript
    文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1多文件入口3.2HtmlWebpackPlugin插件四、环境4.1环境变量4.2热更新五、代码分离5.1公共模块5.2懒加载5.3预获取/预加载模块六、缓存七、TreeShaking八、公共路径webpack是一个用于现代JavaScript应用程序的静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配
  • WPS 加载项开发说明 金山办公开发者 JSAPI二次开发javascript
    WPS加载项结构WPS加载项由自定义功能区和网页两部分组成。自定义功能区只需要一个配置文件，对应WPS加载项目录中的ribbon.xml文件；网页部分负责执行自定义功能区对应的逻辑功能。因为不需要显示网页，所以省略了HTML文件，并用main.js来引入所有的外部JavaScript文件；在这些JavaScript文件中通常包含了一系列用JavaScript实现的函数，这些函数与自定义功能区的功能
  • Python web基础知识，后端服务器开发，观点还停留在Java上吗！ 道-闇影 pythonjavaweb开发
    极简生活，极简编程，简到极致，就是完美！在写CSDN的Python技能树体验五(web应用开发:Djiago、Tornado、Flask)—终于可以写点能看的了！之前，wc，提前剧透了！先对web开发做一个简要的说明，话不多说，往下看！web应用开发的含义web应用开发分为：前端网页开发，后端服务器开发，还有前后端的一个通信技术！各个部分需要哪些基础前端开发基础：HTML,CSS，JavaScti
  • Canvas绘制简易雨滴碰撞效果 DTcode7 HTML网站开发#canvas绘图HTML绘图canvasJavaScriptcanvas绘图
    Canvas绘制简易雨滴碰撞效果基本概念与作用说明示例一：基本的雨滴生成与移动HTML结构JavaScript逻辑示例二：添加碰撞检测更新JavaScript示例三：动态改变雨滴的速度和大小更新JavaScript示例四：添加用户交互更新JavaScript示例五：模拟风的影响更新JavaScript实际工作中的技巧在Web开发中，HTML5Canvas提供了一个强大且灵活的绘图环境，可以用来创建
  • 最详细的Windows下安装node.js 和 npm大全 i建模 前端开发node.jswindowsnpmjavascripttypescript前端框架
    说明Node.js®是一个免费、开源、跨平台的JavaScript运行时环境,它让开发人员能够创建服务器Web应用、命令行工具和脚本。NPM的全称是NodePackageManager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。安装时一般要选择LTS版本，也就是长期
  • ES6笔记总结（Xmind格式）：第二天 星河路漫漫 ES6笔记总结es6笔记前端
    Xmind鸟瞰图：简单文字总结：ES6知识总结Proxy（代理）：1.作用：实现数据的私有化处理2.target目标对象handler处理函数3.处理函数中有两个方法：get,set4.读取数据会触发get方法，写入数据会触发set方法Reflect（反射）1.作用：用于拦截并操作JavaScript对象的方法2.提供与Object内置方法相同功能的方法3.提供更安全的操作4.作为Proxy的默认
  • 阮一峰ES6笔记总结 china-yun JavaScript
    ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有JScript和ActionScript）。日常场合，这两个词是可以互换的。let块级作用域（局部声明，局部使用）不存在变量提升
  • 编程题 - 汽水瓶【JavaScript/Node.js解法】 幸运小圣 编程题javascriptnode.js
    ‌“学如逆水行舟，不进则退。”‌——《增广贤文》目录汽水瓶题目：解答分析：js代码解答-ACM模式：代码通过：题解分析：简洁思路代码：汽水瓶题目：某商店规定：三个空汽水瓶可以换一瓶汽水，允许向老板借空汽水瓶（但是必须要归还）。小张手上有n个空汽水瓶，她想知道自己最多可以喝到多少瓶汽水。输入描述：本题将会给出1=3){letnewBottles=Math.floor(val/3);totalBott
  • ES6学习——let和const变量 鹿蹊zz ES6-ES11javascript前端es6学习vscode
    一、ES6简介1、ES6的概念ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。2、为什么使用ES6每一次标准的诞生都意味着语言的完善，功能的加强。
  • JavaScript-V8引擎的垃圾回收 natsu-cc JavaScriptjavascript
    前言：我们知道，JavaScript之所以能在浏览器环境和NodeJS环境运行，都是因为有V8引擎在幕后保驾护航。从编译、内存分配、运行以及垃圾回收等整个过程，都离不开它。本篇主要是从V8引擎的垃圾回收机制入手，讲解一下在JavaScript代码执行的整个生命周期中V8引擎是采取怎样的垃圾回收策略来减少内存占比的。对这方面有一定的了解之后，能增强我们在写代码过程中对减少内存占用，避免内存泄漏的主观
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他