一. 异构化强化
增加异构化覆盖范围
尽可能在低层次的DOM结点上，而并非像上述自上而下覆盖范围的实例标识符一样，如果你要发生改变p的式样，class就千万别加到div上，透过父原素去负面影响子原素不好。
千万别采用 table 产业布局，可能极小的两个小更动会造成整个 table 的重新产业布局。那么在迫不得已采用table的公开场合，能设置table-layout:auto;或者是table-layout:fixed这种能让table带队带队的图形，这种作法也是为了限制reflow的负面影响覆盖范围。增加异构化单次
1.式样集中发生改变千万别频密的操作方式式样，对两个静态网页而言，合情合理且可维护的作法是更动Pthreads而并非修正式样，对静态发生改变的式样而言，相较每次细微修正都直接冲破原素，更快的办法是统一在 cssText 表达式中编辑。 2.分离FAT方式DOM 的数个读操作方式（或数个写操作方式），应该放在一起。千万别两个读操作方式之间，加入两个写操作方式。 3.将 DOM 离线采用 display:none(后面再显示，一共促发两次异构化)透过 documentFragment 建立两个 dom 碎块,在它上面大批量操作方式 dom，操作方式顺利完成之后，再加进到文件格式中，这种只会促发一次异构化。拷贝结点，在复本上工作，然后代替它！ 4.采用 absolute 或 fixed 瓦解文件格式流 5.强化动画电影能把动画电影效果应用领域到 position特性为 absolute 或 fixed 的原素上，这种对其他原素负面影响较细。投入使用GPU快速 GPU 硬件快速是指应用领域 GPU 的绘图操控性对应用领域程序中的一些绘图操作方式交给 GPU 来顺利完成，因为 GPU 是专门为处理绘图而设计，所以它在速度和能源消耗上更简便。 GPU 快速通常包括以下几个部分：Canvas2D，产业布局制备, CSS3转换（transitions），CSS3 3D转换（transforms），WebGL和音频(video)。二.白屏强化
1. DNS导出强化
特别针对DNS Lookup各个环节，我们能特别前瞻性的进行DNS导出强化。DNS内存强化 增加DNS查阅单次。 增加DNS查阅单次需要增加来自不同domain的允诺的数量，如尽可能将内部域的对象下载到邻近地区伺服器上等。DNS预读取策略 能透过用meta信息来知会应用领域程序, 我这网页要做DNS预导出能采用link条码来强制性对DNS做预导出:稳定可信的DNS伺服器2. TCP互联网信道强化
特别针对互联网链路的强化，好像除了掏钱没有什么更快的方式！
3. 服务端处理强化
服务端的处理强化，是两个非常庞大的话题，会涉及到如Redis内存、数据库存储强化或是系统内的各种中间件以及Gzip压缩等…
4. 应用领域程序浏览、导出、图形网页强化
根据应用领域程序对网页的浏览、导出、图形过程，能考虑一下的强化处理：尽可能的精简HTML的标识符和结构尽可能的强化CSS文件和结构一定要合理的放置JS标识符，尽可能千万别采用内联的JS标识符三.大量图片读取强化
1. 应用领域程序有连接允诺限制，一般应用领域程序都是最大http连接数被限制在6个，有以下解决方法
懒读取，没有浏览到的图片暂不允诺 判断图片是否是首屏内图片，首先想到的肯定是透过 getBo2.小图片比较多，能用雪碧图、字体图标、base64等，这种能有效增加连接数
3.在 HTTP/1.0 和 HTTP/1.1 协议下，由于 Chrome 只支持同域同时发送 6 个并发允诺，能进行域名切分，来提升并发的允诺数量.
4.连接数限制问题还能由http2来解决，http2两个站点只有一个连接。每个允诺为两个流，每个允诺被分为数个二进制帧，不同流中的帧能交错的发送，实现多路复用。这就解决了连接数限制的问题2、图片过大，传输和图形比较慢，有以下的处理办法
1.如果是相册之类的能预读取，在展示当前图片的时候，就读取它的前两个和后两个图片
2.读取的时候能先读取两个压缩率非常高的缩略图，以提高用户体验
3.采用渐进式jpeg，会提高用户体验
4.如果展示区域小于图片的真实大小，能在服务端先压缩到合适的尺寸
3. 应用领域程序从输入网址到网页展现的整个过程
1，用户输入url并回车2，应用领域程序进程检查url，组装协议，构成完整的url3，应用领域程序进程透过进程间通信（IPC）把url允诺发送给互联网进程4，互联网进程接收到url允诺后检查邻近地区内存是否内存了该允诺资源，如果有则将该资源返回给应用领域程序进程5，如果没有，互联网进程向web伺服器发起http允诺（互联网允诺），允诺流程如下： 5.1 进行DNS解和响应信息，并导出响应内容6，互联网进程导出响应流程； 6.1 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步，如果是200，则继续处理允诺。 6.2 200响应处理：
检查响应类型Content-Type，如果是字节流类型，则将该允诺提交给浏览管理器，该导航流程结束，不再进行
后续的图形，如果是html则通知应用领域程序进程准备图形进程准备进行图形。7，准备图形进程 7.1 应用领域程序进程检查当前url是否和之前打开的图形进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的图形进程8.传输数据、更新状态8.1 图形进程准备好后，应用领域程序向图形进程发起“提交文件格式”的消息，图形进程接收到消息和互联网进程建立传输数据的“管道”8.2 图形进程接收完数据后，向应用领域程序发送“确认提交”8.3 应用领域程序进程接收到确认消息后更新应用领域程序界面状态：安全、地址栏url、前进后退的历史状态、更新web网页。9.图形流水线
构建 DOM 树 输入：HTML 文件格式处理：HTML 导出器导出；输出：DOM 数据解构式样计算 输入：CSS 文本；处理：特性值标准化，每个结点具体式样（继承、层叠）；输出：styleSheets(CSSOM)产业布局(DOM 树中原素的计划位置) DOM & CSSOM 合并成图形树； 产业布局树（DOM 树中的可见原素）；产业布局计算。分层 特定结点生成专用图层，生成一棵图层树（层叠上下文、Clip，类似 PhotoShop 里的图层）；拥有层叠上下文特性（明确定位特性、透明特性、CSS 滤镜、z-index 等）的原素会建立单独图层没有图层的 DOM 结点属于父结点图层； 需要剪裁的地方也会建立图层。绘制指令 输入：图层树；图形引擎对图层树中每个图层进行绘制； 拆分成绘制指令，生成绘制列表，提交到制备线程； 输出：绘制列表。分块 制备线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。光栅化（栅格化） 在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作方式）；快速栅格化：GPU 快速，生成位图（GPU 进程）。制备绘制绘制图块命令——DrawQuad，提交给应用领域程序进程； 应用领域程序进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。如果你是后端小白或者打算转行进入后端这个行业，不知道未来该怎么学习，都能加入我组建的自学团，每天一起打卡学习，分享学习资料，定期组织实战项目，匹配学习伙伴，我会严格监督你们的。
作者：小郭在深圳
链接：https://juejin.cn/post/6960134118382239774
