一、给JS文件减肥。

有的人为了给网站增加炫目效果，往往会使用一些JS效果代码，这在上个世纪似乎还很流行，对于现在来说，最好在用户体验确实需要的情况下，使用这些东西。至于希望给自己的JS文件减肥的童鞋，网上的工具里有很多，在百度一搜就会有应用，功能很全。把一个已经完善的JS文件进行压缩是主流网站的一个惯性动作，因为压缩量确实很可观。以下是几个比较好的压缩工具：

YUI压缩工具 (http://developer.yahoo.com/yui/compressor/)
Dean Edwards Packer (http://dean.edwards.name/packer/)
JSMin (http://crockford.com/JavaScript/jsmin)

二、尽量减少DOM访问

使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。这是改用HTML5、舍弃那些原来的XHTML和HTML4的一个充分理由。

三、使用适当的CDN

现在许多网页使用内容分发网络(CDN)。它可以改进你的缓存机制，因为每个人都可以使用它。它还能为你节省一些带宽。你很容易使用ping检测或使用Firebug调试那些服务器，以便搞清可以从哪些方面加快数据的速度。选择CDN时，要照顾到你网站那些访客的位置。记得尽可能使用公共存储库。

四、把不着急用的JS文件放到页面的底部

当更多地考虑用户对网站的速度体验时，在页面底部装入JS文件是一个非常好的做法。易用性和用户放在首位，JavaScript放在末位。对于追求技术的很多前端人员来说，这似乎很难接受，但也应该有所准备，有些用户会禁用JavaScript。

五、在头部以异步方式装入JS

为了统计网站的各种信息，我们通常会借助网上提供的免费统计功能，比如cnzz的统计，比如google分析，比如百度统计，关键的是，好多统计为了保证统计效果，可能会建议用户将统计代码放在页面的头部。如果用户选择这么做，可能会在统计代码请求数据不稳定时给他的网站用户带来非常不好的体验。不过，目前大部分统计服务都允许你以异步方式载入放在头部的JS文件，在很大程度上解决了这一问题。

六、把你的JavaScript打包成PNG文件

这个办法是最近在网上看到老外的一种做法，思维很特别，还没有尝试过，有兴趣的朋友可以尝试一下。具体是这样：把你的JS和CSS添加到图片的末尾，然后用CSS来裁切，通过一次HTTP请求来获得应用程序中所需的所有信息，它把你的JavaScript/css数据打包成PNG文件，然后你还可以拆包，只要使用画布API的getImageData()。这种方法效率非常高，可以在不缩小数据的情况下，多压缩35%左右。

JS动态加载JS与CSS文件

 

DEMO

一 HTML页面   jsforjscss.html

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  5 <script type="text/javascript" src="loadjscssfile.js"></script>
  6.  6 <title>无标题文档</title>
  7.  7 </head>
  8.  8 <body>
  9.  9 </body>
  10. 10 </html>

二 动态加载js文件的程序   loadjscssfile.js

  1. // JavaScript Document
  2. function loadjscssfile(filename,filetype){
  3.  
  4.     if(filetype == "js"){
  5.         var fileref = document.createElement('script');
  6.         fileref.setAttribute("type","text/javascript");
  7.         fileref.setAttribute("src",filename);
  8.     }else if(filetype == "css"){
  9.  
  10.         var fileref = document.createElement('link');
  11.         fileref.setAttribute("rel","stylesheet");
  12.         fileref.setAttribute("type","text/css");
  13.         fileref.setAttribute("href",filename);
  14.     }
  15.    if(typeof fileref != "undefined"){
  16.         document.getElementsByTagName("head")[0].appendChild(fileref);
  17.     }
  18.  
  19. }
  20. loadjscssfile("do.js","js");
  21. loadjscssfile("test.css","css");

三 被加载的 js文件：do.js

  1. alert("this is do");

四 被加载的 css文件：test.css （css文件中还可以用@import url("menu.css"); 引进其他css文件）

  1. @charset "utf-8";
  2. @import url("menu.css");
  3. @import url("../gundong.css");
  4. body{
  5.     background-color:gray;
  6. }

理论分析：

原理解析：第一步：使用dom创建<script>或者<link>标签，并给他们附加属性，如type等第二步：使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>.

应用：1、提高代码的复用，减少代码量；2、添加一个javascript控制器和 session可以实现动态改变页面样式；3、由于是页面是从上到下依次加载文件的，并且边加载边解释，所以可以添加javascript控制器控制页面文件的加载顺序，如先加载css布局文件，再显示有图片的css美化文件,之后再加载大的falsh文件，或者安内容的重要性来加载。r

阅读提示：e文不好的初学者可以直接看中文，然后拷贝代码试验下。r

To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "script" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //判定文件类型
var fileref=document.createElement('script')//创建标签
fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
}
else if (filetype=="css"){ //判定文件类型
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //打开页面时浏览器动态的加载文件
loadjscssfile("javascript.php", "js") // 打开页面时浏览器动态的加载"javascript.php" ，
loadjscssfile("mystyle.css", "css") //打开页面时浏览器动态的加载.css 文件

接下来的工作是绑定到<head>标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次，绑定两次浏览器也不会出现异常，但是效率就低了。为了避免r

这种情况我们可以新增一个全局数组变量，把绑定的文件名字保存在里面，每次绑定前先检查一下是否已经存在，假如存在就提示已经存在，假如不存在就绑定。r

document.getElementsByTagName("head")[0].appendChild(fileref)

By referencing the HEAD element of the page first and then calling appendChild(), this means the newly created element is added to the very end of the HEAD tag. Furthermore, you should be aware that no existing element is harmed in the adding of the new element- that is to say, if you call loadjscssfile("myscript.js", "js") twice, you now end up with two new "script" elements both pointing to the same Javascript file. This is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile(), and only load a file if it's new:

By referencing the HEAD element of the page first and then calling appendChild(), this means the newly created element is added to the very end of the HEAD tag. Furthermore, you should be aware that no existing element is harmed in the adding of the new element- that is to say, if you call loadjscssfile("myscript.js", "js") twice, you now end up with two new "script" elements both pointing to the same Javascript file. This is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile(), and only load a file if it's new:

Here I'm just crudely detecting to see if a file that's set to be added already exists within a list of added files' names stored in variable filesadded before deciding whether to proceed or not.
Ok, moving on, sometimes the situation may require that you actually remove or replace an added .js or .css file. Lets see how that's done next.

js优化提升访问速度的更多相关文章

  1. COCOS2DX 3.0 优化提升渲染速度 Auto-batching

    COCOS2DX 3.0 优化提升渲染速度 Auto-batching 近期在看COCOS2DX 3.0的Auto-batching合批与Auto Culling动态缩减功能以下就来细致看看吧:整合好 ...

  2. 使用phpQuery进行采集数据，模拟curl提升访问速度

    使用php采集网页数据一般有多种方法,有时候会使用正则去采集页面,但是当我们需要采集的页面大并且多的话,会严重的浪费我们的cpu,这时候我们可以使用phpQuer来进行采集,不知道phpQuery的童 ...

  3. 优化hexo访问速度-将hexo部署到云主机VPS

    写在开始 一开始将自己hexo部署到github,结果发现打开页面速度有点慢,然后又将其同时部署到coding,实现双线路访问,国内解析记录到coding,国外解析到github,这样确实网站的速度能 ...

  4. Java动态编译优化——提升编译速度（N倍）

    一.前言 最近一直在研究Java8 的动态编译, 并且也被ZipFileIndex$Entry 内存泄漏所困扰,在无意中,看到一个第三方插件的动态编译.并且编译速度是原来的2-3倍.原本打算直接用这个 ...

  5. [技巧篇]00.TrimFilter去掉jsp页面空白，提升访问速度

    最近感觉项目访问的速度有点慢,我就在网络中一顿搜索,发下了一个好东东,忍不住跟大家分享,希望大家可以试一试,确实有提升的空间啊!要求去除空白区.提取公用代码.减小页面. 胖先生乱搜之下,找到了Trim ...

  6. 2-12-配置squid代理服务器加快网站访问速度

    本节所讲内容: squid服务器常见概念 squid服务器安装及相关配置文件 实战:配置squid正向代理服务器 实战:配置透明squid代理提升访问速度 实战:配置squid反向代理加速度内网web ...

  7. 如何提高redmine的访问速度

    刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...

  8. Redis+Caffeine两级缓存，让访问速度纵享丝滑

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 在高性能的服务架构设计中,缓存是一个不可或缺的环节.在实际的项目中,我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中, ...

  9. 提升Apache网站访问速度的优化方法

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 在Apache服务器上怎样优化才能提高 ...

随机推荐

  1. IKAnalyzer进行中文分词和去停用词

    最近学习主题模型pLSA.LDA,就想拿来试试中文.首先就是找文本进行切词.去停用词等预处理,这里我找了开源工具IKAnalyzer2012,下载地址:(:(注意:这里尽量下载最新版本,我这里用的IK ...

  2. 镜像渐变-radio-gradient

    2013年11月15日13:08:37   <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"&g ...

  3. echart饼状图的学习

    一.引入js文件 <!--Step:1 引入一个模块加载器,如esl.js或者require.js--> <script src="~/Scripts/esl.js&quo ...

  4. SQL Server之字符串函数

    以下所有例子均Studnet表为例:   计算字符串长度len()用来计算字符串的长度 select sname ,len(sname) from student 字符串转换为大.小写lower() ...

  5. spring mvc表单自动装入实体对象

    <form action="/springmvc1/user/add" method="post"> id: <input type=&quo ...

  6. sql删除多余重复的数据只保留一条

    delete from people where   peopleName in (select peopleName    from people group by peopleName      ...

  7. hdu 4631 Sad Love Story

    http://acm.hdu.edu.cn/showproblem.php?pid=4631 没想到这道题需要用“平均时间复杂度” 计算   一直没有想到解法  因为不符考虑了最坏情况的理念 方法一: ...

  8. SG函数 模板

    int get_SG(int x) { ) return SG[x]; ]={}; ;i<=n;i++) ) v[get_SG(x-s[i])]=; int i; ;v[i];i++); SG[ ...

  9. checkbox全选功能

    $("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(&quo ...

  10. 走进AngularJs(七) 过滤器（filter） - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...