项目中曾经遇到过一个很诡异的问题,,记录总结下:

1、首先回顾下原来实习时学习的什么时候用onload:

页面加载代码时,分两种:(1)DOM加载(2)Page加载
DOM加载只加载文本节点;而页面加载会加载完所有页面资源之后才开始执行JS代码,即加载完页面上的DOM、Flash、图片、Iframe后才会去执行onload里面的事件。
所以,如果JS代码是只依靠DOM节点而不去依赖页面的Flash、图片、Iframe等资源时,此时应该用直接加载而不用onload来加载。反之直接加载会有问题,这时用onload会比较好。

2、关于昨天就是JS渲染问题:
JS渲染无论是内嵌还是外链的,页面所有资源都会在JS加载体完成之后再解析,这个时候不处理好容易造成堵塞。
所以,一般将所有的script标签放至页面底部:所谓页面底部,不是指在html标签之后。html标签必须是最后一个标签。所谓底部是指在body标签之内最好在footer标签之前。

转载于:https://www.cnblogs.com/duanduanDio/archive/2012/02/11/2346929.html

页面加载时序问题----BUG分析相关推荐

  1. 从输入 URL 到页面加载完成中间都经历了什么

    摘要 目录 1.chrome浏览器资源加载时序分析 2.w3c提供的接口performance.timing分析 3.一个完整的URL 解析过程细分介绍 3.1.缓存相关 3.1.1.URL解析 3. ...

  2. html加载完成 产生动作,页面加载功能设计总结

    关于"前进",我们很难给出一个准确的定义.狭义上的"前进"指的是用户触发某个交互动作进入一个新页面.如何在进入一个新页面的过程中给予用户良好的体验呢?我们可以从 ...

  3. chrome如何分析页面加载时间

    以chrome为例,开发者模式中跟页面加载时间相关的是network面板. network 面板的 DOMContentLoaded和load 打开Network面板后,刷新页面,面板底部有这三个时间 ...

  4. layui 如何动态加载局部页面_从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  5. 从输入URL到页面加载的过程?由一道题完善自己的前端知识体系!

    梳理主干流程 这道题上,如何回答呢?先梳理一个骨架. 知识体系中,最重要的是骨架,脉络.有了骨架后,才方便填充细节.所以,先梳理下主干流程: 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览 ...

  6. 从输入url到页面加载完成中间都发生了什么?

    从输入 URL 到页面加载完成的过程中都发生了什么事情? nwind | 24 May 2014 背景 本文来自于之前我发的一篇微博: 不过写这篇文章并不是为了帮大家准备面试,而是想借这道题来介绍计算 ...

  7. 关于请求被挂起页面加载缓慢问题的追查

    本文前戏较多,务实的同学可以直接跳到结论. 由「钢的琴」网友脑洞大开延伸出了吉的他二的胡琵的琶,以及后来许嵩的「苏格拉没有底」,是否可以再拓展一下,得到哥本不爱吃哈根,哈根爱达斯等剧情乱入的关系. 上 ...

  8. 试简述smtp通信的三个阶段的过程_从输入URL到页面加载的过程?《转载》

    这是我看过这个问题最完整/优质的回答了,转来分享 知乎的排版不太好,可以浏览博客原文: http://gaoxiang.ga/index.php/archives/36/​gaoxiang.ga 前言 ...

  9. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

最新文章

  1. 增强型固态硬盘支持人工智能工作负载
  2. centos使用yum安装gcc
  3. 使用JConsole监控ActiveMQ
  4. 代码审查就是在排大便——你懂的!
  5. 动态创建DataGrid的模版列(转)
  6. 《上海市产业绿贷支持绿色新基建(数据中心)发展指导意见》印发了
  7. 【壹刊】Azure AD(三)Azure资源的托管标识
  8. SACC2019架构师大会PPT合集
  9. 用C++实现跨平台游戏开发之Irrlicht引擎
  10. 推荐5款超实用的小软件,建议先收藏再下载
  11. 机器学习-预测之BP神经网络模型原理及实战
  12. 《游戏设计、原型与开发——基于Unity与C#从构思到实现》学习笔记一
  13. P2339 [USACO04OPEN]Turning in Homework G 笔记/题解
  14. Shallow heap Retained heap
  15. 弱电布线工程实战攻略
  16. 快速学习-ElasticaSearch6.2.1搜索管理
  17. 如何在电子邮件中推销自己(服务)
  18. 一个菜鸟的心得——音量快捷助手软件分享
  19. C#理发店会员管理系统v1.0
  20. 吉林大学计算机图形学实验_计算机图形学学习笔记(一):图形学概论

热门文章

  1. python函数参数冒号_Python3 - 参数中的冒号和箭头
  2. 机器学习问题的十个实例
  3. python生成二维码_python生成二维码的实例详解
  4. 人脸对齐(十八)--Joint Face Alignment and 3D Face Reconstruction
  5. 图像分割(三)--Grab Cut
  6. 系统学习数字图像处理之灰度变换和空域滤波
  7. 2014-VGG网络讲解
  8. 无法为jsp编译类_《刺激战场》改名为《和平精英》,有2类玩家或可能无法登陆游戏...
  9. Mysq 隔离级别操作
  10. Your branch is ahead of ‘origin/main‘ by 1 commit.