zoukankan      html  css  js  c++  java
  • 前端总结- 浏览器

    总结一下前端学习笔记,好记性不如何烂笔头。

    1. 前端的运行环境。

       1.1 浏览器如何渲染出页面。

            a. 现代浏览器的组成部分

           浏览器组成部分       

          User interface : 就是你看到的浏览器的样子,地址栏,状态栏。

          Brower engine:  在用户界面和呈现引擎之间传送指令

          Rendering engine: 就是将html 按照css的规则呈现出来

          javaScript interpreter: 就是执行JS 代码。

          networking:  与后台服务之间通过协议交换数据

          Data persistentence: 就是Cookie, 缓存以及本地数据库。

          UI backend: 封装底层操作系统绘制UI的方法

         

          b. 浏览器渲染出一个页面的流程

         

          图:呈现引擎的基本流程

        

                   

                   图:Webkit 主流程

      

        

               图:Mozilla 的 Gecko 呈现引擎主流程 (3.6)

           c. html 如何解析

                图:HTML 解析流程(摘自 HTML5 规范)

          Note: html 是如何加载js的?

          d. css 解析

               

               图:解析 CSS

       解析了CSS得到CSS的规则,然后将规则应用到DOM树上,生成attachment 或者 Frame. 下面就构建一个呈现树,然后绘制出来。 

        e.  呈现树构建

             

               图:呈现树及其对应的 DOM 树 (3.1)。初始容器 block 为“viewport”,而在 Webkit 中则为“RenderView”对象。     

                
         最后渲染引擎将这个呈现树绘制出来。

         参考

         http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

       1.2浏览器用户交互模型。

        浏览器上面的Js 是单线程执行的, 相应用户各种事件,执行对应的handler。为了保证一切正常工作,一个页面是基于这样的一个event-loop 模型工作的。

       但是整个页面至少有三个线程: 渲染线程, JS执行线程 和浏览器线程。

       JS线程负责执行Js代码执行; 浏览器线程负责相应各种事件;渲染线程如上所述负责将html绘制出来。

       其中JS线程在执行的时间会修改dom树,这时候渲染线程被锁。也就是,JS引擎和渲染线程之间互斥。

       那么浏览器线程,如何将接收到的事件告知JS线程? 如果JS线程这在执行,会不会中断当前的执行? 如果会,现场是否需要保护,以保证执行完事件程序后正常接着执行? 如果不会,那么事件会不会给丢掉呢?

       其实JS线程和window应用程序执行类似,也有一个消息队列。这是一个真正的队列,FIFO; 不像window message queue里面的message 有不同的优先级。

         

         

        JS thread就是一个while(1),从queue里面不停的取event(msg)执行。 而浏览器线程把各种event放到队列里面。 根据FIFO原则,JS thread相应事件。

        如果当前一个线程执行的时间比较长(不同浏览器的值是不一样的), 用户的操作就没有相应,那就是 假死了。

         当然对应于JS对象的内存模型:

         

       js momery model

       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

       1.3浏览器与后台数据交互。

        如果不能和后台数据交互,那么网站只是一个静态网站。 有了ajax,让网站内容可以动态生成。

          

  • 相关阅读:
    C# 文字转声音
    Parameter配置文件获取
    反射动态创建不同的Processor
    程序代码记Log
    Dictionary序列化和反序列化
    HQueue:基于HBase的消息队列
    Angular系列----AngularJS入门教程05:双向绑定(转载)
    Angular系列----AngularJS入门教程04:迭代器过滤(转载)
    Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)
    Angular系列----AngularJS入门教程02:静态模板(转载)
  • 原文地址:https://www.cnblogs.com/zhyg6516/p/3906632.html
Copyright © 2011-2022 走看看