best wishes for myself
学习笔记(12)
文章目录
html
input & textarea
- 都是行内元素啊，都是关于文本输入类的元素。
- input textarea里面的value是puretext，无法控制样式
区别
- input是一个单行输入框
- 有value属性（value属性指定初始值），但是它不能自动换行。
- 通过size属性指定显示字符的长度，value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度
- textarea是一个多行输入框
- 没有value属性，但是它能自动换行
- 使用row、col指定大小
如何让textarea变成富文本编辑器呢
这个并没有找到很好的解决方案。除非通过js去控制一些属性
references：
- todo
但是其实像普通的div,p标签都是可以插入带有css样式的文本的，因此我们可以通过设置contenteditable属性来让这些标签实现类似于textarea的功能。
如下图所示，能完美复制粘贴而不丢失样式
<head>
<meta charset="UTF-8">
<title>text</title>
<style>
.box{
width:200px;
height:100px;
border:2px solid red;
}
</style>
</head>
<body>
<input type="text" />
<div class="box" contenteditable="true"></div>
</body>
</html>
css
如果不设置内边距和外边距，默认是什么状态呢？
- 每种浏览器都有一套自己默认的样式表。如chrome的body根元素默认margin为8px，不设置 margin和padding的时候就是浏览器内置的这个样式。
- 像div这种元素是没有margin和padding默认值的.（可自行在浏览器查看）
- 像p,ul等元素会有默认的margin和padding值.
- 而通常情况下我们会给body设置margin padding为0正是为了消除上面的浏览器差异。
详解z-index
和position的关系
-
对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。
-
对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。
-
IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。
-
z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。
参与关系
z-index 属性仅在节点的== position 属性为 relative, absolute 或者 fixed 时生效 ==.
顺序规则
如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点。
定位规则
如果将 前一个元素position 设为 static，位于文档流后面的节点依然会遮盖前面的节点浮动,，所以 position:static 不会影响节点的遮盖关系。
如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。
默认值规则
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
从父规则
如果 A, B 节点都定义了 position:relative, （子节点没有设置）A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.
如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.
所以整合上面的所有规则，一定要理清父元素之间的关系，不要单纯的只把z-index变成999就以为什么都可以了。
GPU加速
在浏览器渲染流程&Composite（渲染层合并）简单总结里面我们知道
Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
即元素有一个兄弟元素，并且该兄弟元素的z-index较低，且有一个组合层（即：元素在组合层之上渲染时会形成组合层
）
合成层的优点：
- 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
- 对于 transform 和 opacity 效果，不会触发 layout 和 paint
总结合成层的优势：一般一个元素开启硬件加速后会变成合成层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。
references:
针对刚刚有关z-index开启GPU加速的问题，用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
理由：GPU不仅需要发送渲染层图像到GPU，而且还需存储它们，以便稍后在动画中重用。别盲目创建渲染层，一定要分析其实际性能表现。因为创建渲染层是有代价的，每创建一个新的渲染层，就意味着新的内存分配和更复杂的层的管理。对于使用移动设备的用户来说是很坑的。移动设备没有台式机那么多的内存。过多的GPU加速会引起页面卡顿甚至闪退。
因此格外再总结一下GPU加速的问题：
如何开启GPU加速
-
3D或透视变换(perspective，transform) CSS属性
-
使用加速视频解码的video元素
-
拥有3D (WebGL)上下文或加速的2D上下文的canvas元素
-
混合插件(如Flash)
-
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
-
拥有加速CSS过滤器的元素
-
元素A有一个z-index比自己小的元素B，且元素B是一个合成层（换句话说就是该元素在复合层上面渲染），则元素A会提升为合成层
GPU加速优势
优先使用渲染层合并属性，避免layout，paint。（比如通过改变元素的transform实现移动，伸缩变换而非改变物体的left，top，width，height避免layout，paint）（16ms优化）因此避免了整体的重绘。
- 根据这个优点，我们可以把页面中一些布局经常变换的dom（动画）提升到独立的层。
- 因此也恰恰因为前文提到的独立动画反而产生了更多的组合层，过多的GPU加速进而又导致动画卡顿(因此使用了RAF后一定不会让动画卡顿吗？不是的)。因此要适当提高z-index,避免形成太多的组合层。
浏览器渲染一个页面的步骤
获取DOM并将其分割为多个层(RenderLayer)
将每个层栅格化，并独立的绘制进位图中
将这些位图作为纹理上传至GPU
复合多个层来生成最终的屏幕图像(终极layer )。
javascript相关
对SPA的理解
references：
概念
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。
优点
1).良好的交互体验
用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。
单页应用内容的改变不需要重新加载整个页面。页面之间的切换就不会出现“白屏”现象，因此也不会出现假死或者闪烁的现象。
2).良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。
3).减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
这点其实存在异议，多页应用也可以让服务端只出数据啊，在一定程度上这条优点更适用于前端渲染页面。，（第四条优点同）
4).有利于代码复用，共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；
缺点
1).SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。
2).前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。
3).初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。
针对这个问题也有各种各样的优化方式：
- 使用CDN加速
- code split
- 代码压缩
- css放在头部避免阻塞渲染，js放在底部，避免阻塞页面解析
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
