前端性能优化-知识体系
前端性能优化这件事情上， 我认为他是20%的理论， 加上至少80%的实践， 甚至很多理论本身也都是我们具体的业务场景中实践出来的。前端技术日新月异， 性能方案永远都在更迭， 所以一定要形成自己的学习思路。
从一道面试题说起
从输入URL到页面加载完成， 发生了什么？
我们站在性能优化的角度， 一起简单的复习一遍这个经典的过程：首先我们需要通过dns域名解析系统， 将url解析为对应的ip地址， 然后与这个ip地址确定的那台服务器简历起tcp网络连接， 随后我们向服务端抛出我们的http请求，服务端处理完我们的请求之后， 把目标数据放在http响应里返回给客户端， 拿到响应数据的浏览器可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作
我们将这个过程切分为如下的过程片段：
- dns解析
- tcp连接
- http请求抛出
- 服务端处理请求 http响应返回
- 浏览器拿到响应数据， 解析响应内容 把解析的结果展示给用户
我们任何一个用户端的产品， 都需要把这5个过程滴水不漏的考虑到自己的性能优化方案内，反复权衡，从而打磨出用户满意的速度
从原理到实践：各个击破
接下来要做的事件， 就是正对这五个过程进行分解， 各个提问， 各个击破。
具体来说， dns解析花时间， 能不能尽量减少解析次数或者把解析前置？
能——浏览器dns缓存和dns prefetch
tcp每次的三次握手都急死人，有没有解决方案？
有——长连接、与连接、接入spdy协议
如果说这两个过程的优化往往需要我们的团队和服务器工程师写作完成， 前端单方面可以做的努力有限，那么http请求呢？在减少请求次数和减小请求体积方面， 我们应该是专家， 再者， 服务器越远， 一次请求就越慢， 那部署时就把静态资源放在离我们更近的cdn上是不是就能快一些
以上提到的都是网络层面的性能优化， 再往下走就是浏览器端的性能优化——这部分涉及资源加载优先化、服务端渲染、浏览器缓存机制的利用、dom树的构建、网页排版和渲染过程、回流与重绘的考量、dom操作的合理规避等等——这正是前端工程师可以真正一展拳脚的地方， 学习这些知识， 不仅可以帮助我们从更根本上提升页面性能， 更能够大大加深个人对浏览器底层原理， 运行机制的理解
总的来说
我们将从网络层面和渲染层面两个大的维度来逐个点亮前端性能优化的技能树。
这两个维度的知识面貌各有千秋， 在网络层面，我们需要学习一些必须的理论基础作为前置知识。这部分的学习或许不需要写特别多的代码， 但需要对每一个知识点理解透彻， 进而应用到自己日常优化的决策中去。网络层面结束后， 由本地储存开始， 渐渐过度到浏览器这一端的优化。
前端性能优化-知识体系相关推荐
- 前端性能优化知识，包括css和js
作者:野次 链接:http://www.zhihu.com/question/33032042/answer/95948831 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- 1.5W+字的全链路前端性能优化送给你
点击上方"前端开发博客",选择"星标" 回复"加群",加入我们一起学习 通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现 ...
- 如何全链路进行前端性能优化
" 如果对性能优化很有兴趣的可以参加文末的送书活动 " 1. 概述 通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页 ...
- 全链路前端性能优化方案
通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页面加载的更快,让用户的操作响应更及时,给用户更好的使用体验. 这里我们介绍的是前端性能优 ...
- 【干货】1.5W+字的全链路前端性能优化送给你
通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页面加载的更快,让用户的操作响应更及时,给用户更好的使用体验. 这里我们介绍的是前端性能优 ...
- 前端性能优化基础知识--幕课网
作为一个前端小码农,在页面样式都能实现以后,就开始考虑:同一个效果,我该用什么样的方式和代码去实现它比较规范?前两天逛幕课网发现了两门课程–<前端性能优化-基础知识认知>和<前端性能 ...
- 性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
- 前端性能优化之渲染优化
1.知识体系 1.1从URL输入到页面加载 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?现在带 大家来看看流程. 首先我们需要通过 DNS(域名解析系统)将 U ...
- 2022.3.3 前端性能优化
面试中 了解性能优化吗? 输入URL 到看到整个页面经历了什么过程? 工作中 页面加载好慢,不知道是前端问题还是后端问题. 页面交互卡顿,不知道具体哪里出了问题 什么是web性能 打开速度 动画效果 ...
最新文章
- python如何安装seaborn模块_seaborn模块的基本使用
- 报告如何单独添加水印？永洪BIV9.2解锁版权保护新方式
- 中国少数民族文学馆在内蒙古呼和浩特揭幕
- Jpa的@Id和@GeneratedValue的使用
- 滚动截屏软件_华为指关节截屏不如三指截屏好用？一步到位，实践出真知
- 开源网管工具 Cacti，Nagios,Zabbix 比较
- 海康IP_Tool修改工具使用教程
- 安卓新手入门基础知识
- html显示mysql图片路径_从MYSQL数据库取出微信emoji表情在web html上显示
- selenium爬取京东的手机分类页面下的商品信息
- 2022-01-08：数组中只有0和1，每过1代，0旁边只有1个1，当前0会变成1。每过1代，0旁边有2个1，当前0还是0。 比如10001，经过1代，会变成11011，再过1代，还是11011 。
- 资源暂时不可用错误(Out of memery)完美解决方案
- zzuli OJ 1011：圆柱体表面积
- 一篇非大厂的 Android 面试总结心得~
- 做到这一点，你也可以成为优秀的程序员（转）
- 从永远到永远-Navicat将MySQL数据库复制到另一个Mysql数据库
- 电角速度和机械角速度
- python编写一个简单的程序验证码_Python实现一个简单的验证码程序
- Delphi 11.2 安装 CnWizards 组件包
- 湖北武汉机械员证书机械设备安全的施工管理建筑七大员培训