认识达内从这里开始

web前端性能优化是每一位软件开发程序员都在关注的一个问题，而本文我们就给大家简单分享一下，常见的web前端性能优化方法。

1、对资源进行缓存

缓存在优化页面加载性能的工作中有举足轻重的作用，缓存无处不在，包括浏览器端、网络代理、服务端缓存，往往能大幅加快响应速度。

2、CDN

现代浏览器都实现了HTTP缓存机制。浏览器在初次获取资源后，会根据HTTP响应头部的Cache-Control和ETag字段，来决定该资源的强缓存策略或者协商缓存策略。

LocalStorage主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。

CacheStorage它用来存储Response对象的，也就是说用来对HTTP响应做缓存的，通常在PWA技术中使用。

IndexedDB是一种在浏览器中持久存储数据的方法，允许我们不考虑网络可用性，创建具有丰富查询能力的可离线web应用程序。

内容缓存在CDN网络节点，位于用户接入点，是面向终用户的内容提供设备，可缓存静态Web内容和流媒体内容，实现内容的边缘传播和存储，以便用户的就近访问。

3、调整资源优先级

通过调整资源加载优先级，保证主体内容能够较快的被加载完成，通过预加载、懒加载等多种方式，调整资源加载的行为，优化网页加载性能。

通过来提前声明当前页面所需的资源，以便浏览器能预加载这些资源。通过media属性进行媒体查询，根据响应式的情况选择性地预加载资源。

预连接会提前完成DNS解析、TCP握手和TLS协商的工作，但并不会提前加载资源。也可以考虑使用，提前与资源建立socket连接。

浏览器会在空闲时，使用低优先级下载预取的资源。预取通过声明，通常用于点击“下一页”的页面动作之前提前加载用户接下来可能需要的html资源。

按需加载和延时加载都属于懒加载的范畴，例如对图像资源采用“懒加载”策略，即仅加载当前在视口内的图像，对于视口外未加载的图像，在其即将滚动进入视口时才开始加载。

利用ServiceWorker线程脱离在主线程之外来进行Web资源和请求的持久离线缓存。

4、合理拆分代码

浏览器支持并行加载资源，合理拆分资源也是一种有效的优化方法。为了更好的效果，我们往往不需要在屏一次性加载所有JavaScript代码，合理的拆分代码、区分开发和生产环境使用少量主要代码，将当前暂时不需要的代码拆分出去可以有效加快屏展现的速度。通过webpack区分开发环境和生产环境差异化配置打包资源可以有效优化代码，Treeshaking使得模块间依赖可以通过静态分析来更好地优化剪枝(仅ESmodules支持)。webpack-bundle-analyzer是一个关于webpack构建产物的可视化插件，可以清晰地看到构建产物的体积，帮助分析后续的优化方向。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。