2024年最全react hook仿造掘金博客项目，前端高级面试题

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

},

“include”: [“src”]

}

好极了，现在就可以像往常一样使用相对路径

antd在React项目中按需加载

在antd官网中只介绍了使用react-app-rewired来配置antd的按需加载，但我们日常开发通常会使用eject命令暴露所有配置，所以官网提供的配置方法已不再适用，本文将会介绍在eject项目之后配置antd按需加载的方法

1. 安装antd

cnpm install antd --save

2. 引入babel-plugin-import

使用babel-plugin-import按需引入antd样式

cnpm install babel-plugin-import

3. 修改 package.json

修改package.json文件中的babel配置信息，增加babel-plugin-import的配置

{

······

“babel”: {

“plugins”: [

······

[

“import”,

{

“libraryName”: “antd”,

“style”: “css”

}

],

],

“presets”: [

“react-app”

]

}

}

6. 然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 直接引入组件使用就会有对应的css

import { Button } from ‘antd’;

Primary

添加路由表

---

我们先在router/router.js 写好我们的路由表

import Root from ‘pages/App’

import Home from ‘pages/Home’

import Test from ‘pages/Home/test’

import Detail from ‘pages/Detail’

const routes = [

{

path: ‘/’,

label: ‘首页’,

exact: true,

component: Root

},

{

path: ‘/detail’,

label: ‘书籍’,

component: Detail

},

{

path: ‘/home’,

label: ‘书籍’,

component: Home,

routes: [

{

path: ‘/home/test’,

label: ‘书籍test’,

component: Test

}

]

},

]

export default routes

安装 react-router-config

npm install --save react-router-config

在index.js中引入并且使用

import ReactDOM from ‘react-dom’;

// import ‘antd/dist/antd.css’;

import { BrowserRouter as Router } from ‘react-router-dom’;

import routes from ‘router/router.js’

import { renderRoutes } from ‘react-router-config’

console.log(routes);

console.log(renderRoutes(routes));

ReactDOM.render(

{renderRoutes(routes)}

, document.getElementById(‘root’)

);

需要注意的是，Home有嵌套路由，则需要在Home中再写一遍renderRoutes，并且 renderRoutes(routes)的routes是在props中获取的，即应该写成renderRoutes(props.route.routes)。

import { Button } from “antd”

import { renderRoutes } from ‘react-router-config’

function Home(props: any) {

console.log(props);

const { routes } = props.route

return (

Home

{

renderRoutes(routes)

}

);

}

export default Home;

这样就实现了

按需加载组件

---

安装 react-loadable

npm i react-loadable @type/react-loadable

使用方式，官方文档已经给出

根据例子创建LoadableComponent.tsx文件

import * as React from ‘react’;

import Loadable from ‘react-loadable’;

import {LoadingComponentProps} from ‘react-loadable’;

import {PageLoading} from ‘components/Loading’;

function Loading(props: LoadingComponentProps) {

if (props.error) {

return “Error! Component failed to load”;

} else {

return ;

}

}

const LoadableComponent = (component: any) => Loadable({

loader: component,

loading: Loading,

});

export default LoadableComponent;

其中components/Loading

// components/Loading

import { Spin } from ‘antd’;

import ‘./style.less’;

export function PageLoading() {

return

;

}

//./style.less

.m-page-loading {

text-align: center;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

现在就可以引入 router/router.js中引用

// import Root from ‘pages/App’

// import Home from ‘pages/Home’

import Test from ‘pages/Home/test’

import Detail from ‘pages/Detail’

import LoadableComponent from ‘LoadableComponent’;

const routes = [

{

path: ‘/’,

label: ‘首页’,

exact: true,

component: LoadableComponent(() => import(‘pages/App’)),

},

{

path: ‘/detail’,

label: ‘书籍’,

component: Detail

},

{

path: ‘/home’,

label: ‘书籍’,

component: LoadableComponent(() => import(‘pages/Home’)),

routes: [

{

path: ‘/home/test’,

label: ‘书籍test’,

component: Test

}

]

},

]

export default routes

我们这里Home 使用了按需加载模式，Detail没有，来试一下有没有成功

Home

import { Button } from “antd”

import { renderRoutes } from ‘react-router-config’

console.log(“home”);

function Home(props: any) {

const { routes, } = props.route

console.log(props);

return (

Home

{

renderRoutes(routes)

}

);

}

export default Home;

在Home和Detail文件加个console.log看看。

发现只打印了detail，没打印home，说明按需加载成功。

创建reset.less文件

---

/**

• Global Reset of all HTML Elements

• Resetting all of our HTML Elements ensures a smoother

• visual transition between browsers. f you don’t believe me,

• try temporarily commenting out this block of code, then go

• and look at Mozilla versus Safari, both good browsers with

• a good implementation of CSS. The thing is, all browser CSS

• defaults are different and at the end of the day if visual

• consistency is what we’re shooting for, then we need to

• make sure we’re resetting all spacing elements.

*/

html,

body {

border: 0;

font-family: “Helvetica-Neue”, “Helvetica”, Arial, sans-serif;

line-height: 1.5;

margin: 0;

padding: 0;

}

div,

span,

object,

iframe,

img,

table,

caption,

thead,

tbody,

tfoot,

tr,

td,

article,

aside,

canvas,

details,

figure,

hgroup,

menu,

nav,

footer,

header,

section,

summary,

mark,

audio,

video {

border: 0;

margin: 0;

padding: 0;

}

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

address,

code,

del,

dfn,

em,

ins,

q,

samp,

small,

strong,

sub,

sup,

b,

i,

hr,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

legend,

label {

border: 0;

font-size: 100%;

vertical-align: baseline;

margin: 0;

padding: 0;

}

article,

aside,

canvas,

figure,

figure img,

figcaption,

hgroup,

footer,

header,

nav,

section,

audio,

video {

display: block;

}

table {

border-collapse: separate;

border-spacing: 0;

caption,

th,

td {

text-align: left;

vertical-align: middle;

}

}

a img {

border: 0;

}

// project custom

• {

word-break: break-all;

}

h2 {

font-size: 28px;

margin-bottom: 35px;

}

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

,

td {

text-align: left;

vertical-align: middle;

}

}

a img {

border: 0;

}

// project custom

• {

word-break: break-all;

}

h2 {

font-size: 28px;

margin-bottom: 35px;

}

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】