浏览器渲染

在网络世界，你肯定记得住网站的名称，但是很难记住网站的 IP 地址，因而也需要一个地址簿，就是 DNS 服务器。DNS 服务器是高可用、高并发和分布式的，它是树状结构，如图： 在客户端输入 URL 后，会有一个递归查找的过程，从浏览器缓存中查找->本地的hosts文件查找->找…

浏览器是每个前端同学开发时经常接触的工具，甚至可以说是主场。在开发过程中，前端同学大概了解浏览器的渲染流程便可以进行开发，但涉及到页面性能优化、加载速度优化等，就需要比较深入地了解浏览器原理。 这个答案不算错，但是不够具体。本文就来详细地聊聊浏览器渲染，在开始正文之前，需要特别…

什么是浏览器？ 浏览器是用来检索、展示以及传递Web信息资源的应用程序。 浏览器有哪些组件组成？ 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的

在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。 正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会…

浏览器获取到 html 资源后开始解析 html；解析到 css 后根据 css 生成 css 规则树；在 dom 树和 css 规则树都生成完后，通过 dom 树和 css 规则树生成渲染树

从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~ 关于跨…

目前的主流浏览器有5个：Internet Explorer、Firefox、Safari、Chrome和Opera浏览器。根据 StatCounter 浏览器统计数据，目前（截止2019 年 5 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 83…

在我们做用户授权登录(微信,qq授权)，以及根据对应浏览器做对应的操作的时候，经常会遇到需要判断用户使用的浏览器的需求，以及在需要用户输入信息的时候，有需要验证的一些正则。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 判断用户所使用的浏览器主要用到的a…

作为一只前端开发🐶，HTTP是我们知识地图里面必不可少的一部分，也是面试必问知识点。HTTP2号称可以让我们的应用更快、更简单、更稳定，它完美解决了1.1版本的诸多问题，本文和大家一起聊聊HTTP2的改进点。 正式讲HTTP2之前我们先讲一下HTTP的发展史。 HTTP于19…

通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我…

常规设备的刷新频率是 60HZ，也就是说，如果要让用户感受不到明显卡顿，浏览器的渲染流水线需要每秒输出 60 张图片（60 FPS）。本文会从基础的渲染树出发，介绍浏览器渲染流水线，以及常用的优化方法

声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说<audio autopaly></audio> <…

如题，这是一篇关于浏览器的兼容问题及解决方案的文章，带你简单的了解浏览器、了解兼容问题，并提供一些关于 JS 兼容、CSS 兼容的介绍及解决方案！

写下这篇文章后我想，要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”，形成一系列内容，希望大家看完之后再有人问你这些问题，你心里会窃喜：“嘿嘿，是时候展现真正的技术了！” 一、不要再问我this的指向问题了 跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身…

浏览器在渲染页面之前会先构建DOM树和CSSDOM树。 HTML会转换成文档对象模型DOM，CSS会转换成CSS对象模型CSSDOM。它们两个是互相独立的数据结构。 DOM和CSSDOM组合在一起形成渲染树。

html的代码，是从上到下一行行执行的，也就是说如果js代码写在head头里，且没有用加在window.onload方法里，那么他是无法读取到body里的标签的。之所以加在window.onload里可以执行，是因为，window.onload里的函数会在dom树加载之后执行。…

浏览器可以分为两部分：shell和浏览器内核，shell是外壳，如工具栏，菜单等，内核是根本，是基于标记语言显示的程序或模块。 浏览器内核分为两部分：渲染引擎和JS引擎。 渲染引擎主要负责解析浏览器所呈现的内容，比如HTML,CSS。 渲染引擎的主要流程 始解析 HTML 文档…

浏览器渲染基本流程浏览器渲染流程如下图所示：图片来源：https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/大概可以划分成

理解浏览器页面渲染原理有时候会帮助我们更好的对页面加载进行优化，作为前端开发者这是必不可少的技能。 浏览一个顺畅而且精美的页面会潜在的提升用户的好感程度，甚至能直接转换用户成为有效用户。 当用户输入一个URL到地址栏中，或者点击链接，提交表单，都会开始产生这些流程。 当浏览器收…

通常为了弄清楚一个概念，我们需要掌握十个概念。在判断 JWT(JsonWebToken) 是否能代替 session 管理之前，我们要了解什么是 token，以及 access token 和 refresh token 的区别。 了解什么是 OAuth，什么是 SSO，SSO…