web前端性能优化

elliott_hu 发布于2019-08-23 17:07 / 991人阅读

摘要：前言性能优化是每个项目都需要注意的问题，在这里结合项目实际情况较为系统的整理下前端性能优化简单可以概括为以下几点减少需要加载资源的体积按需加载就是每个页面之加载需要的内容，这一点在多页应用中一般都有注意，单页应用可以用的与的异步组件实现由于

前言

性能优化是每个项目都需要注意的问题，在这里结合项目实际情况较为系统的整理下

web前端性能优化简单可以概括为以下几点

1 减少需要加载资源的体积 1.1 按需加载

就是每个页面之加载需要的内容，这一点在多页应用中一般都有注意，单页应用可以用webpack的import与vue的异步组件实现；react由于本人不熟，肯定也有相应的解决方案

1.2 资源压缩

在目前的webpack4+中，只要将mode设置为production，webpack就会将对应的资源（html、css、js）进行压缩；gulp也有对应的模块（html-min,uglify）

1.3 懒加载

将首屏不需要展示内容做懒加载处理，在需要展示时（比如滚动屏幕）再加载需要的内容

2 加快加载的速度 2.1 css精灵图

这是一种比较常用的技术，就是jiang将页面需要展示的小图片图标集中到一整张图片中，通过background-position设置来展示，原理是由于浏览器对同一域名下的请求有并发个数限制（一般在4-10个）

2.2 cdn加速

cdn原理简单来说就是通过dns的负载均衡，将访问解析到最近的服务器，该服务器首次会到目标服务器加载内容，同时会缓存该内容，此后该地区访问此资源的时候就能直接读取服务器上的缓存内容；从而块加载的速度；同时还可以突破浏览器的并发个数限制于服务器的带宽限制

3 http协议相关(需要对服务器软件进行相应配置) 3.1 缓存

3.1.1 Last-Modified(http1.0)与ETag(http1.1)，浏览器会对响应头中有此两个字段的内容进行缓存，下次访问此资源的时候会带上f-Modified-Since(与Last-Modified相对应)If-None-Match(与ETag相对应);服务器在识别到文件没有变化的时候，会返回状态码304,同时也不会返回响应体；浏览器接收到服务器返回的内容后就会从缓存中读取相应内容；
关于为什么会有两个字段，http1.0与http1.1各一个，因为http1.0中的约定会有服务器于客户端时间不一致的情况；下同

3.1.2 Expires（http1.0）与Cache-Control: max-age=86400（http1.1），此个字段与3.1.1类似，不同的是浏览器读到对应缓存后，如果没过期，就不会请求服务器，直接使用缓存里的内容

3.1.3 keep-alive，与tcp协议的三次握手相关，有此字段将会保持tcp链接，省去再次握手的过程；保持的时间可通过服务器软件进行配置

3.1.4 Accept-Encoding，这个需要浏览器处理

4 浏览器相关 4.1 defer与async

由于script会阻塞浏览器对html的解析，对与没有依赖关系的script加上defer或async

4.2 图片用背景图的形式展示

此方法是由于img标签会阻塞html的解析

结语

性能优化认证道远，目前只想到这些，算是抛砖引玉了，有没涉及到或者错误之处请大佬们不吝指正，谢谢~~

GPU云服务器云服务器前端性能优化前端开发性能优化 web性能优化 web前端优化

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

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

前端性能优化

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

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

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

VincentFF 2019-08-20 17:15 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端每周清单年度总结与盘点

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

jackwang 2019-08-22 15:54 评论0 收藏0
鸟瞰前端 , 再论性能优化

摘要：前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻的认识，业界目前主要还是以雅虎总结出来条前端性能优化的黄金军规为参考。欢迎大家前往腾讯云技术社区，获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年+的时间了，从最开始的美工到重构再到偏向js逻辑开发的前端开发，一直在前端这个行业里面摸索和学习，我现在将自己这些年的一个心得体会来个系统性的梳理写成一篇关于性能优化...

voidking 2019-08-29 13:47 评论0 收藏0
王下邀月熊_Chevalier的前端每周清单系列文章索引

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

2501207950 2019-08-22 14:53 评论0 收藏0