- 创建
Document，开始解析Web页面。这个阶段document.readyState = 'loading'。 - 遇到
link外部css，创建线程加载，并继续解析文档。 - 遇到
script外部js，并且没有设置async、defer，浏览器加载，并阻塞整个页面，等待js加载完成并执行该脚本，然后继续解析文档。 - 遇到
script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于`async`属性的脚本，脚本加载完成后立即执行（异步禁止使用`document.write()`）。 `defer`等待加载完成后执行。 - 遇到
img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。 - 当文档解析完成时，
document.readyState = 'interactive'。 - 文档解析完成后，所有设置有defer的脚本会按照顺序执行（注意与
async的不同，但同样禁止使用document.write()）。 document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。- 当所有
async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。 - 此后，以异步响应方式处理用户输入、网络事件等。
前端（十六）：浏览器加载时间线
2023-07-21
118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
简介：
浏览器加载时间线
目录
相关文章
|
3月前
|
存储
人工智能
前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
231
14
15
|
30天前
|
前端开发
JavaScript
API
（前端3D模型开发）网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先，通过官方教程搭建基本项目环境，了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着，编写了加载和保存STEP模型的具体代码，包括HTML界面设计和TypeScript逻辑实现。最后，通过运行项目验证功能，展示了从模型加载到保存的全过程。此外，`mxcad3d`还支持多种其他格式的三维模型文件操作。
131
19
24
|
2月前
|
缓存
监控
前端开发
在资源加载优化中，如何利用浏览器缓存提升性能？
通过以上这些方法，可以有效地利用浏览器缓存来提升资源加载的性能，减少网络请求次数，提高用户体验和应用的响应速度。同时，需要根据具体的应用场景和资源特点进行灵活调整和优化，以达到最佳的效果。此外，随着技术的不断发展和变化，还需要持续关注和学习新的缓存优化方法和策略。
102
53
53
|
4月前
|
缓存
前端开发
JavaScript
|
5月前
|
存储
缓存
前端开发
|
5月前
|
Web App开发
监控
前端开发
|
2月前
|
前端开发
JavaScript
API
前端开发的秘密花园：这些技巧让你轻松应对各种浏览器兼容性问题！
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域，追求极致用户体验的同时，浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践：使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧，助你轻松应对各种兼容性难题，创建更稳定、用户友好的网页应用。
45
3
3
|
2月前
|
机器学习/深度学习
自然语言处理
前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
226
1
1
|
2月前
|
缓存
前端开发
JavaScript
前端性能优化：提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代，网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧，包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法，可以显著提高网页性能，改善用户体验。
522
5
5
|
3月前
|
Web App开发
安全
中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品，支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件，并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末，安装包含详细说明。
1023
14
33
热门文章
最新文章
1
你用过的网站前端优化的技术有哪些？
2
从0到上线开发企业级电商项目_前端_01_sublime使用技巧
3
python 学习 第九篇 前端应用
4
前端包管理 pnpm 学习资料整理
5
【前端】JavaScript 实现下载图片但不自动预览图片
6
前端进阶|第四天从setTimeout、Promise看js 的异步机制
7
vue3前端项目一步一步自动化部署到linux的nginx服务上
8
后端码农谈前端（CSS篇）第七课：定位与浮动
9
想要使用 Nginx 部署多个前端项目，可行吗？
10
前端插件集合
1
XML DOM 浏览器差异
53
2
使用 Playwright 控制浏览器的启动、停止和等待
395
3
playwright使用：启动浏览器与多种运行方式
342
4
Playwright安装与Python集成：探索跨浏览器测试的奇妙世界
162
5
实用的chrome浏览器命令
91
6
jeecgboot开发环境服务启动刷新没问题，部署到tomcat，F5刷新或者浏览器刷新，会出现404
233
7
控制浏览器发送请求采用请求方式的详细介绍
139
8
使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
364
9
edge浏览器内存不足
85
10
XML DOM 浏览器差异
64