前端性能优化的方法

132 阅读2分钟

原文链接:www.cnblogs.com/xiaohuochai…

一、减少请求数量

1、合并

(1)公共库合并

(2)不同页面单独合并

2、图片处理

(1)雪碧图

(2)Base64

(3)使用字体图标来代替图片

3、减少重定向

4、使用缓存

5、不使用css  @import

6、避免使用空的src和href

二、减少资源大小

1、压缩

(1)HTML压缩

(2)css压缩

(3)JS压缩与混乱

(4)图片压缩

2、webp

3、开启gzip

三、优化网络连接

1、使用CDN

2、使用DNS预解析

3、并行连接

4、持久连接

5、管道化连接

四、优化资源加载

1、资源加载位置

2、资源加载时机

3、减少重绘回流

 4、性能更好的API



前端模块化:blog.csdn.net/miss_gl/art…

AMD、CMD、和commonJs:www.cnblogs.com/starryqian/…


1、AMD

       AMD,中文名是异步模块定义的意思,是一个在浏览器端模块化开发的规范,是RequireJS在推广过程中对模块定义的规范化的产出。

2、CMD

       CMD,中文名是同步模块定义的意思,是seaJs在推广过程中对模块规范的定义的产出。该规范明确了模块的基本书写格式和基本交互规则。

3、区别

(1)AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块;

        AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行

(2)CMD推崇就近依赖,只有在用到某个模块的时候再去require

         CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的