当前位置: 首页 > Web前端 > CSS

前端优化

时间:2023-03-30 19:21:05 CSS

1.JavaScript压缩和模块打包模块打包用于将不同的脚本打包在一起,放到同一个文件中。更少的HTTP请求和单个文件解析都减少了加载时间。使用Webpack打包CSS文件和组合图像。这两个功能都有助于缩短启动时间。2.按需加载资源按需或延迟加载资源(尤其是图片)可以帮助Web应用获得更好的整体性能。延迟加载对于使用大量图片的页面有三个显着的好处:减少对服务器的并发请求数(这使得页面的其他部分加载更快)减少浏览器内存使用(更少的图片,更少的内存)以减少服务器-侧加载,只在必要的时候才加载图片或资源(比如视频),比如第一次展示的时候,或者即将展示的时候。3、在使用DOM操作库时使用array-idsArrayids,这样DOM操作引擎就可以“知道”什么时候节点可以映射到数组中的元素。如果没有array-ids或track-by,大多数库将进行重新排序,破坏现有节点并重新创建新节点。这是非常损失性能的。4.缓存缓存可以放在动态内容服务器和客户端之间,可以避免常见的请求,减少服务器负载,同时提高响应时间。5.启用HTTP/2HTTP/2为同一台服务器的并发连接问题带来了很多好处。6.应用程序性能分析Chrome提供了一个很棒的性能分析工具。特别是,Chrome开发工具中的时间线和网络视图非常适合定位延迟问题。时间线视图可以帮助查找长时间运行的操作。网络视图可以帮助识别由缓慢请求或对端点的串行访问引起的额外延迟。在大多数情况下,选择一个更优的算法比围绕小成本中心实施特定的优化策略可以产生更大的收益。7.使用负载均衡解决方案为了使负载均衡真正有效,动态内容和静态内容都应该被拆分成易于并发访问。换句话说,对元素的序列化访问削弱了负载均衡器优化分配流量的能力。同时,并发访问资源可以缩短启动时间。8.考虑同构以获得更快的启动时间同构改善Web应用程序外观的方法之一是减少启动时间或减少呈现第一页所需的时间。9.使用索引加速数据库查询10.使用更快的翻译方案11.渲染阻塞时避免或最小化使用JavaScript和CSS防止JavaScript阻塞解析器和渲染器的一种方法是将脚本标记标记为异步。这限制了我们对DOM的访问,但允许浏览器继续解析和呈现页面,而不管脚本执行状态如何。换句话说,为了获得最佳启动时间,请确保对呈现不重要的脚本使用async属性标记为异步。12.对未来的一个建议:使用serviceworker+streaming13.按需加载资源图片编码优化需要加载资源图片编码优化。PNG和JPG都使用网络发布的次优设置进行编码。通过更改编码器及其设置,可以显着改善图像密集型站点。流行的解决方案包括OptiPNG和jpegtran。