LY

> [超详细！搭建一个前端错误监控系统](https://zhuanlan.zhihu.com/p/51446011?utm_source=wechat_session&utm_medium=social&utm_oi=755482136345059328)

# 深入浅出浏览器渲染原理 > 转自[深入浅出浏览器渲染原理](https://github.com/ljianshu/Blog/issues/51#issue-395780648) ## 前言 浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。本文我们主要介绍关于 WebKit 的这部分渲染引擎内容以及几个相关的问题。 **[思维导图](https://github.com/ljianshu/Blog/blob/master/%E6%96%87%E7%AB%A0%E4%B8%AD%E7%9A%84%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86.xmind)** [](https://camo.githubusercontent.com/a8fb8b646b757bc6b4439360feee40633f0aa035/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f312f312f313638306131363566366438653133383f773d3136323426683d34373426663d706e6726733d313533323230) ## 浏览器工作大体流程 [](https://camo.githubusercontent.com/2f8e4192ed63300d9c1d508c6936b8cda5f9fb3b/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f31322f32372f313637663035373730346239346630383f773d37303526683d32323726663d706e6726733d313630323734) 浏览器工作流程大体分为如下三部分： ### 1）浏览器会解析三个东西： - 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 -...

1. 侧边栏不会刷新 解决方案：给 `$route.query` 设置一个任意值即可，如： ```js const qparams = this.$route.query; qparams.tmp_randomTime = isNaN(parseInt(qparams.tmp_randomTime)) ? '' : parseInt(qparams.tmp_randomTime); ``` 2. 分页ajax拉取表格数据，`el-pagination` 中的 page无法正确高亮 解决方案：total(总条数)默认值必须设置为 `null`。例如： ```js searchForm: { page: 1, size:...

## 先放大，再缩小 方法1： ```css .box:before { position: absolute; top: 0; left: 0; width: 100%; right: 0; height: 1px; content: ''; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: #e2e2e2; } ``` 方法2： ```css...

### 参考文档 - [CSS网格布局（Grid）完全教程](https://www.zcfy.cc/article/learn-css-grid-a-guide-to-learning-css-grid-jonathan-suh) - [10分钟理解CSS3 Grid](https://segmentfault.com/a/1190000017439234) - [CSS 网格布局学习指南](https://blog.jirengu.com/?p=990)

#### 1、vm.$attrs简介 首先我们来看下vue官方对vm.$attrs的介绍： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。 猛一看有点看不明白.... #### 2、场景介绍 vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递，只能由父组件传递给子组件，子组件再传递给孙子组件...像下面这样： ``` .... 就这样一层一层的往下传递passdown这个变量，最后才能用{{passdown}}。 ``` 假如我们需要传递的属性只有1,2个还行，但是如果我们要传递的有几个或者10来个的情况，这会是什么样的场景，我们会在每个组件不停的props，每个必须写很多遍。有没有其它方便的写法？有，通过vuex的父子组件通信，的确这个是一个方法，但是还有其它的方法，这个就是我们要说的。通过inheritAttrs选项，以及实例属性$attrs ####...

> [JS 中的抛错(try、catch、finally)](https://zhuanlan.zhihu.com/p/43926354) 结论： 1. finally 是所有情况下都会执行，不管前面是成功、失败、报错、还是返回值 2. 在执行 finally 代码块的时候，之前的 "结束状态" 都会保存，如果内部有类似的状态，则会覆盖掉 之前的 "结束状态"，外层调用方只能拿到 finally 的结果了。

[JavaScript (a ==1 && a== 2 && a==3) 可能为 true 吗？](https://zhuanlan.zhihu.com/p/33029291) [Can (a== 1 && a ==2 && a==3) ever evaluate to true?](https://stackoverflow.com/questions/48270127/can-a-1-a-2-a-3-ever-evaluate-to-true)

> [10 分钟理解 BFC 原理](https://zhuanlan.zhihu.com/p/25321647) ## 一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: - 普通流 (normal flow) > 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 - 浮动 (float) > 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。 - 绝对定位 (absolute positioning) >...

> [八种方法实现CSS页面底部固定](https://segmentfault.com/a/1190000017805669)  当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部， ## 方法一：footer高度固定+绝对定位 html ``` Header Content Footer ``` CSS ``` .dui-container{ position: relative; min-height: 100%; } main { padding-bottom: 100px; } header, footer{ line-height: 100px; height:...