云端卫士的新栏目《实战录》将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验，希望对于热爱技术且关注安全领域的受众有所裨益。本期分享人为云端卫士工程师束海瑞，将带来前端性能优化的分享。
目标前端优化的目标
1.从用户角度而言，优化能够让页面加载的更快，对用户的操作相应更及时，给用户带来更为友好的体验，提高我们产品的市场竞争力。
2.从公司角度而言，优化减少了页面请求数，降低了系统负载，减少了资源所占的带宽，节省了客观的费用。所以适当的前端优化是重要的，也是必须的。
原则前端优化的原则
1.性能优化的时期不宜过早，从项目实践的角度考虑，过早的性能优化可能会给后期的项目扩展和维护带来麻烦。
2.避免过度的性能优化，特别是破化了了代码可读性和可维护性的性能优化更不可取。
本文将从工程，代码，策略方面对前端性能优化的一些方面展开简单论述。工程工程指的是我们通过工程化的方法对前端项目，运行环境进行调优。工程化的特点是简单易行。它不需要修改任何代码就可以应用在已有的任何前端项目上，是一种最直接和有效的前端优化方案。
服务器(server)端
1.开启web服务器的gzip压缩功能，减少网络传输资源消耗，提高网页加载速度
2.合理设置页面静态资源的过期时间，充分利用浏览器缓存，减少网络资源加载
客户端(client)端
1.压缩，合并页面静态资源，减少网络传输消耗(gulp)
2.利用浏览器加载策略，使用多域名提高静态资源并发传输数量(cdn)
3.引入模块加载方案，以异步，非阻塞的方式对页面资源进行加载(require)代码代码指的的是通过提高代码质量，优化相关算法，提升页面性能。代码级的性能优化涉及的方面比较多。我们没有办法保证我们的所有代码都是高性能的，但是我们可以在项目出现性能的时候对相关核心代码进行重构来提升整体的项目性能。前端方面比较容易出现性能为题的方面通常在一下方面。
DOM Scripting
DOM操作是前端开发工作中一个特别频繁的操作，合理的DOM操作可以帮助我们有效的提升页面性能。关于DOM操作，要求我们要掌握和了解页面的Reflow和Repaint原理，尽量避免页面的Reflow。DOM事件也是性能优化中一个比较重要的方面，我们要充分利用事件的冒泡特性进行事件绑定，避免大量的事件绑定，减少不必要的开销。
Data Access熟悉了解JS的闭包，原型琏等语言结构，优化数据存取操作。代码优化是个长期的过程，涉及到的方面也非常多，这里推荐大家一本书《High Performance JavaScript》。
策略当在资源一定的情况下，我们可以通过一定的策略，优化前端性能，提升用户体验。按需加载按需加载页面相关模块，避免不必要的资源消耗异步加载对页面中比较耗费资源的模块进行异步加载，从而提升页面整体的加载速度。异步渲染当页面内容比较多时，只对页面当前的可视区域进行渲染，可显著提高页面首屏展现速度。资源销毁对于单页面应用，应及时销毁闲置的或者不可见的组件资源。
缓存充分利用高级浏览器特性，sessionStorage, localStorage对于页面元素进行缓存。页面展现从设计方面，优化页面展现方式。避免太多的图表，动画出现在同一个页面，否则再好的优化依然不会有良好的性能。当在具体选择使用策略的时候，我们可以针对具体的情况，综合使用一种或几种策略进行优化。
最后前端优化涉及的方面还有很多，在具体的实践中，我们也可以发挥我们的想象和创新。不论我们使用何种策略和方法，只要最终达到了效果，就是好方法。正所谓白猫黑猫，能逮到老鼠就是好猫。

实战录 | 前端性能优化二三事儿相关推荐

  1. 【前端性能优化方法与实战】

    [前端性能优化方法与实战] 性能优化概览

  2. 前端性能优化方法与实战17 横向对比：百度、阿里云、美团性能方案对比

    前面我介绍了性能优化实践及在 Hybrid下的进阶优化方案,这是我们目前的做法,那么,业界是什么样的情况呢?在这里我就挑选三家互联网公司--百度.阿里云.美团,一起来看看他们是怎么做的? 为什么选它们 ...

  3. 深度讲解：web前端性能优化

    一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...

  4. 前端性能优化最佳实践（转）

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  5. 前端服务器获取js文件偶尔慢_我所认识的前端性能优化

    现象: 用户体验差 网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力 从哪处理:各处的缓存 地址缓存 减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...

  6. 让你页面速度飞起来 Web前端性能优化

    百度网盘下载 第1章 课程简介 对课程做简单的介绍. 第2章 资源合并与压缩 通过本章,我们学习和理解了web前端的概念,以及性能优化的意义所在,并且通过实战中的压缩与合并,深入理解了减少http请求 ...

  7. Web 前端性能优化

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  8. 前端性能优化学习 08 资源加载优化

    图片延迟加载 什么是延迟加载 首先来想象一个场景,当浏览一个内容丰富的网站时,比如电商的商品列表页.主流视频网站的节目列表等,由于屏幕尺寸的限制,每次只能查看到视窗中的那部分内容,而要浏览完页面所包含 ...

  9. 前端性能优化（一）用一张图说明加载优化

    本文从加载的角度写一下前端性能优化. 需要说明的是下面这种脑暴图是按照从第一象限和第四象限的顺序来看的. 一.加载体积优化 我们无法控制用户的网络状况,既然想加载速度快,那当然是能不加载就不加载,能少 ...

  10. 服务器显示屏出现白屏,前端性能优化之白屏时间

    定场诗 曲木为直终必弯,养狼当犬看家难: 墨染鸬鹚黑不久,粉刷乌鸦白不天. 蜜饯黄莲终需苦,强摘瓜果不能甜: 好事总得善人做,哪有凡人做神仙. 前言 该篇文章会为您分享在前端性能优化中非常重要的一环- ...

最新文章

  1. 【深度学习】U型的Transfomer网络（Swin-Unet）和Swin-Transformer分类
  2. 高效的判断素数---筛选法
  3. 现在电脑的主流配置_玩手游是因为电脑配置差？现在来告诉你这些网游需要啥配置...
  4. MyBaties异常之 ORA-00918: 未明确定义列
  5. linux 完全卸载软件方法
  6. 程序员面试金典 - 面试题 17.04. 消失的数字（数学/位运算）
  7. Python 操作 Elasticsearch 实现 增 删 改 查
  8. 面试官系统精讲Java源码及大厂真题 - 07 List 源码会问哪些面试题
  9. web server的性能统计
  10. 边工作边刷题：70天一遍leetcode: day 51
  11. 进销存软件管理系统排名（最新版）
  12. Java实现MD5加盐加密算法
  13. IBM X3650 M4 服务器安装 serverguide下载地址 右键用360游览器下载速度很快
  14. c语言教程免费ppt,《C语言教程》PPT课件.ppt
  15. Android 仿QQ、新浪相册的实现
  16. 二建带记忆功能计算机,二建实务记忆技巧
  17. 计算机顶会英文论文查找
  18. 实现strStr()
  19. 通过“microbenchmark”解谜GPU的微架构
  20. android 后台运行 保活

热门文章

  1. UOJ#449. 【集训队作业2018】喂鸽子（期望dp）
  2. android NFC getId()后进制转换
  3. JS正则表达式(5) = 正则的捕获方法
  4. kali实现ARP断网
  5. iOS11新增的Files文件管理器应用
  6. IE提示当前安全设置不允许下载该文件怎么办？
  7. windows下安装redis并设置自启动
  8. 国内 Top2 高校研一在读，为什么感觉深度学习越学越懵?
  9. wma转mp3怎么弄_几种值得推荐的WMA转换MP3方法
  10. 公司董事会人数怎么确定