认识达内从这里开始

认真做教育专心促就业

南昌达内培训机构web前端优化常用方法都有哪些

发布：南昌达内IT培训
来源：互联网
时间：2022-11-04 10:46

web前端编程开发随着互联网的不断发展而被越来越多的程序员掌握，而本文我们就通过案例分析来简单了解一下，web前端优化常用方法都有哪些。

南昌达内培训机构web前端优化常用方法都有哪些

1、模板渲染的优化

我们在实际使用过程中，发现模板的渲染是十分消耗性能的，特别的模板的预处理过程，如果预处理过程是在用户访问过程中去处理，会慢不止一个数量级，所以我们把预处理的过程提前了(改造了hbs)，在启动web应用时，已经预编译完成。同时我们发现handlebars的一些默认配置属性，如缩减处理，在字符串拼接过程中会损耗一定的性能，所以可以关闭html片段的缩减。

2、nginx的优化

启用pagecache使用了nginx的proxy_cache模块，配置了一些缓存机制，不同页面路由的缓存时长会读取node服务在http头里面返回的max-age时间。

另外要注意一个设置nginx缓存的时候，如果有服务端设置cookies的情况下，并且以服务端cookies的值作为标识用户会话信息，不要设置proxy_ignore_headers"Set-Cookie";，不然缓存会导致会话信息窜读的情况。

3、全站HTTPS

为什么要上全站https呢，这个主要考虑到https可以防止中间人攻击以及内容劫持，提高网站的访问安全性。但是因为多了SSL/TLS的服务端和浏览器端的处理,在性能方面也会有相应的下降，但是我们同时也启用HTTP/2，而主要的特性：多路复用(Multiplexing)多路复用允许同时通过单一的HTTP/2连接发起多重的请求-响应消息。另外PWA里面的serviceworker也是必须要求网站的协议是https的，同时也是为了这个做了铺垫，HTTPS是现代WEB的发展趋势。至于PWA不是本文讨论的重点，可以在后续其他的主题展开。

4、浏览器端优化

移动终端五花八门，导致过重的浏览器的处理和效果，会导致体验的不一致，特别是安卓手机，所以我们在浏览器端的策略是，尽量轻量化网页，当前页面只处理当前必要的内容多页面的方式。这个和现在google提出的开源项目AMP是一个思路。

5、图片优化

图片质量和体积控制对于移动终端来说，分辨率相当于桌面会小很多，会降低图片的分辨率，以及图片的DPI值，二步会降低图片的质量，以保证图片的体积变小。

提高CDN缓存命中，一，减少缩略图的尺寸规格，二，尽量和其他端的图片规格保持一致，如APP端，小程序。

WEBP的运用webp不是所有的浏览器都支持，所以，我们的做法是对于需要js加载的图片，进行webp的判断，如果支持，就是直接加载webp的格式图片，如果不支持，采用默认的jpg的格式。

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

< 上一篇：南昌达内计算机培训web端性能优化都有哪些常用方法

下一篇：南昌达内培训35岁以上程序员都有哪些职业发展方向 >