页面性能优化的方法

在互联网中有一条著名的8秒原则,用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果下载需要太长时间,他们就会放弃访问。如果访问时间减少会提高用户的访问量,网页的性能优化就是必不可少的。

在这里插入图片描述

文件的压缩

主要包括:html 压缩、 css压缩、 js压缩以及文件的合并

html压缩

HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。
单个案例压缩html效果可能体现不出来,对于一些大公司而言效果就会体现出来。

google访问流量每年都特别高,如果google每1MB请求减少一个字节,每年可以节省流量将近500TB

html压缩方法:
1、使用在线网站进行压缩(开发时一般不用)
2、使用nodejs提供的html-minifier
3、后端模板引擎渲染压缩

css压缩

无效代码删除和css语义合并

css压缩的方法
1、使用在线网站进行压缩
2、使用html-minifier对html中css进行压缩
3、使用clean-css对css进行压缩

js压缩

无效字符的删除、剔除注释、代码语义的缩减和优化、代码保护(防止代码混乱)

js压缩的方法
1、使用在线网站进行压缩
2、使用html-minifier对html中的js进行压缩
3、使用uglifyjs2对js进行压缩

图片的压缩

1、采用icon:将多张小图放在一张大图上减少http请求次数。
2、尽量使用字体图标库来代替小图片
3、不透明的图片使用jpg :(尺寸小,节省空间,打开速度快)

文件合并

文件不合并的劣势

1、http请求次数多,http的响应时间累加更长,出现网络延迟。
2、文件丢失的可能性很大,(丢包)。
3、keep-alive的请求问题,就是经过代理服务器时可能会被断开,那么又要重新握手连接。

文件合并问题

1、首屏渲染:因为js被压缩导致第一次加载会很慢,例如先加载完框架后才进行页面渲染。
2、缓存失效:浏览器一般会缓存js,之前js分开 只要其中一个js发生改变,重新获取被改变的js就可以了。现在js被压缩,如果一个js被改变,压缩的js就要被重新获取。
解决问题
1、公共库合并:将所有公共的方法打包在一起
2、不同页面的合并:对于单页应用,在页面开始只请求当前页面的js文件

合并的方法
1、使用在线网站进行合并
2、使用nodejs实现文件合并(gulp)

发布了11 篇原创文章 · 获赞 12 · 访问量 465

猜你喜欢

转载自blog.csdn.net/weixin_45481771/article/details/102648032
今日推荐