浏览器端缓存
浏览器缓存根据一套与服务器约定的规则进行工作，在同一个会话过程中会检查一次并确定缓存的副本足够新。如果你浏览过程中，比如前进或后退，访问到同一个图片，这些图片可以从浏览器缓存中调出而即时显现(资源缓存到本地)
http 缓存
简单来说,浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。
浏览器缓存的优点
1.减少了冗余的数据传输
2.减少了服务器的负担，大大提升了网站的性能
3.加快了客户端加载网页的速度
缓存位置：
memory cache
资源缓存到内存
disk cache
缓存到磁盘中
缓存分类:
1.强缓存
2.协商缓存
浏览器再向服务器请求资源时,首先判断是否命中强缓存,再判断是否命中协商缓存!
强缓存
浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
协商缓存
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header 中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源无需更新，可使用本地的缓存。
同源策略
同源策略是一个重要的安全策略，它用于限制一个[origin]的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
同源定义
如果两个 URL 的 [protocol]、[port (en-US)] (如果有指定的话)和 [host] 都相同的话，则这两个 URL 是同源
解决办法
1.如果两个window或者frames包含的脚本可以把domain设置成一样的值，那么就可以规避同源策略，
每个window之间可以互相沟通
2.跨域资源共享（CORS）
这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。
允许服务端设置Access-Control-Allow-Origin头标识哪些站点可以请求文件，
或者设置Access-Control-Allow-Origin头为"*"，允许任意站点访问文件
（服务器那边设置响应头 Access-Control-Allow-Origin）
3.JOSNP允许页面接受另一个域的JSON数据，通过在页面增加一个可以从其它域加载带有回调的JSON响应
的<script>标签。
cookie,localstorage,sessionstorage
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效 (限制为4KB)
localStorage：除非被手动清除，否则将会永久保存。(限制为5M)
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。(限制为5M)
storage 仅在客户端中保存，不参与通信
拥有更大的存储容量
操作数据相比cookie更简单
不会随着每次请求发送到服务器
indexDB：
IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库
IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法， 允许储存大量数据，提供查找接口，还能建立索引。
请求方式 含义
GET（SELECT） 从服务器取出资源（一项或多项）
POST（CREATE） 在服务器新建一个资源
PUT（UPDATE） 在服务器更新资源（更新完整资源）
PATCH（UPDATE） 在服务器更新资源， PATCH更新个别属性
DELETE（DELETE） 从服务器删除资源
回流(重排)与重绘
回流:
当我们对DOM的修改引发DOM 几何尺寸的变化， 如 元素宽高修改，border，隐藏元素浏览器需要重新计算元素的几何属性，再进行绘制
重绘：
样式变化，但是宽高不变，如 背景色，颜色，和可见性： visibility:hiddent 等，需要重新绘制
!!!!回流一定会导致重绘
最容易被忽略的操作：获取一些特定属性的值
当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，你就要注意了！
“像这样”的属性，到底是像什么样？——这些值有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。
除此之外，当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”
浏览器内核
webkit是之前谷歌和苹果共同参与的项目，后来意见不同谷歌就自己跑路在webkit core上做了blink。opera以前用的presto，后来（13年？）和chrome一样改成了blink，IE的trident和firefox的gecko就不用说了
浏览器回收
V8 引擎的垃圾回收策略主要基于分代垃圾回收机制：
将整个堆内存分为新生代内存和老龄代内存，所有的内存分配操作发生在新生代
新生代内存又分成两部分，From（使用） 空间和 To（闲置） 空间，所有的内存分配操作发生在 From 空间
新生代空间发生 GC（复制算法）
From 空间中存活的对象复制到 To 空间，释放未存活的对象
转换两者的角色 From 空间变为 To 空间，To 空间变为 From 空间
如果某个对象已经经历过一次复制算法，就将该对象复制到老龄代空间
如果 To 空间的使用率超过了 25%，将整个空间的对象复制到老龄代空间。主要是为了角色转换之后留足分配内存的空间
老龄代空间发生 GC （标记清除与标记合并，GC会检测当前对象有没有被变量所引用，如果没有就回收）
主要采用标记清除算法，通过标记清除算法清理未存活的对象
清除算法完成之后会使内存空间出现不连续的状态，这种内存碎片会对后续的内存分配造成问题。因此在内存空间不足的时候采用标记合并算法，将活着的对象移动到内存的一端，完成之后清除另外一端的对象
新生代的 GC 触发要比老龄代的频繁
浏览器渲染html:
当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。而JS引擎的作用是通过DOM相关的API去操作DOM对象，而当我们操作DOM时，很容易触发到渲染引擎的回流或者重绘。 - 回流： 当我们对DOM的修改引发了元素尺寸的变化时，浏览器需要重新计算元素的大小和位置，最后将重新计算的结果绘制出来，这个过程称为回流。 - 重绘： 当我们对DOM的修改只单纯改变元素的颜色时，浏览器此时并不需要重新计算元素的大小和位置，而只要重新绘制新样式。这个过程称为重绘。
浏览器兼容:
1、不同浏览器的默认margin和padding不一致
2、图片的默认间距不一致
3、获取视口的宽高window.innerheight/width
4、CSS3的动画，过渡，渐变，flex也有
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter: alpha(opacity = 50);
7、event.offsetX/Y
8、绑定事件IE9才支持
网友评论