前端优化之资源加载

谁践踏了优雅 2022-05-17 03:54 243阅读 0赞

## 一、CSS、JS的装载与执行 ##

### html页面加载渲染的过程 ###

![20180806104814.png][]  
特点：  
1、顺序执行、并发加载

*  一个域名并发加载有限制，利用多个CDN域名
 *  词法分析
 *  并发加载
 *  并发上限

2、是否阻塞

*  css head中阻塞页面的渲染
 *  css阻塞js的执行
 *  css不阻塞外部脚本的加载
 *  直接引入的js阻塞页面的渲染
 *  js不阻塞资源的加载
 *  js顺序执行，阻塞后续js逻辑的执行

3、依赖关系

*  页面渲染依赖于css的加载
 *  js的执行顺序的依赖关系
 *  js逻辑对于dom节点的依赖关系

4、引入方式

*  直接引入
 *  defer
 *  async
 *  异步动态引入js

## 二、懒加载和预加载 ##

懒加载

*  图片进入可视区域之后请求图片资源
 *  对于电商等图片很多，页面很长的业务场景适用
 *  减少无效资源的加载
 *  并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用

预加载

*  图片等静态资源在使用之前的提前请求
 *  资源使用到时能从缓存中加载，提升用户体验
 *  页面展示的依赖关系维护

## 三、回流和重绘 ##

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)  
当页面布局和几何属性改变时就需要回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

**回流必将引起重绘，而重绘不一定会引起回流**

触发页面重布局的属性

*  盒子模型相关属性会触发重布局
 *  定位属性及浮动也会触发重布局
 *  改变节点内部文字结构也会触发重布局

![20180806135040.png][]

只触发重绘的属性  
![20180806135249.png][]

新建DOM的过程  
1. 获取DOM后分割为多个图层  
2. 对每个图层的节点计算样式结果（Recalculate style–样式重计算）  
3. 为每个节点生成图形和位置（Layout–回流和重布局）  
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘）  
5. 图层作为纹理上传至GPU  
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）

[20180806104814.png]: /images/20220517/40f26e51baab4066bb1569ac6a8de7fb.png
[20180806135040.png]: /images/20220517/f1f658a3b794478f9c7c96393fdf64bf.png
[20180806135249.png]: /images/20220517/0c5ffb293051437aa57fa7ba31067a87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关优化前端资源加载

一、优化前端资源加载 `js`加载资源方式： 1.1、使用内联图片，也就是将图片转换为base64编码的data-url。这种方式，其实是将图片的信息集成到css文件

水深无声/ 2022年12月18日 01:53/ 0 赞/ 158 阅读

相关【前端性能优化】图片加载优化

目录 1. 图片类型 1.1 PNG 1.2 JPG/JEPG

迷南。/ 2022年11月25日 10:12/ 0 赞/ 386 阅读

相关【前端性能优化】前端懒加载

目录 1. 什么是懒加载？ 2. 图片懒加载的基本实现 3. 结合节流优化图片懒加载

水深无声/ 2022年10月29日 04:30/ 0 赞/ 260 阅读

相关 tomcat加载静态资源进行优化

运行环境一个内存为4g的window服务器服务器有点差方法1.调整tomcat config/server.xml <Connector port="808

我不是女神ヾ/ 2022年05月26日 11:42/ 0 赞/ 217 阅读

相关前端优化之资源加载

一、CSS、JS的装载与执行 html页面加载渲染的过程 ![20180806104814.png][] 特点： 1、顺序执行、并发加载一个域名并

谁践踏了优雅/ 2022年05月17日 03:54/ 0 赞/ 244 阅读

相关前端优化之资源压缩

一、基础知识 0x1 浏览器请求过程 ![20180805125539.png][] 请求过程中一些潜在的性能优化点 dns是否可以通过缓存减少dns查

傷城~/ 2022年05月17日 03:04/ 0 赞/ 212 阅读

相关前端性能优化--懒加载和预加载

懒加载代码实现 html <!DOCTYPE html> <html lang="en"> <head>

ゝ一世哀愁。/ 2022年03月08日 12:50/ 0 赞/ 418 阅读

相关前端性能优化：使用异步加载，延迟加载依赖

日期：2013-7-1 来源：[GBin1.com][] [![前端性能优化：使用异步加载，延迟加载依赖][title.jpg]][title.jpg 1] [Requi

偏执的太偏执、/ 2022年01月16日 08:29/ 0 赞/ 391 阅读

相关前端性能优化三部曲(加载篇)

前言虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下

清疚/ 2022年01月12日 00:19/ 0 赞/ 709 阅读

相关前端性能优化之异步加载js

一个网页的有很多地方可以进行性能优化，比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前，先来看看浏览器加载js文件的原理。 > 浏览器加载 JavaScript

缺乏、安全感/ 2021年09月30日 10:38/ 0 赞/ 525 阅读