Javascript速度优化

时间 2019-11-17

标签 javascript 速度优化栏目 JavaScript 繁體版

原文原文链接

Javascript速度优化css

Javascript速度优化基本原则前端

1. 择重避轻，有所取舍nginx

一般来说，系统是都是庞大的，不要太完美主义，先抓住重点，理解那些是咱们的核心页面，那些页面对咱们来讲是最重要的，那些页面访问量最高，核心优先。ajax

抓住主要问题，找到瓶颈点。治病要医本，优化前，须要进行细致的分析，抓住主要瓶颈点，对症下药。优化那么多的方子，别全采用，一般几个就能达到效果。apache

2. 简单有效才是硬道理浏览器

越是简单的东西越容易控制，越不容易出错，尽可能避免将系统设计的过于庞大，过于复杂，记住，这是在作产品，而不是在搞研发。不少看似很蠢的方法，每每越是有效。新技术，新方法的引用是具有必定的风险的，要评估，要慎重。缓存

Js处理安全

1. 尽可能放到页面尾部服务器

Js的加载时阻塞页面的，没下载完毕后面的内容不会出来，因此尽可能避免把JS放到页面头部，按照经验估计，整个页面中所用的JS逻辑，90%都是能够放到页面尾部。cookie

2. 延迟加载（按需加载）

不少的业务逻辑并不是每次都使用也不是要当即使用，首次加载过程当中仅仅加载那些必须的，只有当必要的条件触发，才去加载请求必要的JS.好比说权限验证经过，加载管理模块。点击发表文章按钮，加载与发表文章有关的验证和处理函数。

若是写过C++的确定会接触过动态库和静态库，这个与之相似，何时须要何时再加载，首次打开页面确定会清净了许多，并且业务逻辑也由此分离开来，管理和维护也会方便不少，毕竟减小了那么多的耦合。普通页面的全部业务逻辑中须要在首次请求中加载的不到50%，咱们的JS又由此砍掉了一半。

3. 合并JS，减小请求

请求多个小文件的效率远小于请求一个大文件的效率，由于须要屡次DNS解析，屡次链接，浏览器和server端也须要进行屡次开启进程、权限验证和预处理，以及 http请求在数据包传递上的一些问题。因此尽可能避免在页面中加载一堆的js 文件，须要先讲须要的小的JS合并成一个大的JS文件统一输出，页面所以被卡住的时间确定会减小不少。

为了提升开发效率，合并建议不要每次都手动来进行，致使以后维护成本很大，相信些个XML配置文件，肯定合并规则以及依赖关系后，用程序自动合并效率会高不少，文章结尾附有一个配置示例，仅做参考。

4. JS压缩

此手段属前端特有，毕竟流量意味着速度，意味着金钱。是在下降代码的可读性为前提。但事物的两面性告诉咱们，可读性差也意味着安全，并且可读性能够经过保存压缩前的源文件来解决。

所谓的压缩，就是把长的变量名换成短的变量名，去掉没用的空格和换行符，从而节省JS程序的长度，不过目前这种处理已经很成熟，经过搜索能够搜出不少相关的工具。通常能压缩50%以上，视程序与压缩工具而论。

5. 尽可能少用第三方库

在个人印象中，不少框架都是很庞大20K以上，虽然很强大很方便，但若是不是作企业级应用，尽可能不要用，由于咱们也许只可能用到其中不多的一部分功能却加载了整个框架。

不过框架中的不少方法是能够提取出来的，或者精简成一个轻量级的框架，好比说trimPath，彻底能够精简到4k。

6. 合并ajax请求

Ajax请求的数据，若是涉及请求多种数据，尽可能考虑到将其合并。

7. 合理的使用缓存

缓存视乎是server端的事，可是js中也是常常用的。一种是缓存在一个全局变量中，一些很复杂的计算和查找操做能够这样作。若是你们在使用模板类trimPath常常是须要对模板进行预处理，这种预处理的结果是能够被缓存的。这种缓存的缺点是页面刷新后数据就会失效。

另一种是缓存在window.name或cookie里面，常常用来缓存一些AJAX调用的结果，避免反复请求server端，好比一些用户的权限验证信息，就不必老是调用server端接口，缓存了也就减小了请求，提升了性能，但cookie你们要慎用，存于一些数据比较小的还行，每次http请求他是占用上行带宽的。

还有一种缓存的实现是借助于flash或其余的第三方组件，特色是能够缓存超大的数据，可是适应场景优先，须要特殊的平台支持，不过FLASH目前已经很通用了。

8. 能静态化输出，尽可能少用JS渲染输出

页面制做

1. 素材合并

尽可能把页面中的图片合并在一块儿，利用css sprite切割。这样减小了请求的次数。一般合并成3长大的图片，一张是有固定宽高的（好比说按钮），另外两张是分别横向或纵向平铺的1像素的小图，用来作背景用。

2. CSS压缩处理

道理同JS压缩，也是有不少工具实用的可用。

3. 图片背景切割与平铺

切图是颇有讲究的，不少区域能切成用1像素平铺，尽可能用1像素小图平铺，尽可能用一个较大的图片设置成背景。

4. 少用iframe和frameset

首先一点frame会阻塞页面，第二，产生额外的请求，第三，若是涉及交互，增长开发维护成本，第四对搜索引擎优化很差

5. CSS尽可能放到页面头部

浏览器只有等CSS下载完毕后，才会真正的显示页面，因此为了让页面尽快有所输出，把CSS放到头部，并且浏览器对CSS的处理时并行的，不会像JS那样会阻塞页面。

Server处理

1. 启用gzip压缩，能压缩约70%~80%。

2. js,css,图片添加过时头，让浏览器能缓存。能减小1/3以上的请求。

3. 静态页面、js、css等静态文件单独迁移。能够针对静态文件作专门优化，好比说squid反向代理，nginx代替apache作静态server。便于管理和维护，之后迁移和拓展方便。

4. js、css、图片等静态文件与当前应用放到不一样的域名下。再也不传递那些非必要的cookie，减小传输。

5. 图片服务器分多域名。浏览器对同一域名的只容许使用2个并发，若是页面图片过多，会因为并发排队从而阻塞页面。但域名也不能太多，会消耗DNS解析的时间，建议4个为佳。

JS合并配置文件示例

　　<?xml version="1.0" encoding="gb2312" ?>

　　<root>

　　</include>

　　<js>

　　</js>

</root>

常见分析与调试工具

　　IE Httpwatch

　　Firefox firebug