高性能JS--载入脚本并执行

简介:

一般现代浏览器通过侦听事件获得脚本加载完成时的状态

var  script  =  document.createElement( ' script ' );
script.type 
=   ' text/javascript ' ;
// Firefox, Chrome
script.onload  =   function (){
  alert(
' script loaded! ' );
};
script.src 
=   ' http://code.jquery.com/jquery-1.4.2.min.js ' ;
document.getElementsByTagName(
' head ' )[ 0 ].appendChild(script);
  1. ie支持另外一种方式,会触发readystatechange事件

    loading:开始下载

    complete:所有数据已准备就绪

    复制代码
    var  script  =  document.createElement( ' script ' );
    script.type 
    =   ' text/javascript ' ;
    // IE
    script.onreadystatechange  =   function (){
        
    if (script.readyState  ==   ' loaded '   ||  script.readyState  ==   ' complete ' ){
            script.onreadystatechange 
    =   null ;
            alert(
    ' Script loaded ' );
        }
    }
    script.src 
    =   ' http://code.jquery.com/jquery-1.4.2.min.js ' ;
    document.getElementsByTagName(
    ' head ' )[ 0 ].appendChild(script);
    复制代码

  2. 兼容方法

    复制代码
    /* *
    * 载入脚本
    * @param {String} url 载入的地址
    * @param {Function} callback 载入后需执行的函数
    */
    function  loadScript(url, callback){
      
    var  script  =  document.createElement( ' script ' );
      script.type 
    =   ' text/javascript ' ;
      
    // IE
       if (script.readyState){
          script.onreadystatechange 
    =   function (){
              
    if (script.readyState  ==   ' loaded '   ||  script.readyState  ==   ' complete ' ){
                  script.onreadystatechange 
    =   null ;
                  callback();
              }
          }
      } 
    else  {  // 非IE
          script.onload  =   function (){
              callback();
          }
      }
      script.src 
    =   null ;
      document.getElementsByTagName(
    ' head ' )[ 0 ].appendChild(script);
    }
    // example
    loadScript( ' http://code.jquery.com/jquery-1.4.2.min.js ' function (){
      alert(
    ' File is loaded! ' );
    })
    复制代码

  3. XMLRequest脚本注入

    复制代码
    var  xhr  =   new  XMLHttpRequest();
    xhr.open(
    ' get ' ' http://code.jquery.com/jquery-1.4.2.min.js ' true );
    xhr.onreadystatechange 
    =   function (){
        
    if (xhr.readySate  ==   4 ){
            
    if (xhr.status  >=   200   &&  shr.status  <   300   ||  xhr.status  ==   304 ){  // 200 有效响应; 304 从缓存读取
                 var  script  =  document.createElement( ' script ' );
                script.type 
    =   ' text/javascript ' ;
                script.text 
    =  xhr.responseText;
                document.body.appendChild(script);
            }
        }
    };
    xhr.send(
    null );
    复制代码




本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/archive/2011/06/19/2084578.html,如需转载请自行联系原作者
目录
相关文章
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
235 0
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
JavaScript Shell C#
多种脚本批量下载 Docker 镜像:Shell、PowerShell、Node.js 和 C#
本项目提供多种脚本(Shell、PowerShell、Node.js 和 C#)用于批量下载 Docker 镜像。配置文件 `docker-images.txt` 列出需要下载的镜像及其标签。各脚本首先检查 Docker 是否安装,接着读取配置文件并逐行处理,跳过空行和注释行,提取镜像名称和标签,调用 `docker pull` 命令下载镜像,并输出下载结果。使用时需创建配置文件并运行相应脚本。C# 版本需安装 .NET 8 runtime。
1161 3
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
344 5
在浏览器执行js脚本的两种方式
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
JavaScript 前端开发 NoSQL
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
【5月更文挑战第11天】MongoDB 的 JavaScript 引擎允许在服务器端直接执行脚本,提升效率并实现定制化操作。脚本环境提供独立但与数据库关联的运行空间,引擎负责脚本的解析、编译和执行。执行过程包括脚本提交、解析、编译和执行四个步骤。掌握脚本逻辑设计和 JavaScript 语言特性对于高效利用这一功能至关重要。例如,通过脚本可以计算商品总销售额,增强数据库操作的灵活性。
423 1
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
|
JavaScript 前端开发
用JavaScript脚本将当地时间转换成其它时区
用JavaScript脚本将当地时间转换成其它时区
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
710 4
|
JavaScript 前端开发
Playwright执行 JavaScript 脚本:探索浏览器自动化的新境界
在Web自动化中,Playwright提供`page.evaluate()`和`page.evaluate_handle()`来执行JavaScript脚本。`page.evaluate()`返回脚本执行结果,而`page.evaluate_handle()`返回JSHandle。示例展示了如何使用它们,如打印网页标题、操作元素及获取页面内容。通过这些方法,可以处理常规方法难以操作的网页元素。

热门文章

最新文章