发布于： 2018.4.17 | 阅读： 01 | 标签： 知识点
浏览器零碎知识，多读多背。。。。。。
一、引发回流（Reflow）的操作：
（1）改变DOM元素的大小或位置：
（2）增加、删除 DOM 结点时。
（3）Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
（4）设置 style 属性的值。
注：display:none 会触发 reflow，而 visibility:hidden 只会触发repaint，因为没有发现位置变化。Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。
二、浏览器解析大概的工作流程大致可归纳为四个步骤：
一个渲染引擎大致包括HTML解释器，CSS解释器，JavaScript引擎
解析渲染该过程主要分为以下4个步骤：
（1）用HTML解析器解析HTML生成DOM树，放在内存上，
（2）用CSS解析器解析CSS并附着在DOM树上，生成Render树，放在内存上，
（3）把Render树布局到浏览器上
（4）把Render树绘制到浏览器上
重绘：尺寸和位置没有变化
回流：尺寸或位置有变化
三、http请求的过程：
（1）浏览器查找当前URL是否存在本地缓存
（2）浏览器开启线程，解析URL，通过CDN、DNS找到服务器
（3）浏览器通过三次握手，与服务器建立连接
（4）浏览器请求报文–服务器响应报文–浏览器接受数据–浏览器渲染页面
（5）浏览器与服务器通过四次挥手，断开连接
四、主要浏览器的内核及其前缀
（1）IE trident -ms-
（2）欧朋 presto -o-
（3）谷歌 webkit -webkit-
（4）火狐 gecko -moz-
五、栈和队列的区别
（1）栈：先进后出
（2）队列：先进后出
六、验证用户是否登录的逻辑：
1)用户密码登录时，在后台的req中记住session.
2)如果用户保存登录密码，则记住cookie，否则把当前用户的cookie设置为空;
3)每次用户需要向后台进行请求时，进行状态检验：
session是否存在？若存在，则继续进行请求操作，并将session的有效时间重新设置一次；若session不存在，则判断cookie是否存在？若存在，使用该cookie完成自动登录，即完成了一次 “ 在后台的req中记住session ” );若不存在，则页面重定向到登录页面。
来源： http://blog.csdn.net/xixi880928/article/details/69389337
七、怎么让Chrome支持小于12px 的文字？
span{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}八、前端路由与单页页面
1、路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。
2、传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。
3、单页应用，就是只有一个页面，用户访问一个网址，服务器返回的页面始终只有一个，就算用户改变了浏览器地址栏的内容且页面发生了跳转，服务器不会重新返回新的页面。
4、优点：（1）没有了网络延迟，用户体验会有相当大的提升。后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。（2）前端路由做单页面网页，页面变了Url也会变，用户能复制到想要的url。用ajax请求做不到这一点
5、缺点：（1）首次加载时间相对较长。在第一次加载的时候，需要将所有前端资源进行加载，前端资源会比多页面应用大一些，加载时间相对较长。（2）对搜索引擎不友好： 单页应用只有一个页面，无法对每一个路由做SEO。（3）没有合理地利用缓存：使用浏览器的前进，后退键的时候会重新发送请求。
九、扩展谷歌浏览器插件的步骤（以“React Developer Tools”为例）：
（1）打开http://www.cnplugins.com/，
（2）在“输入Chrome插件名称”里输入“React Developer Tools”
（3）点击“插件下载”
（4）点击“高速下载器下载”
（5）打开chrome://downloads/找到“React Developer Tools”
（6）打开chrome://extensions/ ，并将React Developer Tools”拖拽至这个页面
十、清除缓存
（1）用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control。xmlHttp.setRequestHeader(“If-Modified-Since”,”0”);xmlHttp.setRequestHeader(“Cache-Control”,”no-cache”);
（2）直接用cache:false
（3）用随机数
（4）随机时间
十一、不同页面之间的通信
（1）使用localStorage+storage
A、使用localStorage.setItem(key,value);添加内容
B、使用storage事件监听添加、修改、删除的动作
（2）使用cookie+setInterval
（3）iframe
（4）postmessage
十二、window对象
window对象是相对于web浏览器而言的，它并不是ECMAScripta规定的内置对象，内置对象的定义是：“由ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。”window对象是宿主对象也就是在一定的环境中才会生成的对象（这里也就是指浏览器），而global对象是在任何环境中都存在的。window对象具体也就是指浏览器打开的那个窗口。
