文章目录

基础知识掌握

基础知识掌握

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

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

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

工作流程

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

具体流程

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

DOM

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

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

输入网址在通过DNS解析之后得到服务器地址，浏览器向服务器发起http请求，经过三次握手，服务器将需要的代码发回给浏览器
浏览器进行的三大步骤
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都可以叫做一个盒模型，盒模型是包括：边距，边框，填充，内容组成

标准盒模型：盒模型的所有组成相加
怪异盒模型：只包括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中文理解则是内容分发网络解决网站拥塞问题
有关计算机网络。

对于元素塌陷问题的解决

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

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

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

webpage

一个文件打包器

http

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

请求方法

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

状态码

元素居中

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

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

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

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

transform平移转换（不太好使）
行类元素居中则按照文本居中方式即可

react 常见问题

基本知识

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

react组件

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

初始渲染阶段
更新阶段
卸载阶段

生命周期的方法

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

react Redux

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

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

列举出Redux的组件

store 整个程序的状态都保存在它其中。
action 这是一个用来发生了什么事情的对象
reducer 这是一个确定状态将如何变化的地方
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层的改变之前，也就是页面还没有更换值，updated是发生在view层改变之后，而updated则发生在页面重新渲染之后
在这里插入图片描述
beforeDestroy是在实例销毁之前调用，在这一步实例完全可以调用，destroyed是在实例被销毁之前调用的。

MVVM的理解

Model代表数据模型可以在其中数据修改和操作的业务逻辑，View 代表UI组件将数据模型转换为UI展现出来，VM是他们两者之间的中间实现数据双向绑定

js的数据双向绑定

双向数据绑定：属性拦截。拦截方式用es5中的Object.defineProperty()将对象属性变成访问器属性。
数据双向绑定

vue组件间的参数传递

父与子传递参数

父元素传递给子组件：子组件通过props：[‘title’]方法和父元素挂钩，父元素之间：title=“哈哈哈”即可
子元素传递给父元素：子元素之间@click=“ $e m i t （父元素方法名，参数） ” 即可调用父元素方法，父元素则通过$ event接收

兄弟组件传值

总的来说就是bus. $on (方法名，function（）{}）和bus.$ emit（方法名，参数）
首先在要接收其他兄弟的组件中引入bus（import bus from ‘@/bus.js’），然后定义方法。

 created () {
    
    
    // 实例对象.$on(事件名称,function(形参,形参){}事件事件的回调方法)
    // 注意：回调函数变为箭头函数，使得this可以正确使用
    bus.$on('jieshou', msg => {
    
    
      // console.log(msg)
      // 把数据给dt接收
      this.dt = msg//父元素定义dt属性来接收
    })
  }
原文链接：https://blog.csdn.net/jyn15159/article/details/108991713

然后将要调用的兄弟组件中也引用bus然后编写方法传递参数

/ 给大哥组件传值
    back () {
    
    
      // 使得bus调用自己的事件(是大哥给bus声明的)
      // bus.$emit(事件，参数，参数)
      bus.$emit('jieshou', '1000元保护费')
    }
  }

路由

vue路由实现

hash模式
路由有井号
history模式
路由没有井号
两者的区别：对于后端来说即使没有做到对路由的全面覆盖也不会报出404的错误而history必须得一致

路由调转

router-link
<router-link :to="{name:'home', params: {id:1}}"> 如果不在路由配置中写上传递参数，那么页面刷新之后就会消失
/script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">类似于在路由后面配置参数
// html 取参 $r o u t e . q u e r y . i d / / s c r i p t 取参 t h i s .$ route.query.id
this$router.push()(函数里面调用）

this.$router.push({
    
    name:'home',query: {
    
    id:'1'}})
this.$router.push({
    
    name:'home',params: {
    
    id:'1'}})

this.$router.replace() (用法同上,push)比较调转之后没有办法返回但是push可以
this.$router.go(n) 可以为正数或者负数

vue和react的区别

相同点：两者都使用了虚拟dom（如果更新元素不是很频繁建议不要用虚拟dom）

两者都鼓励组件化应用
都用了props允许父元素向子元素传递参数
都有自己的构建工具 create react app 和vue-cli

不同点：

vue鼓励去编写近似常规的html模板很好上手，而react则是推荐你所有的模板按照js扩展语法jsx书写。（jsx只是js混合着xml语法）vue技术也支持render函数和jsx只是不默认而已。
对象属性状态管理
react中必须得用this.setState({name})去更改值而vue中state对象不是必须的，数据由date属性在vue中那个对象中进行管理。
vue和react的区别

vue-router路由钩子函数（导航守卫）

beforeEach主要有三个参数，to，from,next
路由钩子详细教程

vuex(全局状态管理器）

state：用来数据共享数据存储
mutation：用来改变数据状态
getters：用来对数据进行过滤操作
action 解决异步改变共享数据
modules
当项目特别复杂的时候可以让每个模块都拥有自己的vuex const moduleA={
state：{}}
**vue-cli新增自定义指令 directives(指令名称dir1{
inserted（el）{}}全局指令则在directives上添加vue.

vue自定义过滤器

自定义过滤器

Vue.filter(‘dataFormant’,function(参数）{
return 返回值}

自定义私有过滤器

filters：{ 变量名（参数）{
一些构造 return返回值}}

使用的时候直接{ {datename变量名}}

keep-alive的用法

大牛对keep-alive的了解
应用场景：keep-alive保存组件的渲染状态
超详细生命周期讲解
 点击查看详细知识点

前端常用设计模型

单例模式

定义：保证一个类只有一个实例
需求：一些对象我们往往只要一个比如浏览器的window对象和登录浮窗等等

观察者模式

定义：对象间的一种一对多的依赖关系
需求：当一个对象的状态发生变化是，所有依赖她的对象都得到通知

工厂模式

定义：将其成员对象的实例化推迟到子类来实现的类
需求：创建对象的流程赋值的时候，比如依赖很多设置文件等；处理大量具有相同属性的对象，用一个方法来觉得到底要创建哪个类的实例，而这些实例经常都拥有相同的接口，这种模式主要用所在实例化的类型在编译期间不能确定，而是在执行期决定的情况。
详细描述

Jquery原理和仿写

JQuery的本质是一个封装了众多方法的库这个库的框架是一个闭包

(function(window, undefined) {
    
    
    var jQuery = function () {
    
    }
    window.jQuery = window.$ = jQuery;//暴露全局
 })(window)

如果叫我仿写我就这么干

 var temp = "Hello World!";
    (function( window, undefined ) {
    
    
       var temp = "ByeBye World!";
       window.temp = temp;
    })( window );
    alert(temp);

js数据类型

基本数据类型：string number boolean null undefined
undefined：定义了没有赋值，函数的参数没有传值，访问对象中没有访问属性。对象有只是没有值
null：指代对空对象的引用（对象的占位符）尚未存在的对象
引用数据类型：（是保存在推内的意思是变量中国保存的实际上只是一个指针，而这个指针指向内存中的另一个位置，该位置保存对象）基本数据类型则在栈中

原型和原型链和闭包（比较浅层的知识）

原型

原型：js中的对象都包含了一个prototype的内部属性，这个属性对于的就是该对象的原型。原型就是一个模板，更准确的说是一个对象模板。
所有对象都有_proto_属性指向该对象的原型。

原型链

**利用原型让一个引用类型继承另一个引用类型的属性和方法。**当我们方法对象属性时，如果这个对象内部不存在这个属性就会去原型里找这个属性，原型又会有自己的原型，因此依次查找就可以了。（所有方法对象都继承obj这个父类，都能去她里面找，其他的就只能在自己继承的里面找）

闭包

闭包就是能够读取其他函数内部变量的函数，也就是函数a被函数b包含然后函数a能运用引用b中定义的变量就构成了闭包。（能让函数中的值一直不消失，存储在内存中，以及读取函数内部的变量）
闭包使用情况：函数封装，在使用定时器的时候
闭包的优点：

减少全局变量
减少传递函数的参数量
封装
缺点：使用闭包会占用内存资源，过多的使用闭包会导致内存溢出等。
内存泄露解决的方法：不需要的变量，但是垃圾回收又收不走的那些赋值为null，然后让垃圾回收走。
实操：原型链继承和构造函数继承的例子吧。
具体描述加问题显现

在浏览器地址栏里输入一个地址回车

this

windows下的方法都是指向window比如定时器和普通函数
在一个对象中的方法this指向当前对象，谁new的就指向谁
绑定事件就是真正触发的事件源

js nodetype

nodetype属性可以用来区分不同类型的节点，比如元素，文本和注释。

get post区别

get和post是http请求方式的两种，get是请求 post是提交，一般来说get数据量小，post很大，get是在请求头里，放在地址栏不安全，post是在包里相对安全
详细区分

angularjs特性

双向数据绑定，提供用mo的类投射到view的方法，angularJS的双向绑定
MVC
指令系统创建自己所需的标签
模块化
简单确认一下

前端布局问题

水平居中

水平居中行内元素首先变成块状元素然在text-align：center
margin：0 auto；
flex布局然后justify-content：center

垂直居中

弹性盒模型然后align-items:center
绝对定位 position:absolute,top:50% ;transform:translate(o,-50%)

水平垂直居中

多列布局

左列定宽，右列自适应，左边宽带写死右边不写死即可。要么使用弹性布局自适应的那块写上flex：1
右列定宽，左列自适应
两列定宽，一列自适应 A：定宽的前两个写上浮动然后不定宽的写上overfloat，B：用flex布局
两侧定宽中间栏自适应 A:左右两边的浮动中间不浮动写上宽度100%B：用浮动解决
多列等分布局 boder-size：border-box；ie盒模型设置的宽度就是所有元素加起来的宽度，content-box设置的宽度只是文子的宽度
九宫格布局 利用flex实现布局然后设置相应的属性值即可
全屏布局
响应式布局 meta标签的使用

Sass

Sass是对css3的一种语法扩充，是一款强化css的辅助工具，增加了变量和嵌套，混合，导入等高级功能，有利于更好的组织管理样式文件

Sass和Scss的区别

两者其实是一种东西都称为Sass，区别是文件扩展名不同，Sass严格以缩进语法来书写的，不带大括号和分号，而Scss语法书写和css非常相似。

用 $KaTeX parse error: Expected 'EOF', got '#' at position 62: \dots候，我们就必须在使用的时候加上#̲{$ color}
嵌套：按照html方式嵌套即可如果是伪类选择器的话直接在选择器里面加上&：hover
混合宏（@mixin @include）
继承@extend 不能传递参数，继承的时候智会将相同的属性写在一起不同的单独写出来
占位符 %class1 跟继承属性连着用会将继承属性单独写出来的
@import导入一个css文件
自定义函数@function
@if @else @for @each@while 可以用在需要逻辑和大量有类似文件名的地方列如

重绘和重排

重绘是当元素的外观被改变是，但没有改变布局和宽高的情况下发生的如背景色 visibility等等

重排是dom的变化影响到了元素的几何属性（宽高）如改变窗口大小文字大小和内容的改变等等

错误码

在这里插入图片描述

em和rem

em是相对于父元素设置字体大小的 rem是相对于根元素《html》设置的
px是固定单位但是也是相对的，比如在普通屏幕和视网膜屏上1px就不一样。

Requirejs

问题出现：所有的代码都放在一个代码里面，然后随着代码加多然后一个文件不够，必须分成多个文件

这么写有个问题就是网页容易失去响应，因为必须一个个加载然后必须要严格保持秩序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编码和维护都很困难。
解决问题 js的异步加载避免网页失去响应，管理模块之间的依赖性

运用require.js的加载
第一步先去下载然后放在js目录下然导入

<script src="js/require.js" defer async="true"></script>

然后加上我们自己的代码文件相当于c语言中的main函数所有的所有的代码运行都从它开始

<script src="js/require.js" data-main="js/main"></script>

require（）函数接收；两个参数，第一个数一个数组，第二个参数是回调函数，当前面的加载成功之后它才会被调用，

// main.js

　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    
    

　　　　// some code here

　　});

模块加载

require.config({
    
    

　　　　baseUrl: "js/lib",

　　　　paths: {
    
    

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

AMD模块的写法
require.js加载模块必须采用AMD规范，必须按照define()函数定义模块。
当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

define(['myLib'], function(myLib){
    
    

　　　　function foo(){
    
    

　　　　　　myLib.doSomething();

　　　　}

　　　　return {
    
    

　　　　　　foo : foo

　　　　};

　　});

// main.js

　　require(['math'], function (math){
    
    

　　　　alert(math.add(1,1));

　　});

加载非规范的模块，这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
在这里插入图片描述

大牛详解

请求头和响应头

在这里插入图片描述

link和import的区别

link属于html标签，而@import是css提供的
页面被加载的时候link会同时被加载而import会等到页面被加载的完的时候在加载
import只在IE5以上才能被识别，而link是html标签无版本兼容问题
link方式的权重高于import的权重

sessionStorage 和localStorage 以及cookie session的区别和联系

共同点：都是保存在浏览器端的

区别：

cookie数据始终在同源的http请求中携带，在浏览器和服务器间来回传递，因此数据量小大小不超过4k，数据在设置的有效时间内都有效果
sessionStorage和localStorage都是本地存储，不能直接传给服务器端，数据量大一点，sessionStorage页面关闭之后数据消失，而localStorage一直存在于浏览器中
作用域不同，sessionStorage即使同一个页面也不能在不同的浏览器中共享，localStorage在所有的同源窗口中都是共享的，cookie也是所有同源窗口共享的。

js严格模式

设置目的

消除js语法的一些不合理不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度
为未来新版本做铺垫

进入标志，在文件首行或者方法里加上这句代码即可

“use strict”

前端性能优化

在这里插入图片描述

js垃圾回收

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）标记清除法
类似于给变量打上yes和No的标签当变量进入环境的时候（自己作用域被引发的时候）打上yes 出了环境的时候打上no，js引擎一定时间间隔内扫描发现之后，对no标签进行剔除。
（2）引用计数
一般说来，就是被引用的次数如果变量被引用，赋值给其他变量则计数加1，如果此时这个变量引用了其他则在原来的基础上减1，直到引用次数为0时则被内存空间回收。

css常见兼容性

tap点透问题

点透的现象：比如你点击弹出层的按钮，但是也触发了弹出层下面的页面的点击事件。同时绑定这两个事件阻止冒泡且在pc端和移动端都能实现。

   $("#save_and_back").on("touchend",function(e){
    
    
        save_article(article_data).then(function(res){
    
    
           location.href = "home.html";
        });
        e.preventDefault();
    });
    $("#save_and_back").on("click",function(e){
    
    
        save_article(article_data).then(function(res){
    
    
           location.href = "home.html";
        });
        e.preventDefault();
    });

计算机网络相关面试题

跨域

跨域：同源策略（浏览器为了安全性考虑实施的非常重要的安全策略：从一个域加载的脚本不能访问其他域的脚本）的限制
何为同源：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同则表示他们同源
三种方法：

在js语句中，在a.com的代码中加入

在b.com中执行echo callback(要回传给a.com的数据)

html5新特性

http的八种请求

大学基础课程

Ajax

客服端与服务器端异步的通信技术
在这里插入图片描述

json和jsonp的区别

JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，JSONP是一种信息传递双方约定的方法。
JSONP产生原因是：AJAX直接请求普通文件存在跨域无权限访问的问题。但是如果调用js文件（一般以JSon为后缀）时则不存在跨域问题，因此客户端使用了这样的文件传递自己的数据，便于客户使用逐渐形成了一种非正式的传输协议，人们把他称作JSONP。该协议要点是允许用户传递一个callback参数给服务器，然后服务器返回数据时会将这个callback参数（回调函数）作为函数名来包裹住JSON数据，这样客户端就可以随意制定自己的函数自动来处理数据。
AJAX和Jsonp的区别
在这里插入图片描述

图片预加载和懒加载

懒加载：先把img的src指向一个小图片，等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。
图片预加载