美文网首页
网页页面加载

网页页面加载

作者: 赵任QAQ | 来源:发表于2018-07-01 22:34 被阅读0次

网页在加载的时候会先下载被引用的文件,就是<head></head>标签中的文件。
在遇到javaScript文件的时候,

浏览器会暂停解析(不是暂停下载),将控制权交给JavaScript引擎(解释器),
如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎。

当<head></head>标签中的文件解析完毕之后,浏览器开始解析body中的代码。

如果此时head中引用的外部文件没有下载完,将会继续下载。
浏览器解析body代码中的元素,会按照head中声明一部分样式去解析。
如果此时遇到body标签中的<script>,同样会将控制权交给JavaScript引擎来解析JavaScript。
解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后,css会重新渲染整个页面的html元素。

因此,把javaScript文件放在body中靠后的位置会比较好,因为JavaScript 会操作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素。

window.onload: 等待页面中的所有内容加载完毕之后才会执行
$(document).ready(): 页面中所有DOM结构绘制完毕之后就能够执行

相关文章

  • 网页页面加载

    网页在加载的时候会先下载被引用的文件,就是 标签中的文件。在遇到javaScript文件的时候, 浏览器会暂停解...

  • Android WebView判定网页加载的错误

    一 前言 在WebView加载网页的过程中,有时会页面加载不出来的情况,如下: 那么如何知道网页加载错误了呢? 二...

  • WKWebView 加载页面的自适应大小 与 禁止捏合手势

    1. WKWebView加载的网页自适应大小 由于原网页没有做手机端的适配,所以有时WKWebView在加载页面后...

  • 前端性能优化

    1、网页内容 --减少http请求数 --减少DNS查询次数 --避免页面跳转 --缓存加载 --提前加载 --减...

  • 1.利用ajax获取后台数据

    特点:能够局部刷新网页数据,不用重新加载整个页面。

  • 学习Ajax

    什么是Ajax 说白一句,Ajax它是在不用重新加载整个网页情况下,(因为传统的网页加载内容,必须要重载整个页面)...

  • jquery网页加载进度条的实现

    本次主要介绍一下网页加载进度的实现。如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应...

  • 网站优化之路-图片懒加载使用方法及感受

    对前端而言,提高网页的加载速度非常重要。众所周知,图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面...

  • window.onload=function()以及onload

    window.onload: 页面加载完成 一,window.onload的用法: 该方法用于在网页加载完毕后立刻...

  • 前端图片懒加载及节流

    懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方,对应位置的内容才进行加载显...

网友评论

      本文标题:网页页面加载

      本文链接:https://www.haomeiwen.com/subject/exwhuftx.html