美文网首页
浏览器环境

浏览器环境

作者: 蘑菇酱960903 | 来源:发表于2018-05-08 16:58 被阅读0次

一、script标签的加载
浏览器从上到下下载html网页,当碰到srcipt标签会把控制权交给javascript引擎,执
行完毕之后,再将控制权交给渲染引擎,继续往下渲染html网页

script插入位置

  1. script文件放在网页尾部加载,好处:①如果脚本文件下载失败,网页也能渲染页面,不会出现空白情况;②当脚本文件中包含着有操作dom,那么必须等待dom生成才能调用。
DomContentLoaded : (ie9+)跟$(document).ready({}) 相似
onload : js事件,会在所有内容(dom树,文件内容等)加载完成之后才执行
$(document).ready({}) : jquery事件,一旦html中dom树加载完成之后,就会调用,不用等待图片文件,字体文件等,

Ⅰ 带有defer 脚本文件,浏览器继续往下解析html网页,并行下载脚本文件,完成解析html网页之后,再去执行下载的脚本
Ⅱ 带有async 脚本文件,浏览器继续往下解析html网页,并行下载脚本文件,当脚本文件下载完成之后浏览器会停止解析html网页,执行脚本文件,结束之后再解析html网页

  1. 动态加载script
    缺点:无法保证哪个脚本src先完成加载后执行

二、浏览器组成 (渲染引擎 + javascript引擎)

  1. 渲染引擎:
    Ⅰ解析代码:解析html代码成dom,css代码成css object model
    Ⅱ对象合成:将dom tree 和 css tree 合并成一颗render tree
    Ⅲ布局:根据盒子模型计算出render tree 的布局
    Ⅳ绘制:将render tree 绘制到屏幕上
    http://www.wdshare.org/article/5770ed9753c50d1a18f64a97

相关文章

  • 判断当前脚本运行环境,是浏览器还是node

    node环境:global对象undefined 浏览器环境:global对象不为window,则一定不是浏览器环境

  • ES6快速学习(一)变量声明

    ES6 代码在浏览器环境运行!代码在浏览器环境运行!代码在浏览器环境运行!我用的google!!! 变量声明 le...

  • 浏览器特征

    浏览器存储环境

  • php

    介绍: html css js运行环境为浏览器,浏览器在window上运行. 运行环境:wamp phpstudy...

  • 脚注

    1 JavaScript语言可以在非浏览器环境下运行。脱离了浏览器环境束缚的JavaScript不但性能更好,而且...

  • 脚注

    1 JavaScript语言可以在非浏览器环境下运行。脱离了浏览器环境束缚的JavaScript不但性能更好,而且...

  • 关于请求的理解

    在node环境,不存在跨域问题, 在浏览器环境才存在跨域的问题. 在node环境,用不了axios , 在浏览器环...

  • 浏览器环境

    浏览器环境 五大主流浏览器内核1.火狐Firefox: Gecko ...

  • 浏览器环境

    一、script标签的加载浏览器从上到下下载html网页,当碰到srcipt标签会把控制权交给javascript...

  • 浏览器环境

    window对象 history对象 Cookie Web Storage:浏览器端数据储存机制 AJAX CORS通信

网友评论

      本文标题:浏览器环境

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