javascript代码加载优化方法

下面我们通过这个例子介绍1个更简单的方法:

我们用将统计代码保存到1个文件:文件路径:/config/counter.conf

统计代码如下:


代码如下:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18744406-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga,s);
})();

</script>

我们用StreamReader将文件内容读出来,代码将不详细列出

我们需要一个页面来输出这段javascript代码:

页面:/do.ashx?args=GetCounter


代码如下:

string code = "读取到的统计代码";
code = Regex.Replace(code, "[\']","\"");
code = Regex.Replace(code, "[\n\r]", "");
context.Response.Write("document.write('"+code+"');");

这样就能将输出的javascript添加到页面实现统计功能了!

我们只需在网页都引用的javascript文件中添加如下代码:


代码如下:

var _s=document.createElement('script');
_s.type='text/javascript';
_s.src='/do.ashx?args=GetCounter';
var _fs=document.getElementsByTagName("script")[0];
_fs.parentNode.insertBefore(_s,_fs);

大功告成,统计代码不会显示在你的网页中,但事实上却已经加载到了你的网页！

赞 (0)

相关推荐

  • JavaScript优化专题之Loading and Execution加载和运行

    JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题.此问题因JavaScript的阻塞特征而复杂,也就是说,当JavaScript 运行时其他的事情不能被浏览器处理.事实上,大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务,而同一时间只能有一个任务被执行. JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不

  • 优化Node.js Web应用运行速度的10个技巧

    Node.js 受益于它的事件驱动和异步的特征,已经很快了.但是,在现代网络中只是快是不行的.如果你打算用 Node.js 开发你的下一个Web 应用的话,那么你就应该无所不用其极,让你的应用更快,异常的快.本文将介绍 10 条,经过检验得知可大大提高 Node 应用的技巧.废话不多说,让我们逐条来看看. 1. 并行 创建 Web 应用的时候,你可能要多次调用内部 API 来获取各种数据.比如说,假设在 Dashboard 页面上,你要执行下面这几个调用: 用户信息 -getUserProfil

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • Extjs优化(一)删除冗余代码提高运行速度

    Extjs 本身是一个加载慢的JS框架,这个需要程序员的多去优化,之前说过了JS的打包的优化 这次来写写怎么减少冗余代码,也是提高运行速度,包含了1.删除代码通用2.提交表单通用3.初始化Gird通用化 本次只写 删除代码优化 先贴出代码 复制代码 代码如下: /** * 获取个GridPanel的选择的记录 */ function $getGdSelectedIds(grid, idName) { var selRs = grid.getSelectionModel().getSelectio

  • 关于Javascript加载执行优化的研究报告

    关于Javascript加载执行优化的研究报告

    本人做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Def

  • JavaScript中的无阻塞加载性能优化方案

    JavaScript中的无阻塞加载性能优化方案

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行.Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不论实际的 JavaScript 代码是内

  • javascript代码加载优化方法

    下面我们通过这个例子介绍1个更简单的方法: 我们用将统计代码保存到1个文件:文件路径:/config/counter.conf 统计代码如下: 复制代码 代码如下: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744406-1']); _gaq.push(['_trackPageview']); (function() { var ga = do

  • 详解JavaScript两个实用的图片懒加载优化方法

    详解JavaScript两个实用的图片懒加载优化方法

    目录 一.方法一 二.方法二 InterSectionObserver 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li> &

  • javascript 动态加载 css 方法总结

    1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

  • 学习javascript文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • javascript实现iframe框架延时加载的方法

    本文实例讲述了javascript实现iframe框架延时加载的方法.分享给大家供大家参考.具体实现方法如下: 有的时候我们希望页面的一些东西实现延时加载,这样可以不影响网站打开速度,下面我来给大家介绍javascript实现iframe框架延时加载方法吧. 需要加载区域HTML代码: 复制代码 代码如下: <div id="indexlogin"></div> 下面代码放在底部 复制代码 代码如下: <span id="tmpjsnews&qu

  • 利用CSS、JavaScript及Ajax实现图片预加载的方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • 原生javaScript实现图片延时加载的方法

    本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:

  • JavaScript实现图片懒加载的方法分析

    本文实例讲述了JavaScript实现图片懒加载的方法.分享给大家供大家参考,具体如下: 懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载. 我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中. HTML代码 <div class="container"> <div clas

随机推荐