面试题来源于我的项目「前端面试与进阶指南」
本章关于浏览器原理部分的内容主要来源于浏览器工作原理，这是一篇很长的文章，可以算上一本小书了，有精力的非常建议阅读。
| 浏览器/RunTime | 内核（渲染引擎） | JavaScript 引擎 |
|---|---|---|
| Chrome | Blink（28~） Webkit（Chrome 27） |
V8 |
| FireFox | Gecko | SpiderMonkey |
| Safari | Webkit | JavaScriptCore |
| Edge | EdgeHTML | Chakra(for JavaScript) |
| IE | Trident | Chakra(for JScript) |
| PhantomJS | Webkit | JavaScriptCore |
| Node.js | - | V8 |
图：浏览器的主要组件。
值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
浏览器会『从右往左』解析CSS选择器。
我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。
以下这段css为例
.mod-nav h3 span {font-size: 16px;}我们对应的DOM Tree 如下
若从左向右的匹配，过程是：
如果从右至左的匹配：
后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
我们往往通过改变class的方式来集中改变样式
// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'
// 根据判断来设置不同的class
ele.setAttribute('className', theme)我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i ){
let node = document.createElement("p");
node.innerHTML = i;
fragment.appendChild(node);
}
document.body.appendChild(fragment);将元素提升为合成层有以下优点：
提升合成层的最好方式是使用 CSS 的 will-change 属性：
#target {
will-change: transform;
}关于合成层的详解请移步无线性能优化：Composite
短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。
comet有两种主要实现手段，一种是基于 AJAX 的长轮询（long-polling）方式，另一种是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。
具体两种手段的操作方法请移步Comet技术详解：基于HTTP长连接的Web端实时通信技术
长轮询优缺点：
长连接优缺点：
使用指南请看Server-Sent Events 教程
SSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5技术。
使用指南请看WebSocket 教程
Websocket是一个全新的、独立的协议，基于TCP协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。
后面性能优化部分会用到，先做了解
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行
Web Worker教程
后面性能优化部分会用到，先做了解
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理，创建有效的离线体验。
Service workers教程
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源是指"协议 域名 端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
浏览器中的大部分内容都是受同源策略限制的，但是以下三个标签可以不受限制：
href=XXX>
-
点赞
-
评论
-
分享
x
海报分享
扫一扫，分享海报
-
收藏
-
手机看
分享到微信朋友圈
x
扫一扫，手机阅读
-
-
打赏
- 文章举报
打赏
-
-
程序员面试官
“你的鼓励将是我创作的最大动力”
5C币
10C币
20C币
50C币
100C币
200C币
确定
- 关注
收起全文
nonpricklycactus的博客
08-27 
147
网络原理面试题
1.OSI与TCP/IP各层的结构与功能，都有哪些协议？（5点）2.Tcp三次握手和四次挥手3.为什么要三次握手？4.为什么要回传SYN？5.传了SYN为什么还要传ACK？6.为什么要四次挥手？7.TCP与UDP的区别?8.tcp协议如何保证可靠传输？（8点）9.ARQ协议10.滑动窗口和流量控制？
11.拥塞控制？12.在
浏览器输入url地址显示网页的过......
Crystal的博客
04-01 149
前端面试题之浏览器
与
浏览器相关
面试题文章目录1. reflow(回流)和repaint(重绘)优化2.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？3.localStorage 与 sessionStorage 与cookie的区别总结4.
浏览器如何阻止事件传播，阻止默认行为5.虚拟DOM方案相对原生DOM操作有什么优点，实现上是什么
原理？6.
浏览器事件机制中事件触发三个阶段7.什么是跨域？......
添加代码片
还能输入1000个字符
LuckyWinty的博客
10-18 273
浏览器相关原理(面试题)详细总结二
1.
浏览器渲染过程是怎样的？按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、栅格化和显示。渲染进程将 HTML 内容转换为能够读懂DOM 树结构。渲染引擎将 CSS 样式表转化为
浏览器可以理解的styleSheets，计算出 DOM 节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将......
weixin_33875564的博客
05-21 341
面试官(6): 写过『通用前端组件』吗?
很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus的实现面试官系列(3): 前端路由的实现面试官系列(4): 基于Proxy 数据劫持的双向绑定优势所在面试官系列(5): 你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、A......
牧心[ mx1024 ] 学习人生
03-17 613
**PC浏览器面试题.......【2014.03.17】
欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！1584276
11 1.vector和list的区别和选择；2.虚析构函数；3.COM套件模型
原理；4.UDP多大不容易丢包；5.6.7.HTTPS
原理8.windbg调试程序启动时刻9.CDN加速
原理10.如果要你设计
浏览器...
lovezhaohaimig的博客
05-05 6663
软件工程的面试题总结
JAVA开发工程师（一）JAVA开发工程师（二）JAVA开发工程师(三)
XunZhaoHaiLan的博客
09-09 117
数组: 100万个成员的数组取第一个和最后一个有性能差距吗?
数组: 100万个成员的数组取第一个和最后一个有性能差距吗?本文首发于微信公众号「程序员面试官」数组几乎可以是所有软件工程师最常用到的数据结构,正是因为如此,很多开发者对其不够重视.而面试中经常有这样一类问题: 「100万个成员的数组取第一个和最后一个有性能差距吗?为什么?」除此之外,我们在平时的业务开发中会经常出现数组一把梭的情况,大多数情况下我们都会用数组的形式进行操作,而有读源码习惯......
ljs_coding
08-09 269
高频面试题之浏览器篇
文章目录1
浏览器兼容问题1.1 CSS部分1.1.1 消除默认样式1.1.2 H5标签不识别1.1.3 IE属性过滤器1.1.4 清除浮动1.2 JS部分1.2.1 键盘码keyCode1.2.2 窗口大小1.2.3 跨
浏览器的事件处理程序1
浏览器兼容问题略过了一些IE 6/7,选择了相对常见的问题进行总结。1.1 CSS部分1.1.1 消除默认样式(1) 引入Normalize.c......
XunZhaoHaiLan的博客
09-20 104
面试官: 既然已经有数组了,为什么还要链表
面试官: 既然已经有数组了,为什么还要链表本文发布于微信平台: 程序员面试官超过20w字的「前端面试与进阶指南」可以移步github对于不少开发者而言,链表(linked list)这种数据结构既熟悉又陌生,熟悉是因为它确实是非常基础的数据结构,陌生的原因是我们在业务开发中用到它的几率的确不大.在很多情况下,我们用数组就能很好的完成工作,而且不会产生太多的差异,那么链表存在的......
沉默王二
03-01 20万+
技术大佬：我去，你写的 switch 语句也太老土了吧
昨天早上通过远程的方式 review 了两名新来同事的代码，大部分代码都写得很漂亮，严谨的同时注释也很到位，这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时，还是忍不住破口大骂：“我擦，小王，你丫写的 switch 语句也太老土了吧！”来看看小王写的代码吧，看完不要骂我装逼啊。private static String createPlayer(PlayerTypes p......
Evan 的博客
03-14 8926
Vue + Spring Boot 项目实战（十九）：Web 项目优化解决方案
快来一起探索如何打脸我们的破项目，兄弟姐妹们把害怕打在公屏上！
Java成神之路
03-10 3万+
你连存活到JDK8中著名的Bug都不知道,我怎么敢给你加薪
CopyOnWriteArrayList.java和ArrayList.java，这2个类的构造函数，注释中有一句话 1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 public ArrayList(Collection
九章算法的博客
03-10 18万+
副业收入是我做程序媛的3倍，工作外的B面人生是怎样的？
提到“程序员”，多数人脑海里首先想到的大约是：为人木讷、薪水超高、工作枯燥……然而，当离开工作岗位，撕去层层标签，脱下“程序员”这身外套，有的人生动又有趣，马上展现出了完全不同的A/B面人生！不论是简单的爱好，还是正经的副业，他们都干得同样出色。偶尔，还能和程序员的特质结合，产生奇妙的“化学反应”。@Charlotte：平日素颜示人，周末美妆博主大家都以为程序媛也个个不修边幅，但我们也许......
一个处女座的程序猿
03-10 7401
CSDN：因博主近期注重写专栏文章(已超过150篇)，订阅博主专栏人数在突增，近期很有可能提高专栏价格(已订阅的不受影响)，提前声明，敬请理解！
CSDN：因博主近期注重写专栏文章(已超过150篇)，订阅博主专栏人数在突增，近期很有可能提高专栏价格(已订阅的不受影响)，提前声明，敬请理解！目录博客声明大数据了解博主粉丝博主的粉丝群体画像粉丝群体性别比例、年龄分布粉丝群体学历分布、职业分布、行业分布国内、国外粉丝群体地域分布博主的近期访问每日增量、粉丝每日增量博客声明 因近期博主写专栏的文章越来越多，也越来越精细，逐步优化文章。因此，最近一段时间，订阅博主专栏的人数增长也非常快，并且专栏价...
安琪拉的博客
03-15 8万+
一个HashMap跟面试官扯了半个小时
一个HashMap能跟面试官扯上半个小时关注 安琪拉的博客 1.回复面试领取面试资料 2.回复书籍领取技术电子书 3.回复交流领取技术电子书前言HashMap应该算是Java后端工程师面试的必问题，因为其中的知识点太多，很适合用来考察面试者的Java基础。开场面试官: 你先自我介绍一下吧！安琪拉: 我是安琪拉，草丛三婊之一，最强中单（钟馗不服）！哦，不对，串场了，我是**，目......
3y
03-16 15万+
我说我不会算法，阿里把我挂了。
不说了，字节跳动也反手把我挂了。
progammer10086的博客
03-23 3万+
记录下入职中软一个月（外包华为）
我在年前从上一家公司离职，没想到过年期间疫情爆发，我也被困在家里，在家呆着的日子让人很焦躁，于是我疯狂的投简历，看
面试题，希望可以进大公司去看看。我也有幸面试了我觉得还挺大的公司的（虽然不是bat之类的大厂，但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有），最后选择了中软，我知道这是一家外包公司，待遇各方面甚至不如我的上一家公司，但是对我而言这可是外包华为，能......
努力提升自我
05-08 8万+
面试：第十六章：Java中级开发
HashMap底层实现
原理，红黑树，B+树，B树的结构
原理 Spring的AOP和IOC是什么？它们常见的使用场景有哪些？Spring事务，事务的属性，传播行为，数据库隔离级别 Spring和SpringMVC，MyBatis以及SpringBoot的注解分别有哪些？SpringMVC的工作
原理，SpringBoot框架的优点，MyBatis框架的优点 SpringCould组件有哪些，他们......
qq_41699405的博客
03-27 1万+
培训班出来的人后来都怎么样了？（二）
接着上回说，培训班学习生涯结束了。后面每天就是无休止的背
面试题，不是没有头脑的背，培训公司还是有方法的，现在回想当时背的
面试题好像都用上了，也被问到了。回头找找
面试题，当时都是打印下来天天看，天天背。不理解呢也要背，面试造飞机，上班拧螺丝。班里的同学开始四处投简历面试了，很快就有面试成功的，刚开始一个，然后越来越多。不知道是什么原因，尝到胜利果实的童鞋，不满足于自己通过的公司，嫌薪水要少了，选择......
©️2020 CSDN
皮肤主题: 大白
设计师: CSDN官方博客
返回首页
