常见的浏览器内核有哪些?Trident内核:IE、MaxThon、TT、TheWorld、360、Sogou浏览器等[又名MSHTML]Gecko内核:Netscape6及以上、FF、MozillaSuite/SeaMonkey等Presto内核:Opera7及以上。【Opera内核原为:Presto,现为:Blink;】Webkit内核:Safari、Chrome等【Chrome:Blink(WebKit的一个分支)】CSS解析规则浏览器会从右到左解析CSS选择器(bottomtoleft)top-tree)浏览器匹配规则如下首先找到所有最右边的节点span,对于每个span节点,查找节点.title,继续寻找.header节点,最后找到根元素html,然后结束遍历这个分支CSS加载会不会阻塞DOMCSS不会阻塞DOM的解析,但是会阻塞DOM的渲染CSS会阻塞JS执行,但是不会阻塞JS文件的下载对于第一点,说明一下为什么DOM和CSSOM通常是并行构建的,所以CSSloading不会阻塞DOM解析渲染树依赖于DOM树和CSSOM树,所以必须等到两者都加载完才能开始构建渲染,所以CSSloading会阻止DOM的渲染。对于第二点,说明JS脚本内容如果要获取元素样式,必须依赖CSS的原因。因为浏览器无法感知JS内部要干什么,为了避免样式获取,不得不等前面的样式全部下载完再执行JS。但是JS文件和CSS文件是并行下载的,CSS文件会在后续JS文件执行之前加载执行,所以CSS会阻塞后续JS文件的执行。JS会阻塞页面渲染吗?JS会阻塞DOM的解析,所以也会阻塞页面的加载。原因:GUI渲染线程和JavaScript引擎互斥。DOMContentLoaded和加载的区别。:当页面上的所有DOM、样式表、脚本、图片等资源加载完毕时触发。defer和async的区别?两者都是异步加载外部JS文件,不会阻塞DOM解析。async在外部JS加载完成后,浏览器空闲时,加载事件触发前执行。标记为异步的脚本不保证指定它们的顺序。执行,该属性对内联脚本没有影响defer在JS加载完成后执行,解析整个文档,DOMContentLoaded事件触发前,如果缺少src属性(即内联脚本),则该属性不会用什么是浏览器同源策略同源策略是浏览器的一种自我保护行为。所谓同源是指:协议、域名、端口必须相同,但标签不受限制,因此可能存在安全问题。如何解决跨域问题?jsonp主要是利用script标签不受浏览器同源策略的限制,可以获取其他来源传输的数据,需要服务端支持。缺点:只支持get请求,有局限性,不安全,可能被XSS攻击。Cross-OriginResourceSharing(CORS)nginx反向代理通过nginx或服务端配置Access-Control-Allow-Origin响应头浏览器缓存机制浏览器缓存分类分为两种:强缓存,协商缓存浏览器向服务器请求使用资源时,先判断是否命中强缓存,再判断协商缓存是否命中强缓存:浏览器??加载资源时,会先根据expires或cache-control判断是否命中强缓存本地缓存资源,如果命中,则直接使用缓存中的资源,不再向服务器发送请求。Negotiatecache:Negotiatecache是??指缓存失效后,浏览器向服务器发送带有缓存标识的请求,服务器根据缓存标识决定是否使用缓存。StrongcacheExpires:Required与Last-Modified配合使用,控制请求文件的有效时间。缺点:Expires是HTTP/1的产物,受本地时间限制。如果本地时间被修改,缓存可能会失效。Cache-Control:主要通过该字段的max-age值来判断,它是一个相对时间,如Cache-Control:max-age=3600,表示该资源的有效期为3600秒。当Cache-Control和Expires一起使用时,Cache-Control的优先级更高。Cache-Control可配置值字段说明no-cache需要协商缓存,向服务器发送请求确认是否使用缓存。no-store禁止使用缓存,每次都要重新请求数据。public可以被所有用户缓存,包括终端用户和CDN等中间代理服务器。private只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器缓存。NegotiationcacheLast-Modify/If-Modify-Since:根据文件的修改时间决定是否缓存。缺点是文件没有改变,但是文件修改时间改变了,会导致缓存失效。ETag/If-None-Match:根据文件内容Hash值判断是否缓存Last-Modify与ETag一起使用时,ETag优先事件循环JS引擎常驻内存,等待宿主通过JS代码或函数。即等待宿主环境分配宏任务,反复等待——执行就是事件循环。EventLoop,每个循环称为tick,每个tick的任务如下:执行栈选择最先进入队列的宏任务(通常是脚??本),执行它的同步代码直到结束;检查是否有微任务,如果有,将执行直到微任务队列为空;如果主机是浏览??器,则可以呈现页面;开始下一轮tick,执行异步宏任务代码(setTimeout等回调)。microtask和macrotaskES6规范中,microtask称为jobs,macrotask称为task。宏任务由宿主发起,而微任务由JavaScript自己发起。Macrotask(宏)任务,可以理解为每个执行栈执行的代码都是一个宏任务(包括每次从事件队列中获取事件回调,放入执行栈执行)。为了让JS内部(宏)任务和DOM任务能够有序执行,浏览器会在一个(宏)任务执行完后,下一个(宏)任务执行前重新渲染页面。流程如下:(macro)task->rendering->(macro)task->...宏任务包括:脚本(整体代码)setTimeoutsetIntervalI/OUI交互事件postMessageMes??sageChannelsetImmediate(Node.js环境)微任务(micro)任务,可以理解为当前任务执行结束后立即执行的任务。也就是说,在当前任务之后、下一个任务之前和渲染之前。所以它的响应速度会比setTimeout快(setTimeout是一个任务),因为不需要等待渲染。也就是说,一个macrotask执行完之后,所有在它执行过程中产生的microtask都会被执行(渲染之前)。微任务包括:Promise.thenObject.observeMutationObserverprocess.nextTick(Node.js环境)从输入URL到页面加载会发生什么?URL解析,判断是URL还是搜索关键词,如果是URL,则启动DNS解析,搜索关键词DNS解析为具体IP地址浏览器握手3次建立TCP连接,并向服务器请求页面服务器响应浏览器请求,返回HTML代码等资源TCP4次挥手断开浏览器解析HTML文件,生成DOM和CSSOM,构建渲染树,渲染到page不管你是前端初学者还是有两三年前端开发经验,本网址整理了最新最全的面试题,永久免费,欢迎收藏转发!https://interview.kelen.cc永久免费,不容易整理出专门针对前端人学习的文章和资料。如果您觉得有用,也可以转发给您的朋友