前端性能优化

Posted 2021-01-07 pearlran

页面加载速度影响因素——前端性能

　　前端性能关键呈现路径所涉及的步骤：

　　　　　　1 .  DOM：浏览器在解析html时，会以递增的方式为HTML标记生成一种名为文档对象模型（DOM）的树状模型，

　　　　　　　　　　　该模型描述了网页中包含的内容

　　　　　　2 . CSSOM：浏览器收到所有CSS后，会对其中包含的标记和类生成一种名为CSS对象模型的树状模型，并将样式信息附加在节点上。

　　　　　　　　　　　这个树描述了网页中所包含内容需要应用的样式

　　　　　　3 . 呈现树（Render Tree）：通过将DOM与CSSOM结合在一起，浏览器可以构造出呈现树，

　　　　　　　　　　　其中包含了页面内容以及所要应用的样式信息

　　　　　　4 . 布局（Layout）：布局这一步中需要计算网页内容在屏幕上的实际位置和大小

　　　　　　5 . 绘制（Paint）：最后一步将使用布局信息在屏幕上绘制像素

当然对此我们也是有办法应付的

下面列出了各个方面处理性能的方法

　　（1）网页内容 ——  减少HTTP请求次数

　　　　　　　　　　　 减少DNS查询次数

　　　　　　　　　　　 避免页面跳转

　　　　　　　　　　　 缓冲ajax

　　　　　　　　　　　 延迟加载

　　　　　　　　　　　 提前加载

　　　　　　　　　　　 减少DOM元素数量

　　　　　　　　　　　 根据域名划分内容

　　　　　　　　　　　 减少iframe数量

　　　　　　　　　　　 避免404

　　（2）服务器 —— 使用CDN

　　　　　　　　　　添加Expires 或 Cache-Control 报文头

　　　　　　　　　　Gzip 压缩传输文件

　　　　　　　　　　配置ETags

　　　　　　　　　　尽早flush输出

　　　　　　　　　　使用GET Ajax请求

　　　　　　　　　　避免空的图片src

　　　　　　　　　　Cookie

　　　　　　　　　　减少cookie大小

　　　　　　　　　　页面内容使用无cookie域名

　　（3） CSS —— 将样式表置顶

　　　　　　　　　 避免CSS表达式

　　　　　　　　　 用<link>代替@import

　　　　　　　　　 避免使用Filters

　　（4） javascript —— 将脚本置底

　　　　　　　　　　　　使用外部Javascript 和 Css文件

　　　　　　　　　　　　精简Javescript和Css

　　　　　　　　　　　　去除重复脚本

　　　　　　　　　　　　减少DOM访问

　　　　　　　　　　　　使用智能事件处理

　　（5） 图片 —— 优化图片

　　　　　　　　　 优化CSS Sprite

　　　　　　　　　 不要在HTML中缩放图片

　　　　　　　　　 使用小且可缓存的favicon.ico

　　　　　　　　　 移动客户端

　　　　　　　　　 保持单个内容小于25KB

　　　　　　　　　 打包组建成符合文档