js优化提升访问速度
一、给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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="loadjscssfile.js"></script>
6 <title>无标题文档</title>
7 </head>
8 <body>
9 </body>
10 </html>
二 动态加载js文件的程序 loadjscssfile.js
// JavaScript Document
function loadjscssfile(filename,filetype){ if(filetype == "js"){
var fileref = document.createElement('script');
fileref.setAttribute("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("do.js","js");
loadjscssfile("test.css","css");
三 被加载的 js文件：do.js
alert("this is do");
四 被加载的 css文件：test.css （css文件中还可以用@import url("menu.css"); 引进其他css文件）
@charset "utf-8";
@import url("menu.css");
@import url("../gundong.css");
body{
background-color:gray;
}
理论分析：
原理解析：第一步：使用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){ |
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优化提升访问速度的更多相关文章
- COCOS2DX 3.0 优化提升渲染速度 Auto-batching
COCOS2DX 3.0 优化提升渲染速度 Auto-batching 近期在看COCOS2DX 3.0的Auto-batching合批与Auto Culling动态缩减功能以下就来细致看看吧:整合好 ...
- 使用phpQuery进行采集数据，模拟curl提升访问速度
使用php采集网页数据一般有多种方法,有时候会使用正则去采集页面,但是当我们需要采集的页面大并且多的话,会严重的浪费我们的cpu,这时候我们可以使用phpQuer来进行采集,不知道phpQuery的童 ...
- 优化hexo访问速度-将hexo部署到云主机VPS
写在开始 一开始将自己hexo部署到github,结果发现打开页面速度有点慢,然后又将其同时部署到coding,实现双线路访问,国内解析记录到coding,国外解析到github,这样确实网站的速度能 ...
- Java动态编译优化——提升编译速度（N倍）
一.前言 最近一直在研究Java8 的动态编译, 并且也被ZipFileIndex$Entry 内存泄漏所困扰,在无意中,看到一个第三方插件的动态编译.并且编译速度是原来的2-3倍.原本打算直接用这个 ...
- [技巧篇]00.TrimFilter去掉jsp页面空白，提升访问速度
最近感觉项目访问的速度有点慢,我就在网络中一顿搜索,发下了一个好东东,忍不住跟大家分享,希望大家可以试一试,确实有提升的空间啊!要求去除空白区.提取公用代码.减小页面. 胖先生乱搜之下,找到了Trim ...
- 2-12-配置squid代理服务器加快网站访问速度
本节所讲内容: squid服务器常见概念 squid服务器安装及相关配置文件 实战:配置squid正向代理服务器 实战:配置透明squid代理提升访问速度 实战:配置squid反向代理加速度内网web ...
- 如何提高redmine的访问速度
刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...
- Redis+Caffeine两级缓存，让访问速度纵享丝滑
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 在高性能的服务架构设计中,缓存是一个不可或缺的环节.在实际的项目中,我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中, ...
- 提升Apache网站访问速度的优化方法
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 在Apache服务器上怎样优化才能提高 ...
随机推荐
- Objective-C：Foundation框架-常用类-NSNull
集合中是不能存储nil值的,因为nil在集合中有特殊含义,但有时确实需要存储一个表示“什么都没有”的值,那么可以使用NSNull,它也是NSObject的一个子类. #import <Found ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- 检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 8000401a 因为配置标识不正确，系统无法开始服务器进程。请检查用户名和密码。 (异常来自 HRESULT:0x8000401A)。
检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 8000401a 因为配置标识不正确,系统无法开 ...
- linux下xampp集成包安装配置方法
1.查看你linux系统的位数,是32位的还是64位的.使用uname -a命令查看. 显示有 x86_64则说明你是64位内核, 跑的是64位的系统. i386, i686说明你是32位的内核, 跑 ...
- Deep Learning 初识
实际生活中,人们为了解决一个问题,如对象的分类(对象可是是文档.图像等),首先必须做的事情是如何来表达一个对象,即必须抽取一些特征来表示一个对象,如文本的处理中,常常用词**来表示一个文档,或把文档表 ...
- Java中的深拷贝和浅拷贝
1．浅拷贝与深拷贝概念 (1)浅拷贝(浅克隆) 浅拷贝又叫浅复制,将对象中的所有字段复制到新的对象(副本)中.其中,值类型字段(java中8中原始类型)的值被复制到副本中后,在副本中的修改不会影响到源 ...
- py零散知识点
变量之间的赋值是公用一个地址比如 a = 3 b = a b和a用的是一个地址 在Python中 b = a.copy() a和b就不是一个地址了 -------------------------- ...
- 数据结构-AVL树的旋转
http://blog.csdn.net/GabrieL1026/article/details/6311339 平衡二叉树在进行插入操作的时候可能出现不平衡的情况,AVL树即是一种自平衡的二叉树,它 ...
- hdu 1030 Delta-wave (C++, 0ms, explanatory comments.) 分类： hdoj 2015-06-15 12:21 45人阅读 评论(0) 收藏
problem description http://acm.hdu.edu.cn/showproblem.php?pid=1030 #include <cstdio> #include ...
- sql 给数据库表 字段 添加注释
最近发现一些代码生成器 有针对注释做一个很好的转化,之前建表的时候 没有这块的注释.现在想增加,专门去看了下 如何增加注释 1 -- 表加注释 2 EXEC sys.sp_addextendedpro ...