前端性能优化整理

yzd 发布于2019-04-23 14:39 / 3327人阅读

摘要：浏览器渲染原理输入网址查询缓存三次握手建立连接浏览器发送请求到服务器服务器返回浏览器渲染页面浏览器渲染过程为例首先进行解析，解析，构建树的元素在树解析完成加到树上，生成回流阶段，应尽量避免的元素不在树经过层叠上下文处理，生成重绘

0. 浏览器渲染原理：

输入网址 -> dns查询 -> dns缓存 -> 三次握手建立连接 -> 浏览器发送请求到服务器 -> 服务器返回html -> 浏览器渲染页面；
浏览器渲染过程（webkit为例）：
① 首先进行dom解析，css解析，构建dom树；（display:none的元素在dom树）
② css解析完成css rules加到dom树上，生成render tree（回流reflow阶段，应尽量避免）；（display:none的元素不在dom树）
③ 经过层叠上下文处理，生成render layer（重绘repaint阶段），可以直接去paint页面，或者去④；
④ 层合并后生成graphics layer，然后GPU绘制。

1. 浏览器宿主环境层面：

由于单线程解析阻塞限制，可以用script defer属性异步加载，样式放头部，脚本放底部；
结合dns-prefetch、dns-preload、preload预加载资源；
利用事件冒泡机制，采用事件委托方法绑定事件；
浏览器渲染时，开启硬件加速可以生成复合层，复合层交给GPU渲染，但不能滥用；

2. 网络层面：

减少http请求数量：css、js合并，css sprites，font-icon，base64编码图片，图片懒加载；
减轻http数据请求大小：静态资源压缩，tinypng压缩图片，webp格式，gzip压缩；
对于cookie性能bug，静态资源分开部署，cdn缓存；
缓存处理（强缓存，协商缓存），本地缓存；
dns-prefetch，preload；
反向代理，cdn，负载均衡；

3. 代码层面：

利用requestAnimationFrame做持续动画；
缓存dom，优化循环体；
减少重绘，回流，样式层面进行层提升；
闭包使用，内存回收；
代码复用;
递归时采用尾调用自身即尾递归，永远不会发生栈溢出；
硬件加速时添加z-index，人为干扰复合层的排序，有效减少chrome创建不必要的复合层。

idc机房托管混合云前端性能优化前端开发性能优化性能优化前端优化

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

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

前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

zzbo 2019-08-02 16:01 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

bovenson 2019-08-22 15:41 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

winterdawn 2019-08-05 18:04 评论0 收藏0