前端百题斩

面试中常见的攻击方式有两种：XSS、CSRF，下面一起来看看这两种攻击方式，从而达到从容的应对面试的效果。

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第40斩，希望朋友们关注公众号“前端点线面”，用知识武装自己的头脑。

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 6. TCP和UDP的区别 连接方面 TCP是面向连接的，而UDP是无连接的，即发送数据之前不需要建立连接； 数据传输可靠性方面 TCP提供

《前端百题斩》上册已经更新完毕，内容包括JS基础篇（28）、浏览器篇（9）、网络篇（13），共计50个章节，5万多字。

打开浏览器开发者工具的Network，观察Size列经常看到三种情况：memory cache、disk cache、资源本身大小。

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。提前透露一下《前端百题斩（上）》pdf版近期就要出炉了( ^_^ )

今天所说的HTTP缓存机制就是利用HTTP响应头将所请求的资源在浏览器中进行缓存，缓存方式主要分为两种：强缓存、协商缓存。

网络体系结构有多种划分标准：OSI体系结构、TCP/IP的体系结构、五层协议的体系结构，其中OSI体系结构是划分的最细的一种体系结构。

今天的主角“重绘和回流”就会导致浏览器触发更新，重新进行渲染绘制，但是两者稍有不同，重绘不会存在布局阶段，而回流会进行重新布局，所以回流代价更高、损耗更大。

下面一起来看看浏览器的渲染流程，主要包含构建DOM树、样式计算、布局阶段、分层、图层绘制、分块、栅格化操作、合成和显示

浏览器进程 打开浏览器后只有一个，主要负责界面显示、用户交互、子进程关闭，除此之外，还会提供存储等功能。 渲染进程 其主要作用是页面渲染、脚本执行、事件处理等，默认情况下，Chrome会为每个Tab标

通过浏览器的控制台可以看到访问一个页面的时候会发起多个请求，并且这一系列请求会被分为多个类别，那么这些类别除了类型不同之外，还有什么区别呢？

根据同源策略，浏览器默认是不允许XMLHttpRequest对象访问非同一站点的资源的，这会大大制约生产力，所以需要有一种机制允许跨域访问资源，然后我们的主角CORS（跨域资源共享）就出现了。

从同源策略的角度考虑，确实嵌入的< script >发起的请求（非同源）违背了同源策略，但其实这是由于浏览器为了便利性让出了部分安全性，允许js文件、css文件、图片等资源来自于非同源服务器。

跨域本质其实就是指两个地址不同源，不同源的反面不就是同源，同源指的是：如果两个URL的协议、域名和端口号都相同，则就是两个同源的URL。

打开浏览器的开发者工具中的Application部分，可以看到浏览器支持五种存储方式：localStorage、sessionStorage、IndexedDB、WebSQL、Cookie。

相信老铁们不管是在学习还是面试过程中，都会遇到赋值、浅拷贝、深拷贝，特别是浅拷贝和深拷贝，我记忆比较深刻的遇到这个问题有两次： 一次系统写出bug就是因为对深浅拷贝理解不清楚；另一次是百度面试。

相信大家都遇到过这样一个问题：将'-'连接的字符串转换为驼峰形式，例如将hello-word转换为helloWorld。这个问题虽然简单，但是如果仅仅用一种方案进行解决不能体现 出自己的能力……

虽然浏览器已经对这些事件的触发做了一些优化，但是如果在很短的时间内频繁的触发仍然会影响性能，这个时候就需要今天的主角：防抖和节流，利用它们来进行优化，提高性能。

不知道老铁们有没有遇到过一道面试题：如何将一个多维数组展开成一个一维数组？当时我遇到的时候还不了解flat这个神奇的方法，用了最传统的解决方法进行解决。