面试官:说说React服务端渲染怎么做?原理是什么?
面试官:说说React服务端渲染怎么做?原理是什么?
一、是什么在SSR中,我们了解到Server-Side Rendering ,简称SSR,意为服务端渲染
指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程
其解决的问题主要有两个:
SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
加速首屏加载,解决首屏白屏问题
二、如何做在react中,实现SSR主要有两种形式:
手动搭建一个 SSR 框架
使用成熟的SSR 框架,如 Next.JS
这里主要以手动搭建一个SSR框架进行实现
首先通过express启动一个app.js文件,用于监听3000端口的请求,当请求根目录时,返回HTML,如下:
1234567891011121314const express = require('express')const app = express()app.get('/', (req,res) => res.send(`<html> <h ...
面试官:说说 React中的setState执行机制
面试官:说说 React中的setState执行机制
一、是什么一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用
如下例子:
1234567891011121314151617181920212223242526import React, { Component } from 'react'export default class App extends Component { constructor(props) { super(props); this.state = { message: "Hello World" } } render() { return ( <div> <h2 ...
面试官:state 和 props 有什么区别?
面试官:state 和 props 有什么区别?
一、state一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是 state,一般在 constructor 中初始化
当需要修改里面的值的状态需要通过调用 setState 来改变,从而达到更新组件内部数据的作用,并且重新调用组件 render 方法,如下面的例子:
12345678910111213141516171819202122class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 }; }); } render() { ...
面试官:super() 和 super(props) 有什么区别?
面试官:super() 和 super(props) 有什么区别?
一、ES6 类在 ES6 中,通过 extends 关键字实现类的继承,方式如下:
123456789101112131415161718192021222324class sup { constructor(name) { this.name = name; } printName() { console.log(this.name); }}class sub extends sup { constructor(name, age) { super(name); // super代表的事父类的构造函数 this.age = age; } printAge() { console.log(this.age); }}let jack = new sub("jack", 20);jack.printName(); //输出 : jackja ...
面试官:说说你在使用React 过程中遇到的常见问题?如何解决?
面试官:说说你在使用React 过程中遇到的常见问题?如何解决?
一、前言在使用react开发项目过程中,每个人或多或少都会遇到一些”奇怪”的问题,本质上都是我们对其理解的不够透彻
react 系列,33个工作日,33次凌晨还在亮起的台灯,到今天就圆满画上句号了,比心
在系列中我们列出了很多比较经典的考题,工作中遇到的问题也往往就藏中其中,只是以不同的表现形式存在罢了
今天的题解不算题解,准确来说是对整个系列的一次贯穿,总结
目录:
react 有什么特性
生命周期有哪些不同阶段?每个阶段对应的方法是?
state 和 props有什么区别?
super()和super(props)有什么区别?
setState执行机制?
React的事件机制?
事件绑定的方式有哪些?
构建组件的方式有哪些?区别?
组件之间如何通信?
key有什么作用?
refs 的理解?应用场景?
Hooks的理解?解决了什么问题?
如何引入css?
redux工作原理?
redux中间件有哪些?
react-router组件有哪些?
render触发时机?
如何减少render?
JSX转化DOM过程?
性能 ...
面试官:如何理解CDN?说说实现原理?
面试官:如何理解CDN?说说实现原理?
一、是什么CDN (全称 Content Delivery Network),即内容分发网络
构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术
简单来讲,CDN就是根据用户位置分配最近的资源
于是,用户在上网的时候不用直接访问源站,而是访问离他“最近的”一个 CDN 节点,术语叫边缘节点,其实就是缓存了源站内容的代理服务器。如下图:
二、原理分析在没有应用CDN时,我们使用域名访问某一个站点时的路径为
用户提交域名→浏览器对域名进行解释→DNS 解析得到目的主机的IP地址→根据IP地址访问发出请求→得到请求数据并回复
应用CDN后,DNS 返回的不再是 IP 地址,而是一个CNAME(Canonical Name ) 别名记录,指向CDN的全局负载均衡
CNAME实际上在域名解析的过程中承担了中间人(或者说代理)的角色,这是CDN实现的关键
负载均衡系统由于没有返 ...
面试官:说说 HTTP1.0/1.1/2.0 的区别?
面试官:说说 HTTP1.0/1.1/2.0 的区别?
一、HTTP1.0HTTP协议的第二个版本,第一个在通讯中指定版本号的HTTP协议版本
HTTP 1.0 浏览器与服务器只保持短暂的连接,每次请求都需要与服务器建立一个TCP连接
服务器完成请求处理后立即断开TCP连接,服务器不跟踪每个客户也不记录过去的请求
简单来讲,每次与服务器交互,都需要新开一个连接
例如,解析html文件,当发现文件中存在资源文件的时候,这时候又创建单独的链接
最终导致,一个html文件的访问包含了多次的请求和响应,每次请求都需要创建连接、关系连接
这种形式明显造成了性能上的缺陷
如果需要建立长连接,需要设置一个非标准的Connection字段 Connection: keep-alive
二、HTTP1.1在HTTP1.1中,默认支持长连接(Connection: keep-alive),即在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟
建立一次连接,多次请求均由这个连接完成
这样,在加载html文件的时候,文件中多个请求和响应就可以在一个 ...
面试官:DNS协议 是什么?说说DNS 完整的查询过程?
面试官:DNS协议 是什么?说说DNS 完整的查询过程?
一、是什么DNS(Domain Names System),域名系统,是互联网一项服务,是进行域名和与之相对应的 IP 地址进行转换的服务器
简单来讲,DNS相当于一个翻译官,负责将域名翻译成ip地址
IP 地址:一长串能够唯一地标记网络上的计算机的数字
域名:是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识
二、域名域名是一个具有层次的结构,从上到下一次为根域名、顶级域名、二级域名、三级域名…
例如www.xxx.com,www为三级域名、xxx为二级域名、com为顶级域名,系统为用户做了兼容,域名末尾的根域名.一般不需要输入
在域名的每一层都会有一个域名服务器,如下图:
除此之外,还有电脑默认的本地域名服务器
三、查询方式DNS 查询的方式有两种:
递归查询:如果 A 请求 B,那么 B 作为请求的接收者一定要给 A 想要的答案
迭代查询:如果接收者 B 没有请求者 A 所需要的准确内容,接收者 B 将告诉请求者 A,如何去获得这个 ...
面试官:说一下 GET 和 POST 的区别?
面试官:说一下 GET 和 POST 的区别?
一、是什么GET和POST,两者是HTTP协议中发送请求的方法
GETGET方法请求一个指定资源的表示形式,使用GET的请求应该只被用于获取数据
POSTPOST方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用
本质上都是TCP链接,并无差别
但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中会体现出一些区别
二、区别从w3schools得到的标准答案的区别如下:
GET在浏览器回退时是无害的,而POST会再次提交请求。
GET产生的URL地址可以被Bookmark,而POST不可以。
GET请求会被浏览器主动cache,而POST不会,除非手动设置。
GET请求只能进行url编码,而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的,而POST没有。
对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏 ...
面试官:什么是HTTP? HTTP 和 HTTPS 的区别?
面试官:什么是HTTP? HTTP 和 HTTPS 的区别?
一、HTTPHTTP (HyperText Transfer Protocol),即超文本运输协议,是实现网络通信的一种规范
在计算机和网络世界有,存在不同的协议,如广播协议、寻址协议、路由协议等等……
而HTTP是一个传输协议,即将数据由A传到B或将B传输到A,并且 A 与 B 之间能够存放很多第三方,如: A<=>X<=>Y<=>Z<=>B
传输的数据并不是计算机底层中的二进制包,而是完整的、有意义的数据,如HTML 文件, 图片文件, 查询结果等超文本,能够被上层应用识别
在实际应用中,HTTP常被用于在Web浏览器和网站服务器之间传递信息,以明文方式发送内容,不提供任何方式的数据加密
特点如下:
支持客户/服务器模式
简单快速:客户向服务器请求服务时,只需传送请求方法和路径。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快
灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Con ...