RAIL以用户为核心的性能模型学习：（没看）

RAIL，以用户为核心的性能模型：http://www.iteye.com/news/31048
渲染性：http://www.jianshu.com/p/b74e348612de

Christian-health commented 6 years ago

元素面板

浏览器默认的样式表：（没看）

浏览器默认样式（User Agent Stylesheet）：http://www.cnblogs.com/xcsn/p/4664079.html

User Agent 样式表：https://meiert.com/en/blog/user-agent-style-sheets/（老外的文章写的好）

css自定义属性（自定义变量）：（没看）

css自定义属性三篇文章：https://zhuanlan.zhihu.com/p/25714131（翻译老外的比较好）

Dom事件断点调试

调试代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="main">
    <button id="first">第一个按钮</button>
    <button onclick="modification()">添加子节点</button>
    <button onclick="addedProperty()">添加属性</button>
    <button onclick="remove()">删除第一个按钮</button>
</div>
<script type="text/javascript">
    function modification(){
        // 子树修改 触发dom事件，引起断点
        var element = document.getElementById('main');
        console.log('element',element);
        //modify the element's subtree.
        var mySpan = document.createElement('span');
        element.appendChild( mySpan );
    }

    function addedProperty() {
        // 属性修改 触发dom事件  引起断点
        var element = document.getElementById('main');
        // class attribute of element has been modified.
        element.className = 'active';
    }
    function remove() {
        // 节点移除  触发dom事件  引起断点
        document.getElementById('first').remove();
    }
    </script>
</body>
</html>

如图可以看到，设置断点之后触发了哪些代码：