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服务器上怎样优化才能提高 ...
随机推荐
- 【转】用PowerDesigner对现有的数据库反向工程建立E-R图
转自:http://www.cnblogs.com/oceanshare/archive/2010/02/10/1667071.html 由于早期的一个项目在数据库设计建立时没有输出为E-R图,偶在对 ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- BZOJ3689 异或之
我们需要知道一个事实,trie树上是可以要求第k大的! 我们每个节点记个size值然后像其他数据结构一样维护就可以了 然后我们再搞个priority_queue什么的就好了,注意每个值会出现两次只要记 ...
- <context:annotation-config> 和 <context:component-scan>的差别
<context:annotation-config> is used to activate annotations in beans already registered in the ...
- ORACLE 建库过程总结
1,忘记sys密码 打开CMD命令窗口,执行以下操作: ,SQLPLUS /NOLOG; , ,CONNECT / AS SYSDBA , ,ALTER USER SYS IDENTIFIED BY ...
- 转载——PLSQL developer 连接不上64位Oracle 解决办法
前两天刚下载了oracle 11g 64位的最新版本,安装成功之后,再安装PLSQL.结果使用PLSQL访问数据库时,死活连接不上.报错如下: Could not load "……\bin\ ...
- 为什么你总是学不好Linux技术？这是我的答案。
摘要: 我们为什么要学习Linux,最近几年Linux发展迅速,特别服务器领域,带来了很多新技术,云计算,虚拟化,大数据等技术,还有安全方面都有了很大的发展同时也给了Linux运维工作带来了,更多的要 ...
- HDU 2181 哈密顿绕行世界问题 dfs 难度:1
http://acm.hdu.edu.cn/showproblem.php?pid=2181 只有20个城市,而且每个点的度数恰好是3,也就意味着,对于即将进入环中的点,入度1,出度2,下一个点只有两 ...
- hdu 4638 Group
http://acm.hdu.edu.cn/showproblem.php?pid=4638 问题其实就是求[L,R]中有多少个连续的段 若每一个人都是一个段 那么[L,R]中每一个朋友关系就会减少一 ...
- DatagridView的CellLeave光标离开响应事件，实现某列数字自动求和
//光标离开DatagridView,循环获取DatagridView的每一行的第3列的值,相加传给重量 private void dgpz_dataGridView_CellLeave(object ...