![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器
star@星空
相逢一醉是前缘,风雨散,飘然何处!
展开
-
如何实现跨域?
前言跨域是个比较古老的命题了,历史上跨域的实现手段有很多,我们现在主要介绍三种比较主流的跨域方案,其余的方案我们就不深入讨论了,因为使用场景很少,也没必要记这么多奇技淫巧。1. 最经典的跨域方案jsonpjsonp本质上是一个Hack,它利用<script>标签不受同源策略限制的特性进行跨域操作。jsonp优点:实现简单兼容性非常好jsonp的缺点:只支持get请求(因为<script>标签只能get)有安全性问题,容易遭受xss攻击需要服务端配合json原创 2020-08-28 17:07:39 · 3025 阅读 · 0 评论 -
什么是浏览器同源策略?
概念同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源 是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。下表给出了相对http://store.company.com/dir/page.html同源检测的示例:浏览器中的大部分内容都是受同源策略限制的,但是以下三个标签可以不受限制:<img src=XXX><link href=XXX><script原创 2020-08-28 16:55:46 · 2033 阅读 · 0 评论 -
浏览器回流、重绘
1.浏览器重绘与重排的区别?重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分重排和重绘代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我原创 2020-08-28 16:49:14 · 1590 阅读 · 0 评论 -
DOM Tree是如何构建的?
转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串生成Tokens: 之后开始parser,浏览器会将HTML字符串解析成Tokens构建Nodes: 对Node添加特定的属性,通过指针确定 Node 的父、子、兄弟关系和所属 treeScope生成DOM Tree: 通过node包含的指针确定的关系构建出DOMTree...原创 2020-08-28 16:40:19 · 1078 阅读 · 0 评论 -
浏览器是如何渲染UI的?
浏览器获取HTML文件,然后对文件进行解析,形成DOM Tree与此同时,进行CSS解析,生成Style Rules接着将DOM Tree与Style Rules合成为 Render Tree接着进入布局(Layout)阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标随后调用GPU进行绘制(Paint),遍历Render Tree的节点,并将元素呈现出来...原创 2020-08-28 16:33:16 · 1523 阅读 · 0 评论 -
常见的浏览器内核
常见的浏览器、内核、javascript引擎?浏览器/RunTime内核(渲染引擎)JavaScript 引擎ChromeBlink(28~)Webkit(Chrome 27)V8FireFoxGeckoSpiderMonkeySafariWebkitJavaScriptCoreEdgeEdgeHTMLChakra(for JavaScript)IETridentChakra(for JScript)Node.js-V8.原创 2020-08-28 16:29:31 · 893 阅读 · 0 评论