前端面试题

Vercel是一个用于静态站点和无服务器功能的云平台。Next.js是由Vercel基于React框架。

• Next.js的优点

  • 代码自动分割
  • 基于页面的路由方案，预加载页面
  • 基于Webpack的开发环境，支持热模块替换
  • 既能感受到单页应用的好处，又能兼顾到SEO

  SPA的优点是：良好的交互体验，内容改变的时候不需要重新加载整个页面；良好的前后端工作分离模式，可以共用一套后端程序；减轻服务器压力，后端不再考虑展示逻辑和页面合成。

  SPA的缺点是：不利于SEO，首屏加载慢。SEO可以使用SSR和页面预渲染优化；首屏加载可以使用CDN、预加载、异步加载组件、服务端渲染优化。

  Next.js基于React改进，既保留了SPA的优点，也可以做服务端渲染。

• <Link>标签和<a>标签比较

  Link组件实现客户端的路由切换，使用<Link prefetch>使链接和预加载在后台同时运行。

  Link是一个高阶组件，在Link组件上设置props无效，只接受href和类似的props。如果想要向其添加props，则需要对下级组件进行添加。

• React和Vue对比

  1、Vue鼓励你去写近似常规HTML的模板，写起来很接近HTML元素，只是多了一些属性。React推荐使用JS的语法扩展JSX写。

  2、React中使用setState()更新状态，在Vue中，数据由data属性在Vue对象中进行管理。

• 打包优化

  从打包体积和打包速度两方面：

  1、优化Loader；HappyPack将Loader的同步执行转为并行；DLLPlugin将特定的类库提前打包然后引入，减少打包次数；压缩代码。

  2、按需加载，首页加载文件越小越好，将每个页面单独打包成一个文件；Scope Hoisting分析模块之间的关系，尽可能的把打包出来的模块合并到一个函数中；Tree shaking删除项目中未被引用的代码。

• 网络通信（TCP之类）

• API安全问题

  • 身份验证：为开发者分配AccessKey和SecretKey，用于接口加密。
  • 防止篡改：使用参数签名，参数加SecretKey使用MD5加密得到Sign，请求携带AccessKey+Sign。
  • 重放攻击：使用timestamp+nonce，时间戳验证请求是否有效，nonce值唯一的随机字符串，为每条请求提供唯一标识符。
  • Token机制：用户登陆成功后，服务器返回一个Token，用户每次发送请求都携带Token，服务端校验Token的合法性。
  • 过载保护：对接口访问频率做限制。
  • ...