查漏补缺（六）

查漏补缺（六）

重排重绘

重排（relayout/reflow），也叫回流，重排一定引起重绘

重排

• 引起重排的操作：

1. 页面首次渲染。
2. 浏览器窗口大小发生改变。
3. 元素尺寸或位置发生改变。
4. 元素内容变化（文字数量或图片大小等等）。
5. 元素字体大小变化。
6. 添加或者删除可见的DOM元素。
7. 激活CSS伪类（例如：:hover）。
8. 设置style属性
9. 查询某些属性或调用某些方法。

注意：translate不会引起重排，因为translate 会为对应 DOM 节点生成新的图层(也叫开启硬件加速)，不会影响到原来的DOM。

重绘

页面中元素样式改变不影响元素在文档流里面的位置，此时引起重绘，重绘不一定引起重排

前端性能优化

1. 减少DOM操作；
2. 采用更优的API替代不好的API；
3. 减少重排；

• 避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性
• 实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局
• 动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。
• 不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围

4. css及动画处理

参考：https://zhuanlan.zhihu.com/p/40605154

position

• position: relative相对定位

1. 不脱离文档流；
2. 相对于原来的位置进行偏移；
3. 提升层级；
4. 不影响元素本身的特性

• position: absolute

1. 脱离文档流；
2. 父级有定位就以父级的位置发生偏移；
3. 提升层级；
4. 内嵌支持宽高；
5. 块元素内容撑开宽度

• position: fixed

1. 与绝对定位类似；
2. 始终相对于整个文档进行偏移

注意：定位元素层级默认后者高于前者，如果写在前面的元素想要在最上面，使用z-index提高层级

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
水平距离 垂直距离 模糊距离 阴影大小 阴影颜色 将外部阴影改成内部阴影

getComputedStyle()

获取元素css属性值，IE中是currentStyle()方法

//获取一个元素的任意 CSS 属性值
function getStyle(element, attr) {
    if(element.currentStyle) {
        return element.currentStyle[attr];
    } else {
        return getComputedStyle(element, null)[attr];
    }
}

css属性继承

可继承

1. 字体、字体大小、颜色、text-aglin；
2. 光标：cursor；
3. 声音：speak；
4. border-style；
5. visibility；
6. list-style，list-style-type；
7. quotes
8. text-indent
9. word-spacing
10. letter-spacing
11. direction
12. line-height

不可继承

1. 宽高；
2. 最小最大宽高；
3. 浮动；
4. 定位；
5. 层级；
6. 背景；
7. 文本阴影；
8. 盒子模型属性

判断是否为真

null == undefined //true
null == null //true
undefined == undefined //true
null === undefined //false
undefined === undefined //true
null === null //true

当输入为2的时候返回值是多少

public static int getValue(int i) {
    int result = 0;
    switch (i) {
        case 1:
            result = result + i;
        case 2:
            result = result + i * 2; //4
        case 3:
            result = result + i * 3; //10
        default:
            result = result + i * 4; //18
    }
    return result;
}
//最终返回18，因为每个case匹配后没有break，所以会执行后面的case直到遇到break

下面数据结构能够支持随机的插入和删除操作、并具有较好的性能的是

A. 链表和哈希表   
B. 数组和链表
C. 哈希表和队列
D. 堆栈和双向队列

队列遵循先进先出的原则，排除C、D，数组删除插入需要移动大量元素排除B，选A

HTTPS建立连接的过程

DNS TCP TLS HTTP
1.HTTP/1.1定义的 Cache-Control 头用来区分对缓存机制的支持情况， 请求头和响应头都支持这个属性。 2.Last-Modified：一种弱校验器。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。 3.Etags：缓存的一种强校验器。如果资源请求的响应头里含有ETag, 客户端可以在后续的请求的头中带上 If-None-Match 头来验证缓存。

Javascript执行引擎

Node.js的Buffer类型对象在创建时内存不会分配到V8堆上。

ECMAScript 2015中规定了执行引擎需要实现EventLoop机制
V8作为最先进的Javascript执行引擎，可以在执行阶段对所有代码进行优化。
Node.js通过V8实现异步I/O。
Node.js的Buffer类型对象在创建时内存不会分配到V8堆上。
Chakra是Firefox内嵌的Javascript执行引擎。
代码正确的情况下，垃圾回收不会导致有内存无法回收。

浏览器缓存

1. indexDB；
2. localStorage；
3. sessionStorage；
4. applicationCache；
5. Cache API
   File System API 是文件系统相关API

cookie
通过 JavaScript 设置 Cookie，如果不指定 expires（过期时间），那么cookie 的过期时间就会是会话期间，也就是说，此时的cookie是和session等效的，唯一的不同是此种cookie是存储在客户端的内存中，Session是存储在服务器端的内存中