前端性能优化,之还在为多种多样的知识点整理苦恼吗,进来看看吧。(转载)

本文主要是介绍前端性能优化,之还在为多种多样的知识点整理苦恼吗,进来看看吧。(转载),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过观看周啸天公开课——深度刨析前端性能优化CRP对百度到的各种杂七杂八的前端性能优化方面的问题进行梳理

先来说一下,前端页面的请求过程有如下几个步骤:(脑子里想一下这个过程哈)
步骤1:对输入地址栏的URL进行解析
步骤2:DNS解析
步骤3:TCP的3次握手
步骤4:发送HTTP请求
步骤5:服务器端的响应处理
步骤6:TCP的4次挥手
步骤7:浏览器进行解析渲染

步骤1有关URL解析并未进行深入讲解,主要涉及
1)地址解析与编码
2)HSTS(完全没见过,说是涉及安全问题啥的。)
3)缓存(这个还好,至少见过,应该是与强缓存和协商缓存有关)
4)。。。。。

步骤3和步骤6是网络传输内容,与前端优化的关系不大。
步骤5是后台问题,关系也不大

先重点说一下步骤7,浏览器的解析渲染:
首先,先来说一下步骤7的渲染流程:
DOM树的渲染------>CSSOM树的渲染------>渲染树

1.DOM树渲染步骤:
1)返回的最底层的其实是一些十六进制数的形式(3C 2C 79 3E 6F)
2)通过转化使这些十六进制转化为了‘标签’字符集(html head body p)
3)通过Tokens令牌,对这些字符集进行‘闭合’的处理(比如,哦~这个是html的起始标签,然后中间罗里吧嗦一大堆之后,哦!找到你了,html的闭合标签)
4)通过词法分析,把令牌搞出来的东西生成具体的节点,这个过程已经把DOM的结构搭建好了
5)最后生成了一个有标签,有结构,有层级的树形的DOM结构

ok,分析完了DOM树的渲染步骤了,我们来对他进行优化:
1).在步骤2到步骤3的过程中,Tokens令牌是W3C规范的,所以,你的标签要语义化,这样才能更快更好的进行分析。
2).步骤3到步骤4过程中,在进行节点生成时,你的层级结构要尽可能的少,这样才更快。最优的层级应该三四级。

2.CSSOM树的渲染:
大体与DOM的过程相同。
这里不得不说一点,css样式的引入,link外部引入和@import,有什么不同呢?
link是异步的,也是一个http请求。而@import是同步的,回阻碍下边内容的渲染。
优化:
1)选择器的层级问题
2)由不得不说的一点,得出如下如何引入结论:
若样式较少,采用内部样式style标签,因为它不需要http请求
若样式很多,采用link标签,放在顶部,尽早的把css样式下载下来
一般不用@import,除非需求需要(这里可能涉及到了步骤4,发送HTTP请求的内容)
PS:
CSS选择器的渲染是由右向左的,注意层级问题
CSS预编译器(less sass stylus)虽然在开发,维护,复用特别好使,但是一定要注意层级问题

3.渲染树:
当DOM与CSSOM树加载完成后,融合为渲染树(render tree)
根据渲染树,计算视图内的确切位置,这个布局计算称为回流
根据渲染树和回流得到的计算结构,得到节点的绝对像素,称为绘制
因此优化主要就是:减少DOM的回流和重绘

ok,步骤7浏览器的解析渲染方面的优化就先这样了,你总结一下在网上百度到的优化方法哪些是属于浏览器渲染这一块的,想想。

原文链接:https://blog.csdn.net/BWater_monster/java/article/details/106227357

这篇关于前端性能优化,之还在为多种多样的知识点整理苦恼吗,进来看看吧。(转载)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/923888

相关文章

Golang中拼接字符串的6种方式性能对比

《Golang中拼接字符串的6种方式性能对比》golang的string类型是不可修改的,对于拼接字符串来说,本质上还是创建一个新的对象将数据放进去,主要有6种拼接方式,下面小编就来为大家详细讲讲吧... 目录拼接方式介绍性能对比测试代码测试结果源码分析golang的string类型是不可修改的,对于拼接字

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Mysql中InnoDB与MyISAM索引差异详解(最新整理)

《Mysql中InnoDB与MyISAM索引差异详解(最新整理)》InnoDB和MyISAM在索引实现和特性上有差异,包括聚集索引、非聚集索引、事务支持、并发控制、覆盖索引、主键约束、外键支持和物理存... 目录1. 索引类型与数据存储方式InnoDBMyISAM2. 事务与并发控制InnoDBMyISAM

StarRocks索引详解(最新整理)

《StarRocks索引详解(最新整理)》StarRocks支持多种索引类型,包括主键索引、前缀索引、Bitmap索引和Bloomfilter索引,这些索引类型适用于不同场景,如唯一性约束、减少索引空... 目录1. 主键索引(Primary Key Index)2. 前缀索引(Prefix Index /

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计