盒子
盒子

前端面试题

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

  • Next.js的优点

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

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

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

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

  • 标签和标签比较

    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安全问题

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