前端:实用性能优化技巧

什么是性能优化?

     就是在通过改进程序的结构和执行过程,使得我们能在更短的时间内,利用更少的资源来完成同样的工作。

     对于编译型语言来说,可以通过改进数据结构、算法,将中间代码转化为本地代码,缩短汇编指令(避免类型转换),读写高速缓存,控制垃圾回收等方法来提升程序性能。

     性能优化,往往提升空间是很有限的,而且需要投入相当的精力,所以除了平时养成习惯,建议将性能优化放在最后,很多情况下它都不是必须的。 

     对于,我们前端来说,性能优化,主要指的是,提升页面的加载速度,避免内存泄露,避免频繁的重绘,改进算法(尽量使用JS的原生函数)。下面我们主要讨论加载速度

页面加载速度

页面的加载,包括从请求、响应、传输、接收、解析、渲染的整个过程。我们要缩短整个过程的时间,将页面更快速的展示在用户面前。

我们分为三个部分系统的来讲,

1、服务器:

服务器上我们需要做以下几件事情,合并资源文件(JS、CSS、图标),然后压缩资源文件。若果非静态页面,还将涉及数据获取,页面缓存。我们通常的js文件目录如下

   /js

     /src

     /build

src目录中存放,源文件,build目录存放压缩后的文件,最后可以通过自动构建工具来合并请求的文件,发送给请求者。

(图片的处理请参考我前面的博客。)

数据查询这方面,不是前端的范畴,不多做讨论。

2、传输:

      传输路径和带宽是传输中最影响时间的,我们前面已经确保了传输的数据量尽可能的小,故不再考虑。

      我们应当尽可能的避免多次请求,这个过程由于上述原因可能非常的慢。

      使用cdn来优化传输路径是一个不错的选择,但是这个需要Money,后期维护也是很麻烦的,稍不注意就会出现同步问题,cdn的节点通常可能很多,遍布全国,发布一个东西是这样的,香港已生效,天津已生效,上海已生效...杭州总部已生效,发布成功,像发射航天飞船一样。

3、客户端:

      延迟加载,将不必要的请求延迟到必要的时候。很常用的是图片懒加载,瀑布流,Tab切换等。

      缩短渲染时间,一个页面对应着两颗树,DOM树,和渲染树。每一个html元素节点都会被放到DOM树上,但并非都会被放到渲染树上,不可见(display:none)的元素,没有在上面,它不需要被渲染。所以,隐藏视口外面的元素将能带来效率提升。同时,对于DOM树,我们并不需要所有页面上的DOM节点一次性加载过来,瀑布流就是很好的实践,这将大大减少DOM树的构建及渲染时间。避免浏览器做一些不必要的工作,如帮你闭合标签、计算图片高度(应当指定图片的宽高)。

       CSS3,使用它可以增强代码的灵活性,减少一些图片请求。但是,注意它是需要牺牲一些渲染性能的,同时,由于兼容性的问题我们可能需要写很多的css代码来实现效果,甚至引入外部文件来兼容低端浏览器,所以,使用它的时候,要考量一下,是否利大于弊。

时间关系,点到为止,如有不妥之处,还请各位读者不吝赐教,谢谢。

原文地址:https://www.cnblogs.com/ywb15ba/p/speed.html