前端性能

taowen 发布于2019-08-22 18:47 / 1564人阅读

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处提高前端性能的方法宏观上看加速什么是内容分发网络由于位于用户网络的第一跳，将大多数静态文件启用加速可以大大提高效率，很多框架用的很多的静态文件都启用了加速反向代理什么是反向代理正常的代理服务器是

发布自Kindem的博客，欢迎大家转载，但是要注意注明出处

提高前端性能的方法 宏观上看

CDN加速

什么是CDN(内容分发网络)

由于 CDN 位于用户网络的第一跳，将大多数静态文件启用 CDN 加速可以大大提高效率，很多框架用的很多的静态文件都启用了 CDN 加速

反向代理

什么是反向代理 ? 正常的代理服务器是位于浏览器一端，代理用户发送 http 请求给 Web 服务器，但是反向代理服务器则是位于 Web 服务器一端，代理 Web 服务器接受请求，然后再将请求处理转发，这样可以提高效率，用过 Nginx 的同学可能就有印象， Nginx 就可以做反向代理

减少 http 请求，合理设置 http 缓存

将多个文件合并成一个文件，将多个请求合并成一个请求

能够进行缓存的情况下缓存越多越好，越久越好

使用浏览器缓存

某些静态文件长期不变化，可以使用 http 头中的 cache-control 和 expires设置浏览器缓存

压缩文件

很常见，html、css、js 等文件压缩后的效果很好，很多框架支持构建 min 文件，即是这么一种办法

CSS Sprites

即使用该技术将很多零散的图片合成一张大图，比较适合图标之类的使用，可以参照很多游戏制作中的 Sprites 贴图，效果类似，这种办法能够大大减少 http 请求量

LazyLoad Images

懒加载，比如旋转木马，可以先加载第一张图片，如果用户不继续翻阅，后面的图片也没有加载的必要了

CSS 放在页面最上部，javascript 放在页面最下面

这与页面的渲染顺序有关，CSS尽早加载可以使得页面尽早开始渲染，而js是会阻塞页面的，js的加载需要等到 DOM 完成形成之后才会开始生效，所以js最好放到最下面

减少 cookie 传输

cookie 是会包含在每一次 http 请求中的(如果启用 cookie)，所以太大的 cookie 是会影响到性能的

微观(代码层面)上看

虚拟 DOM

什么是虚拟 DOM ? 大体上来说就是使用 js 模拟了 DOM，对虚拟 DOM 的操作会影响到真正的 DOM，这样的方式提高了性能，很多前端框架都采用了虚拟 DOM，比如 Vue、React 等等

详细了说有点麻烦，看这里吧：虚拟DOM介绍

慎用eval

这玩意真的慢

js 链式作用域需要注意的地方

js 的链式作用域：用到一个变量的时候，现在当前作用域下的局部变量查询，查不到了再往上一级作用域查询

因为这样的作用域，当使用到全局变量的时候，最好先将全局变量缓存到本地

变量/常量访问开销

常量最快

局部变量次之

链式作用域找到的变量再次之

对象和数组的操作涉及到寻址，很慢

字符串拼接

想想都慢

可以使用模板字符串或者尽量避免

css 选择器优化

选择器实际上是从右往左选，所以 div#hello 会比 #hello div 效率高很多

参考资料

前端影响性能的细节 - CSDN - i秋风伴落叶

百度百科 - CDN

虚拟 DOM 介绍

侵删

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

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

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

前端性能优化

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

Dean 2019-08-21 18:19 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

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

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

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

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

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