zoukankan      html  css  js  c++  java
  • 【读书笔记】浏览器工作原理

    浏览器工作原理,原文地址:http://taligarsiel.com/Projects/howbrowserswork1.htm

    整个读了一遍,花了几个小时。简单总结下,就是下面两幅图。一是介绍了浏览器的组成,一个介绍了页面加载的过程。

    下面是一些摘抄的知识点:

    1. Webkit uses two well known parser generators - Flex for creating a lexer and Bison for creating a parser.
    2. HTML not context free grammar,CSS context free grammar,JavaScript context free grammar
    3. The parsing algorithm is described in details by the HTML5 specification. The algorithm consists of two stages - tokenization and tree construction.
    4. Among HTML tokens are start tags, end tags, attribute names and attribute values.
    5. Authors could mark the script as "defer" and thus it will not halt the document parsing and will execute after it is parsed. HTML5 adds an option to mark the script as asynchronous so it will be parsed and executed by a different thread.
    6. Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. Webkit blocks scripts only when they try to access for certain style properties that may be effected by unloaded style sheets.
    7. render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. The purpose of this tree is to enable painting the contents in their correct order.
    8. The renderers correspond to the DOM elements, but the relation is not one to one. Non visual DOM elements will not be inserted in the render tree. An example is the "head" element. Also elements whose display attribute was assigned to "none" will not appear in the tree (elements with "hidden" visibility attribute will appear in the tree).
    9. The style contexts are divided into structs. Those structs contain style information for a certain category like border or color. 
    10. We need to create a style context for this node and fill its style structs. 
    11. After parsing the style sheet, the rules are added one of several hash maps, according to the selector. This optimization eliminates 95+% of the rules.
    • According to CSS2 spec, the cascade order is (from low to high):
    1. Browser declarations
    2. User normal declarations
    3. Author normal declarations
    4. Author important declarations
    5. User important declarations
    • In order not to do a full layout for every small change, browser use a "dirty bit" system. A renderer that is changed or added marks itself and its children as "dirty" - needing layout.
    • static and relative cause a normal flow
    • absolute and fixed cause an absolute positioning
    • The lines are at least as tall as the tallest box but can be taller.

  • 相关阅读:
    查看占用内存cpu top10
    free 详解
    find
    服务器硬件查看
    firewalld命令使用
    firewalld-zone概念介绍
    Jenkins rpm包安装
    攻击防御案例
    filebeat收集系统登陆日志
    nginx转换json格式
  • 原文地址:https://www.cnblogs.com/dhuhank/p/4679462.html
Copyright © 2011-2022 走看看