googlebooks-chrome

讲浏览器的漫画，来自 Google 官方团队，生动有趣

SEO大神Neil Patel六大成功秘籍

只要你入门SEO超过两天，就一定听过这个神话级的人物– Neil Patel。这个人十七年前就开始SEO了– 他那时16岁，自己弄了一个网站，然后一边在主题公园打扫卫生，刷厕所，一边拿着打工的钱找了代理公司推广网站。结果发现这些钱都打水漂一样没有得到任何效果。于是为了防止继续烧钱，他只能开始自学SEO。十七年后的今天（Google一共才二十年）， 他已经SEO界灵魂级的领袖，畅享书作者，奥巴马授予的30岁以内100位杰出企业家之一等等等等了。

他的博客每个月有110万的阅读者–我就是110万分之一。最近，Neil在在线的Webinar中分享了他的六大秘籍。这一网络研讨会目前仍然可以继续预定，直接到他的网站首页输入信息，选择时间即可。

一文彻底搞懂Cookie、Session、Token到底是什么

详细的介绍了 Cookie、Session、Token 的设计理念以及相同点和不同点

HTTP API Design Guide

This guide describes a set of HTTP+JSON API design practices, originally extracted from work on the Heroku Platform API.

This guide informs additions to that API and also guides new internal APIs at Heroku. We hope it’s also of interest to API designers outside of Heroku.

Our goals here are consistency and focusing on business logic while avoiding design bikeshedding. We’re looking for a good, consistent, well-documented way to design APIs, not necessarily the only/ideal way.

We assume you’re familiar with the basics of HTTP+JSON APIs and won’t cover all of the fundamentals of those in this guide.

深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系

关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：

• 每一轮 Event Loop 都会伴随着渲染吗？
• requestAnimationFrame 在哪个阶段执行，在渲染前还是后？在 microTask 的前还是后？
• requestIdleCallback 在哪个阶段执行？如何去执行？在渲染前还是后？在 microTask 的前还是后？
• resize、scroll 这些事件是何时去派发的。

这些问题并不是刻意想刁难你，如果你不知道这些，那你可能并不能在遇到一个动画需求的时候合理的选择 requestAnimationFrame，你可能在做一些需求的时候想到了 requestIdleCallback，但是你不知道它运行的时机，只是胆战心惊的去用它，祈祷不要出线上 bug。

这也是本文想要从规范解读入手，深挖底层的动机之一。本文会酌情从规范中排除掉一些比较晦涩难懂，或者和主流程不太相关的概念。更详细的版本也可以直接去读这个规范，不过比较费时费力。

浏览器层合成与页面渲染优化

Web 页面性能是前端开发特别需要关注的重点，评判前端 Web 页面性能的指标有很多，页面的流畅度是其中的一种，如何让页面变得 “柔顺丝滑”，要讨论起来可就是个相当有料的话题了。

Chrome架构：仅仅打开了1个页面，为什么有4个进程

Chrome 只是打开了 1 个页面，为什么要启动这么多进程呢？

Guidelines for URL Display

This document covers the best practices and pitfalls for building UI to display URLs in browsers and other apps. It covers the main categories of problems and challenges that we’ve seen in building Chrome. The guidance is intended to be generally applicable, but includes some Chrome-specific notes throughout.

前端工程师所需要了解的WebView

现如今，在做移动端 H5 开发时，少不了与 Native 之间进行交互。而在Native中，H5的承载容器为 WebView，其核心是使用 WebView 控件实现加载 url。

XSS_Cheat_Sheet_2020_Edition

白帽赏金平台xss漏洞模糊测试有效载荷的最佳集合 2020版
该备忘清单可用于漏洞猎人，安全分析，渗透测试人员，根据应用的实际情况,测试不同的payload，并观察响应内容，查找web应用的跨站点脚本漏洞，共计100+条xss漏洞测试小技巧
本备忘录翻译自国外的XSS_Cheat_Sheet_2020_Edition.pdf议题，源文件可在本项目内直接下载

聊一聊二维码扫描登录原理

扫二维码登录现在比较常见，比如微信、支付宝等 PC 端登录，并且好像每款 APP 都支持扫码登录，不搞个扫码登录都不好意思。作为技术人员，不知道您对这背后的实现逻辑是否敢兴趣，反正我是一直都对这背后实现好奇。最近刚好看到一个关于扫码登录原理的视频，于是就整理出来了这篇文章，希望对您有所帮助。
本文共三个主题：

• 什么是二维码。
• 移动端基于 token 的认证机制。
• 二维码扫码登录的原理。

逐帧分析youtube

接下来我会逐个请求分析youtube究竟使用那些国内大家不那么常用的技术，因为点会比较多我在正文中就不一一详细介绍了但都会配上相关阅读连接，我只会对与带来关键性能提升的部分做展开分析。

Part1 网络请求分析
Part2 使用技术分析
Part3 性能分析

浏览器是如何调度进程和线程的？

今天我们来聊一下浏览器（以Chrome为例）对线程和进程的调度，这个问题几乎是我每次面试必问的。

美国如果把根域名服务器封了，中国会从网络上消失？

题目很吸引人，其实作者主要是借这个话题对 DNS 相关知识进行了讲解

用故事说透 HTTPS

该文以故事的形式介绍了 HTTP 的不安全，保证 HTTPS 安全性的背后支持，包含数字证书、数字签名、对称加密、非对称加密的概念，当然光有理论还不行，需要实践才能更好地理解。

不同浏览器下 autoplay 的限制策略和方案的处理

从 PC 和移动端两个方面介绍了 autoplay 属性的一些坑，同时提供了解决方案

js在微信、微博、QQ、Safari唤起App的解决方案

一个全面的、最新（2018-01-22）的唤起方案，总结的很透彻，值得一读

浏览器进程？线程？傻傻分不清楚！

什么是多进程架构浏览器？为什么浏览器内核是多线程？Javascript 是单线程又是什么鬼？进程和线程是否分得清楚呢？文章干货和知识点比较多，需要查阅相关知识才能完全消化。

WebView 性能、体验分析与优化

来自美团的技术文档，对 webview 的方方面面都进行了详细的介绍，同时指出了其存在的问题，相信看完之后对于 webview 会有更深层次的理解~

浅析 HTTP 缓存的机制-浏览器缓存

在浏览器众多缓存中的 HTTP 缓存可能很多人对这个的概念并没有很清晰，每个人都知道进入一次网页之后再刷新一次页面，加载速度会比首次加载快非常多，每个人都知道这是浏览器缓存的 magic，但是对此背后的原因可能不甚了解；作者结合状态码介绍了强缓存和弱缓存的区别和触发条件，篇幅短小精悍，值得一读。

深入理解 JSCore

目前业界流行的动态化方案，如 Facebook 的 React Native，阿里巴巴的 Weex 都采用了前端系的 DSL 方案，而它们在 iOS 系统上能够顺利的运行，都离不开一个背后的功臣：JavaScriptCore（以下简称 JSCore），它建立起了 Objective-C（以下简称OC）和 JavaScript（以下简称 JS）两门语言之间沟通的桥梁。作者从浏览器谈起，对 Webkit 内核的工作原理和组成进行了详细介绍，同时介绍了 JSCore 的组成部分：词法分析、语法分析和解释执行，后面还介绍了 iOS 中的 JSCore 的应用和一些机制，篇幅较长，但是干货满满，如果你对浏览器渲染引擎感兴趣，这篇文章值得一看~

H5 唤起 APP 指南(附开源唤端库)

唤端的定义：引导已下载用户打开 APP，引导未下载用户下载 APP。对于用户留存来讲，唤起 App 是一种很重要的手段，这篇文章可以说把所有和唤端相关的知识点都介绍了，最后还给自己的工具打了一发广告。。

当···时发生了什么？

这个仓库试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过作者不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。包括一些硬件知识也包含其中，我相信如果面试官问到你这道题，然后你的回答是这篇文章里面描述的话，面试官肯定会大吃一惊！

HTTP, HTTP2.0, SPDY, HTTPS 你应该知道的一些事

作为一个经常和 web 打交道的程序员，了解这些协议是必须的，而这篇文章就向大家介绍了一下这些协议的区别和基本概念，文中不局限于前端知识，还包括一些运维，协议方面的知识。

浏览器的工作原理：新式网络浏览器幕后揭秘

这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数，并花了很多时间来研读网络浏览器的源代码。 网络浏览器很可能是使用最广的软件。在这篇入门文章中，作者将会介绍它们的幕后工作原理。我们会了解到，从在地址栏输入 google.com 直到在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么。文章讲解的很详细，篇幅较长，需要比较大的耐心才能看下去。

HTTP 请求头中的 X-Forwarded-For

这篇文章对 HTTP 请求头中的 X-Forwarded-For（XFF）进行了详细的讲解，当我们需要取到用户的真实 IP 时，对这个请求头的理解和使用就显得尤为重要了，而从这个应用场景出发，作者还对请求头中的 x-real-ip 字段以及 Remote Address 进行了介绍。作者还有关于 HTTP 的其他文章，可以点击这里查看更多。

图解浏览器的基本工作原理

可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我们希望更细化的了解浏览器的渲染流程。那么这篇文章就解答了上面的所有问题，文章较长，图文并茂。

Content Security Policy - An Introduction

一篇介绍 CSP 的文章，介绍了我们为什么需要 CSP，以及涉及到 CSP 的一些协议头等等相关信息。

认识 HTTP—-Cookie 和 Session 篇

虽然内容大多来自《图解HTTP》一书，但是条理清楚分明，文笔很好，作者解释的很清晰。

图解基于 HTTPS 的 DNS

这是关于 dns 查询的过程讲解，配上插图和文字，可以对 dns 的查询过程有一个大概了解。

理解 WebKit 和 Chromium

系统的描述了 Chrome 浏览器的信息，可以更加全面的了解 Chrome 浏览器，最给力的是有很多工具的使用介绍。

你真的了解回流和重绘吗?

这篇文章主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，可以帮助读者更好的理解回流重绘。

这样使用GPU动画

《GPU Animation: Doing It Right》的译文，这篇文章能帮助你更好地了解浏览器如何使用GPU来渲染，这样你就可以创作能在所有设备上快速运行的令人印象深刻的网站。著作权归作者所有。

How Blink Works 中文译文

Chromium 的工程师们写了两篇技术文章 How Blink Works 和 How cc Works，分别介绍了 Chrome 浏览器内核内部的两个重要模块 Blink 和 cc 内部设计和实现的一些细节。对于想要了解 Chrome 内核内部实现的同学，这两篇文章提供了不错的入门指引。