前端优化

firim 发布于2019-08-29 12:23 / 2808人阅读

摘要：在大多数情况下，选择一个更优的算法，比围绕着小成本中心所实现的具体优化策略能够获得更大的收益。用于未来的一个建议使用流按需加载资源按图片编码优化需加载资源图片编码优化。和在发布时都会使用次优的设置进行编码。

1.JavaScript压缩和模块打包

模块打包则用于将不同脚本打包在一起并放进同一文件。更少的 HTTP 请求和单个文件解析都可以减少加载时间。

使用 Webpack 打包 CSS 文件以及合并图片。这些特性都可以有助于改善启动时间。

2.按需加载资源

资源（特别是图片）的按需加载或者说惰性加载，可以有助于 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处：

减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）
减少浏览器的内存使用率（更少的图片，更少的内存）
减少服务器端的负载
只在必要的时候才去加载图片或资源（如视频），比如在第一次被显示的时候，或者是在将要显示的时候对其进行加载。

3.在使用 DOM 操作库时用上 array-ids

Array ids 使得 DOM 操作引擎可以「知道」在什么时候某个节点可以被映射到数组当中的某个元素。没有 array-ids 或者 track-by 的话，大部分库都会进行重新排序而摧毁已有的节点并重新创建新的。这就非常损耗性能了。

4.缓存

缓存可以被放在动态内容服务器和客户端之间，就可以避免公共请求以减少服务器的负载，与此同时改善响应时间。

5.启用 HTTP/2

HTTP/2 为同一服务器的并发连接问题带来了很多好处。

6.应用性能分析

Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助

时间线视图可以帮忙找到运行时间较长的操作。

网络视图可以帮助识别出额外的由缓慢请求导致的延迟或对于某一端点的串行访问。

在大多数情况下，选择一个更优的算法，比围绕着小成本中心所实现的具体优化策略能够获得更大的收益。

7.使用负载均衡方案

为了使负载均衡真正有效，动态内容和静态内容都应该被拆分成易于并发访问的。换句话说，元素的串形访问会削弱负载均衡器以最佳形式进行分流的能力。与此同时，对于资源的并发访问可以改善启动时间。

8.为了更快的启动时间考虑一下同构

改善 Web 应用程序观感的方式之一，就是减少启动时间或者减少首页渲染时间。

9.使用索引加速数据库查询

10.使用更快的转译方案

11.避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

防止 JavaScript 阻塞解析器和渲染器的一种方法就是将 script 标签标记为异步的。这限制了我们对于 DOM 的访问但是可以让浏览器不管脚本的执行状态而继续解析和渲染页面。换句话说，为了获得最佳的启动时间，确保那些对于渲染不重要的脚本已经通过异步属性的方式标记成异步的了。

12.用于未来的一个建议：使用 service workers + 流

13.按需加载资源按图片编码优化需加载资源

图片编码优化。PNGs 和 JPGs 在 Web 发布时都会使用次优的设置进行编码。通过改变编码器和它的设置，对于需要大量图片的网站来说可以获得有效的改善。流行的解决方案包括 OptiPNG 和 jpegtran。

云服务器 GPU云服务器前端优化网页前端优化前端页面优化前端代码优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111857.html

前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
王下邀月熊_Chevalier的前端每周清单系列文章索引

摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。感谢王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...

2501207950 2019-08-22 14:53 评论0 收藏0
前端优化-Javascript篇(1.脚本放在底部)

摘要：从本篇博客开始，我会跟大家分享下我关于前端优化方面的学习，由于时间原因每篇博客只能分享一小点内容，一点点深入前端优化的细节。在前端优化这个问题上，最被大家熟知的应该就是雅虎前端优化条军规以及雅虎前端优化条规则。　　从本篇博客开始，我会跟大家分享下我关于前端优化方面的学习，由于时间原因每篇博客只能分享一小点内容，一点点深入前端优化的细节。　　做过前端的人都知道，前端优化是一个永远都不会...

JerryC 2019-08-19 14:52 评论0 收藏0
前端每周清单年度总结与盘点

摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了...

jackwang 2019-08-22 15:54 评论0 收藏0