服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - PHP教程 - JS 网站性能优化笔记

JS 网站性能优化笔记

2019-11-26 13:57PHP教程网 PHP教程

JS 网站性能优化笔记,使用下面的方法有利于提高代码的执行效率。

1. 除去JavaScript注释

除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义。

2. 除去JavaScript中的空白区域

如:x = x + 1;  可以简短得写成:x=x+1;  。

3. 进行代码优化

简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化,例如:

x=x+1;

可以写成:

x++;

不过得小心谨慎,不然代码很容易出错。

4. 重命名用户自定义的变量和函数

为了阅读方便,我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。不过,考虑到下载的速度,sumTotal这个变量就显得冗长了。这个长度对于最终使用者来说没有意义,但对浏览器下载则是个负担。这个时候s就成为较好的选择了。先写好方便阅读的代码,然后再使用一些工具来处理以供交付。这种处理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母来命名将带来显著的改善。

5. 改写内建(built-in)对象

长长用户变量名会造成JavaScript代码过长,除此之外,内建(built-in)对象(比如Window、Document、Navigator等)也是原因之一。例如:

alert(window.navigator.appName);
alert(window.navigator.appVersion);
alert(window.navigator.userAgent);

可以改写成如下简短的代码:

w=window;n=w.navigator;a=alert;
a(n.appName);
a(n.appVersion);
a(n.userAgent);

如果这几个对象使用频繁的话,这样改写带来的好处就不言而喻了。事实上这些对象也的确经常被调用。然而我要提醒的是,如果Window或 Navigator对象仅仅被使用了一次的话,这样的替换反而使代码变得更长。这个技巧带来一个对象更名后脚本执行效率的问题:除了代码长短上带来的好处,这种改写更名实际上还会稍微的提高一点脚本执行的速度,因为这些对象将会被放在所有被调用对象中比较靠前的位置。JavaScript游戏开发程序员使用这个技巧已经有多年了,下载和执行速度都会有所提高,并且对本地浏览器的内存花销也会降低,可谓一石三鸟。

6. 重构<script>和<style> 调用方式来优化请求次数

我们常常在一个HTML文件头中看到这样标记代码:

<script src="/scripts/rollovers.js"></script>
<script src="/scripts/validation.js"></script>
<script src="/scripts/tracking.js"></script>

大多数情况下,上述代码应该被简化成:

<script src="/0/g.js"></script>

其中g.js包含了所有供全局使用的函数。虽然把脚本文件分成三份对于维护来说是有道理的,但对于代码的传输则没有意义。单个的脚本下载要比三个分离的请求高效的多,并且这也同时简化了markup代码的长度。

7. 合并你的javascript文件

尽可能的减少HTTP的Request请求数。

8. 将脚本放到网页底部

脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

延伸 · 阅读

精彩推荐
  • PHP教程php 可变函数使用小结

    php 可变函数使用小结

    PHP 支持可变函数的概念。这意味着如果一个变量名后有圆括号,PHP 将寻找与变量的值同名的函数,并且尝试执行它。本文重点给大家介绍php 可变函数使用...

    烟熏妆5202019-09-27
  • PHP教程thinkphp 抓取网站的内容并且保存到本地的实例详解

    thinkphp 抓取网站的内容并且保存到本地的实例详解

    这篇文章主要介绍了thinkphp 抓取网站的内容并且保存到本地的实例详解的相关资料,需要的朋友可以参考下...

    modou9442021-06-21
  • PHP教程教你如何开启shopnc b2b2c 伪静态

    教你如何开启shopnc b2b2c 伪静态

    最近要给一个shopnc网站开启伪静态,用的是shopnc b2b2c,在网上搜索了好多shopnc开启伪静态的方法,但都是针对shaopnc c2c的,没有关于shopnc b2b2c的,最后终于...

    PHP开发实例3962020-08-01
  • PHP教程简单实现PHP留言板功能

    简单实现PHP留言板功能

    这篇文章主要教大家如何简单实现PHP留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    尘中客10282021-04-08
  • PHP教程全面了解PHP中的全局变量

    全面了解PHP中的全局变量

    下面小编就为大家带来一篇全面了解PHP中的全局变量。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    PHP教程网6992021-01-28
  • PHP教程PHP中empty,isset,is_null用法和区别

    PHP中empty,isset,is_null用法和区别

    最近在阅读项目的源码,发现源码中就对empty、isset和is_null函数(语言特性)乱用,有的地方很明显的就挖坑了。不能正确的去理解这些东西,就很可能给...

    PHP教程网11562021-04-25
  • PHP教程php设计模式之单例模式实例分析

    php设计模式之单例模式实例分析

    这篇文章主要介绍了php设计模式之单例模式,实例分析了单例模式的原理与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    蓝祖生5392020-09-06
  • PHP教程如何使用PHP批量去除文件UTF8 BOM信息

    如何使用PHP批量去除文件UTF8 BOM信息

    如果PHP文件头部包含BOM信息,就会输出一个空白,在很多时候会带来问题,比如我们session无法工作、cookie无法设置等等问题 ...

    PHP教程网3922020-05-13