基础知识掌握1

基础知识掌握

---

向海绵一样吸收吧，星光不负有心人

CDN（内容分发网络）加速原理

CDN网络是在网络和服务器之间增加Cache层，主要是通过接管DNS实现，将用户请求引导到Cache获得服务器的数据，从而降低网络的访问速度。

工作流程

当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。

具体流程

用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS（域名系统，将通过域名找到相应的IP地址）将请求发到网站的主DNS，主DNS根据一系列的策略确定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相应网站的内容。

DOM

虚拟dom和真实dom的区别：虚拟dom不会进行排版和重绘操作，它进行重复修改之后然后一次性比较并修改真实dom中需要修改的部分。

浏览器渲染页面的两大步骤

1. 输入网址在通过DNS解析之后得到服务器地址，浏览器向服务器发起http请求，经过三次握手，服务器将需要的代码发回给浏览器
2. 浏览器进行的三大步骤
   1. dom构造，将html构造成一颗DOM树
   2. 布局，浏览器按从上到下，从左到右的顺序读取文档节点，顺序的放到一个虚拟的传送带上—文档流，文档流走完之后开始计算节点的坐标大小等css属性作为盒子的包装说明。（知道每个节点放置的位置）
   3. 绘制页面，将页面可视化。
      点击详细知识点

服务端渲染和客户端渲染

spa是一种网络应用程序模型（客户端渲染），简单来说就是单页面，传统的网站是切换页面是直接加载出一个新的页面，但是它是将要换的地方进行重写，但是其他地放不变，如vue.js，左边的导航栏一直不变。
优点：前后端分离，开发效率高，用户体验更好，用户点击不会频繁跳转
缺点：首屏响应慢，不利于SEO优化因为爬虫不认识SPA，因为它只是记录了一个页面。
SEO 搜索引擎优化，根据搜索的关键字来调整网站
SPA和SEO的冲突，一些搜索引擎不支持AJAX获取数据，但是SPA通常是用AJAX获取数据的，而且有些搜索引擎也不支持js，但是对于知乎这种主要以内容输出为主，SEO显得很重要。
SSR（服务器端的缩写Server-Side Rendering),解决spa打开首屏慢的问题（spa都是在浏览器上进行渲染的）而它由浏览器渲染出HTML。发送到浏览器中，所以还需要SPA框架进行配合，在浏览器上混合成可交互的应用程序，因此也有能更好的获得SEO。
优点：SSR首屏快，能直接将SEO的关键信息在后天就渲染成html
缺点：占用很多的cpu和内存资源，常用的浏览器api无法使用如：window，docment和alert等，如果使用要对运行环境加以判断。开发调试会变的困难，导致spa的一些组件生命周期变得复杂，以及服务器和客户端渲染的结果不一致。
点击查看详细优缺点

查看详细介绍

XSS

全程跨站脚本攻击，是一种代码注入攻击。攻击者在目标网站上注入恶意脚本，获得用户的敏感信息。本质是：浏览器没有检测到恶意代码而直接执行。
xss分类：存储型，反射性（由后端的安全漏洞），DOM属于前端的安全漏洞。还可以分为：浏览区读取恶意代码，用户提交恶意代码。

• 防止浏览区执行恶意代码措施：
  • 防止html中出入注入。
  • 防止JavaScript执行是，执行恶意代码。
• 预防存储型和反射性xss攻击：
  • 改成纯前端渲染，把代码和数据分开。
  • 对html进行充分转义。
• 预防DOM型XSS攻击
  • js代码一定得严谨，不要把不可信数据当做代码执行
• 其他措施
  • Content Security Policy 和输入内容长度控制，验证码，和禁止js读取某些敏感COOkie。
    详细点击

排序算法的时间复杂度

点击参考文档

盒子模型

盒模型就是又一个个盒子堆砌成的，每个html都可以叫做一个盒模型，盒模型是包括：边距，边框，填充，内容组成

1. 标准盒模型：盒模型的所有组成相加
2. 怪异盒模型：只包括width+margin(左右）（因为width包括了padding和border)
   两者之间的转换可以用box-sizing :border-box(怪异）/content-box(标准)

webpack

模块打包工具，能实现热更新：在运行的时候就能替换，添加和删除各种模块。

fetch

向服务器发送请求的一种方式

ES6基本数据类型

number ，String，null，undefined，symbol（表示独一无二的值），Boolean

应用层协议

FTP，http等等

浏览器缓存

浏览器缓存设置在ajax请求头的，分为两个强缓存和协商缓存
而强缓存又分为内存缓存（页面关闭则没有），硬盘缓存，强缓存http之后设置了有效期，一旦有效期过了则请求后端协商缓存服务，

前端跨域问题的解决

jsonp，iframe，cors

UTF-8和GBK

GBK占用两个字节且全部包含中文字符，而utf-8占用三个字节包含全世界所有国家使用字符
详细点击

js的模块规范

AMD,CMD,COMMONJS,UMD,ES6
点击查看详细知识

css属性能触发GPU的硬件加速

硬件加速就是将浏览器的渲染过程交给GPU，而不是用自带的比较慢的渲染器
硬件加速原理：浏览器接收到页面文档之后，会将文档中的语言解析为DOM树，然后加上css成为渲染树，每个渲染元素被划分到每一个图层，每个图层加上GPU渲染层纹理，而tansform是不会触发GPU的tepain（重绘的）他们有单独的合成器进行处理。
浏览器会在以下情况下创建独立的复合图层，3D或者csstransform，和
css filters opacity ,元素覆盖是使用z-index属性，visibility
点击大牛文章查看
前端常见算法

MD5 SHA1 Base64 DSA

** MD5**
不可逆就比如牛被炸成了牛肉干，牛肉干不能复原成牛，可以用于用户密码保存，加盐的MD5=密码+用户名（盐）作为输入参数（原始信息）
** SHA-1**
和MD5相似原理，但是他的数量级比MD5更高，导致它不容易受到黑客攻击，但是速度上比MD5慢
Bease64 可逆

大致了解一下吧

正确的方向比做正确的事情更重要

CDN技术原理

CDN中文理解则是内容分发网络解决网站拥塞问题
有关计算机网络。

对于元素塌陷问题的解决

一般对于塌陷问题一般指的是父元素的高度塌陷问题，意味着父元素的高度对于子元素的高度失效
** 解决方法 **

1. 给父元素加上：overflow:hidden
2. 在dom元素中添加一个
   //在父元素中添加一个空标记
3. 给父元素添加一个伪类：after（选择器在被选择元素的内容后面插入内容）然后将其样式设置为：添加空内容并且对这个空内容清除浮动

<style>
		.父元素:after{
			display: block;
			clear: both;
			content: "";
		}
</style>

webpage

一个文件打包器

http

http是一个属于面向对象的协议特点是：1.简单快捷2.灵活3.无连接（服务器处理完成客户的请求，并收到客户的应答后，即断开连接）5.无状态
（对事务处理没有记忆能力）

请求方法

1. get 请求获取资源
2. post 在所标识的资源后附加新的数据
3. put 请求服务器存储一个资源
4. delete请求服务器删除一个资源
5. head请求获取资源的响应消息报头
6. 等等

状态码

元素居中

1. 居中元素使用定位记住边框值是负数

  position: absolute;
            left:50%;
            top:50%;
            margin-top:-100px;
            margin-left:-100px;

2. 弹性盒模型 在需要定位的元素中编写

  display:flex;
            align-items: center;
            justify-content: center;

3. transform平移转换（不太好使）

4. 行类元素居中则按照文本居中方式即可

react 常见问题

基本知识

react是facebook在2011年开发的JavaScript库，它遵循组件的方法，有助于构建可重用的UI组件。使用虚拟dom可以用服务器端渲染，遵循单向数据流和数据绑定。可以方便客户端和服务端使用，使用react，编码UI测试用例变得非常容易。（虚拟dom是一个js对象，最初只是真实dom的副本，它是一个节点树）。
为什么浏览器无法读取jsx，因为它只能读取js对象，因此需要用到转换器将其转换。

react组件

解释一下react中render（）的目的，是原生DOM组件的表示。如何将两个或多个组件嵌套入一个组件中，写在一个文档里面，然后一个利用标签名调用另一个。
如果更新组件状态：this.setState()
####react组件的生命周期的阶段：

1. 初始渲染阶段
2. 更新阶段
3. 卸载阶段

生命周期的方法

1. componentWillMount 在渲染之前使用
2. WillunMount dom卸载之后使用清除内存
3. DidMount 在第一次渲染之后使用
4. WillReceiveProps 当从父类接收到props并且调用另一个渲染器之前调用
5. shouldComponentUpdate 在dom中进行渲染之前调用
6. WillUpdate 在dom中进行渲染之前调用
7. didUpdate 在渲染发生后立即调用
   模块化react中的代码可以使用export和import来导入

react Redux

一个前端开发库，redux遵循的三个原则是：

1. 单一事件源：整个应用的状态存储在单个store中的对象里
2. 状态是只读的，改变状态的唯一方法使触发一个动作
3. 使用纯函数进行修改，纯函数是那些返回值取决于其参数值的函数。

列举出Redux的组件

1. store 整个程序的状态都保存在它其中。
2. action 这是一个用来发生了什么事情的对象
3. reducer 这是一个确定状态将如何变化的地方
4. view 显示store提供 的数据

react路由

react路由使用switch关键字是因为匹配到指定路径之后会绕过其他路线。

vue常见问题

生命周期

template:在script中编写的html，
生命周期的运行顺序：
点击开始运行的时候则出现以下四个生命周期但是如果没有el选项则在created就暂停了
如果有el则开始判断是否有template选项如果有则将其编译为render函数如果没有则用外部html作为模板则可以看出前者优先级高，但是由于vue中自带render函数则它本身的优先级最高
**beforeMount在还没挂载之前就调用，render函数首次被调用，
Mount被新创建的el选项替换，被挂载到实例上去之后调用该钩子。

当vue中的数据更新之后会触发新的组件重新渲染触发beforeUpadate和updated钩子函数
beforeUpdate发生在view层的改变之前，也就是页面还没有更换值，upd