怎样理解网页的加载流程

我们可以把网页的加载过程理解为: 下载与解析. 这两个过程是同时进行的, 也就是说, .html文件还没下载完, 解析已经开始了. 大致的加载流程如下:

1. 浏览器边下载html文件, 边解析其内容.

2. 解析过程中发现有script标签时, 会暂停dom和css解析, 转而交给js引擎去处理. 这里分为两种情况, 一种是script标签内有代码, 这时会执行完这里面的代码再继续dom和css的解析, 如果script是引用的外部js文件, 那就会发起请求下载这个js文件, 再执行, 这个操作会花费较多时间, 因此一般是将这种有外链的js文件引用放到body的最底下, 这样可以保证页面是解析完成后再执行script代码, 提升用户体验;

3. script标签里的代码执行完毕, 控制权会交还给渲染引擎, 继续解析.

原文地址:https://www.cnblogs.com/aisowe/p/11697804.html

时间: 2024-08-02 21:15:04

怎样理解网页的加载流程的相关文章

如何有效的优化网页的加载速度?优化网页速度的7种方法

首先,我们来看下网页的加载流程.打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript.css和图片文件,最终根据这些文件,将页面渲染出来. 我们可以看到,影响一个网页展示速度的主要因素不是网页本身,而是它依赖的一些其它文件,如果优化了这些资源的加载速度,那么网页展示的速度也就上去了. 让我来一一列举: 1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情

webkit 子资源加载流程

一个网页由主文档和子资源组成.主文档描述网页的框架,布局.子资源是组成网页的子元素,包括图片.CSS.JS等.为了显示网页,先要把资源加载到内存.加载就是指把需要的资源加载到内存这一过程.Webkit用到很多缓存机制,加载可能是从网络加载,也可能是从本地缓存加载.Webkit的加载分为两条线,一条是主文档的加载,一条是子资源的加载. 首先需要解析主文档才知道用到哪些子资源.但并不一定要等到解析完主文档才加载子资源,也可能是边解析边加载子资源,即受到部分主文档就开始解析,解析到某个子资源就开始加载

android7.x Launcher3源码解析(3)---workspace和allapps加载流程

Launcher系列目录: 一.android7.x Launcher3源码解析(1)-启动流程 二.android7.x Launcher3源码解析(2)-框架结构 三.android7.x Launcher3源码解析(3)-workspace和allapps加载流程 前两篇博客分别对Lancher的启动和Launcher的框架结构进行了一些分析,这一篇,将着重开始分析界面的加载流程. 1.整体流程 先上一张整体的流程图吧.(图片看不清可以下载下来看或者右击新开个页面查看图片) 先从Launc

Android View的加载流程

什么是Activity? Activity是 用户操作的可视化界面:它为用户提供了一个放置视图和交互操作的窗口.采用setContentView的方法提供.因此,可以理解Activity.Window.View三者关系为.Activity提供Window ,View被添加到Window中. 以刷墙举例: Activity可以理解为房间,Window就是房间内的墙面, 我们在墙面上可以刷各种不同的图案,这些图案就是View. Activity View的加载流程 1.Activity在被创建之初,

切图崽的自我修养-优化图片加载流程

前言 优化! 又是优化! 切图崽们作为整个web应用的纽带,连接着用户行为和机器性能. 而优化的最终意义,在于在这两者之间取得一个最佳的平衡点. 对于图片资源的加载来说,更是如此. 今天我们就来简单说说,项目开发中常见的图片加载优化方式. 预加载 1.遮罩大法 我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调,只是完成了DOM树的构建. 诸如Css的渲染以及页面内图片等资源的下载不一定完成了.所以如果此时呈现页面,页面会非

Android5.1图库Gallery2代码分析数据加载流程

图片数据加载流程. Gallery---->GalleryActivity------>AlbumSetPage------->AlbumPage--------->PhotoPage 相册集                        照片集                 某张图片 1,AlbumSetPage.java private void initializeData(Bundle data) { String mediaPath = data.getString(A

WebKit加载流程 - 概述

之前写了几篇加载流程的说明,是从下向上看,有点只见树木不见森林的感觉.经过最近一段时间的学习,有了能加以概括抽象的方法. WebKit加载流程和页面组成是直接相关的,页面就是WebKit要加载的对象.所以WebKit负责加载的类也与负责页面管理的类相对应.Apple关于WebView的说明里清楚表现了页面视图上的MVC结构: 一个页面从元素上也有其层次结构,并且和加载类对应,如下: 从页面元素上讲WebView代表了一个页面的呈现,对应一个Page. 一个Page包含一个或多个Frame,其中一

如何优化网页的加载速度

1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情况下,尽可能的使用高压缩率的图片格式,图片格式可以按照这个优先级选择webp > jpeg > png > bmp.同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源,不要没事就把原图拉下来使用.以前我就遇到过这种情况,一个196*196大小区域展示的图片,它的文件竟然达到了几兆,最后才发现把1960*1960分辨率的原图拉下来了. 2.开启网络压缩 大部分浏

kettle插件加载流程

kettle插件加载流程 1.前言 kettle遵循着插件机制,基于插件使得kettle整个结构非常清晰,耦合性低,移植性强,特别是对kettle进行二次开发尤其方便,根据个人了解,扩展step类型的插件比较多,具体步骤可以参考:http://blog.csdn.net/d6619309/article/details/50020977  .通过了解插件的加载流程,不仅kettle的原理有深一层的认识,还有助于在进行二次开发遇到问题的时候进行定位(例如,最近遇到个情况就是通过kettle api