学习前端需要了解浏览器的什么知识

我觉得用不到啥，现在主要就node的那些东西，HTML，css我觉得了解大概就行

所有的Web API，像service worker这种就是浏览器环境才有的 绘图的机制，浏览器自己的event loop也和node不一样 一些常见的兼容性问题 总的来说看HTML标准和一些Web API的标准就行

我是前几天项目上第一次解决跨域问题，才发现自己一点也不懂浏览器 【 在 callmezhuo (黑夜的眼睛) 的大作中提到: 】 : 我觉得用不到啥，现在主要就node的那些东西，HTML，css我觉得了解大概就行

好的，我去了解一些 【 在 tychenjiajun (Borja) 的大作中提到: 】 : 所有的Web API，像service worker这种就是浏览器环境才有的 : 绘图的机制，浏览器自己的event loop也和node不一样 : ...................

所有的前任信息,

我的建议是没到时候别系统性学习，学不过来 系统性学习的话，其实MDN已经是手把手教了，而且十分说人话 现代浏览器在安全和易用上谷歌推进了很多东西，比如SameSite默认为Lax，禁止带音频的媒体（无交互）自动播放等等 JavaScript的事件循环，还有DOM模型也是得知道的 最起码得知道： JavaScript和CSS： JavaScript动画和CSS的animation/transition哪个厉害？回流重绘分别是啥？浏览器眼里什么是Layer 古早的布局模型的重新诠释（为什么clear-fix方法那么多就像八股文，感觉一点儿也不语义化而是十分Hacky） DOM的： 还有script标签为啥放在不同的地方表现不一样？meta标签有几百种用法？script标签是不是只能放JavaScript？布尔型属性就和茴香豆的回一样有几种写法？有没有看似是布尔属性其实还能写别的的属性？ 其实去搜这些问题的答案就能知道现代浏览器是如何看待JavaScript的执行、CSS的解析和HTML文档的加载的 可是这效率也太低了，怎么办？ 实践呗！ 用Ruby on Rails就知道如何保证安全，以及浏览器在安全上有哪些天坑（执行JavaScript的一万种方法） 用Nginx就知道浏览器对哪些HTTP头不甚满意，以及告诉你如何去改进 用Pug模板引擎就知道那几种Doctype有什么区别，以及布尔属性的四种写法 用现代布局模型Flex和Grid，就能早日脱离CSS 1时代的苦海 用WebGL写个小东西，就能知道script标签能放顶点着色器片元着色器 用GSAP这种杀手级JavaScript动画库，就能知道怎么榨干JavaScript动画性能，以及为什么GPU很重要 用meta标签来做SEO、PWA，就能知道原来结构化元信息有这么多标准，就连Bread Crumb都有标准 剩下的就是用其他API做东西，就能知道为什么会这样设计，以及如何解决，甚至在必要时，知道什么东西是Web的极限，懂得该及时放弃 Web从一开始就是莽起来的，所以才会那么群魔乱舞，光CSS 1就完全是为了实践而诞生的，没有从实现的一致性上进行系统级设计，所以今天要一个高亮就给你来个高亮，明天要个浮动就来个浮动，混杂起来就变得扭曲。才有了CSS 2和3来做重新诠释。所以追根溯源很难很难，现在去系统学习浏览器，就得直面以前的不可名状的东西。 就该开始实践，由社区和企业在生产中摸爬滚打那么多年总结出来的最佳实践，不比系统学习强多了 还有虽然深入某个浏览器的实现那就是走火入魔了（那Web的初衷可不就白费了） 但看看Mozilla和Google关于他们如何做浏览器的（就那么一篇经典）文章，是有帮助的 印象里Google的那一篇好像叫“为什么Chrome要用多进程” Firefox的话，大概是搞Rust写Servo热火朝天的蜜月期发的好多关于CSS的文章吧

如果楼主想问的是浏览器之间的区别，兼容性之类，现在应该不用了，大家都用框架用组件，基本能兼容主流浏览器。 如果想问的是浏览器和前端渲染的原理，那确实应该去看看，比如 BOM浏览器对象模型、比如浏览器渲染一个页面的完整流程