05.前端网络优化

163 阅读2分钟

自己随便写的一些网络优化,不喜勿喷,如有错误请多多指教。

减少http请求

1.代码合并减少体积和文件数量 前端的css代码,js代码打包合并,减少文件数量,从而减少http请求。

2.利用缓存,如果一些不怎么变化的图片可以使用强缓存或者协商缓存,不用每次访问都发请求。

3.小图标使用svg或者字体图标或者雪碧图,减少图标请求

4.base64的使用:一些复用性不高的小图片可以转成base64,减少http的请求数

5.部分数据本地缓存,可以使用localStorage,sessionStorage加载数据

6,图片懒加载,对未使用的图片懒加载

7小图片使用base64格式

减小请求的响应体大小

1.index首页html体积14kb,当用户打开网页时,收到的HTML的第一个TCP块为14kb。这是由于为平衡传输速度的TCP慢启动算法所导致。小HTML文件可帮助浏览器在接收到第一个块时开始解析。

2.对js、css等资源进行代码压缩,减少请求数与减少响应体的大小看起来是个悖论,因此我们需要进行平衡,在能充分利用浏览器并发能力的前提下进行请求数和响应体大小的平衡优化。后面的内容也会说到请求并发和响应体大小这两个问题。

3图片大小在不影响视觉体验的情况下压缩

4gzip压缩,Gzip 压缩背后的原理,是在一个文本文件中找出一些重复出现的字符串、临时替换它们,从而使整个文件变小。

其他优化

1.cdn加速,例如ui组件库,vue.js,或者一些其他体积较大的文件,就可以在打包的时候externals排除,然后script标签映入cdn资源

2dns预解析,利用dns-prefetch,使页面加载时,同步在后台进行dns的预解析

3cookie不要携带太多信息,每次请求都会携带cookie,所以cookie不要体积太大

4多域名访问静态资源,游览器对同一域名有并发限制,所以可以采用多域名存放静态资源