「2022」项目/拓展问题

项目问题

❗2）性能优化/SEO优化

移动端可能会出现一些比如网络问题或其他性能问题，比如说会出现白屏，一般导致的原因有哪些？那如何去提高加载速度？加载白屏问题做了哪些优化？

三类优化：加载时间（网络），渲染问题（下拉数据），内存优化（压缩图片大小）

首屏性能优化：使用图片懒加载(vue-lazyload)、路由懒加载/组件懒加载、使用字体图标iconfont(svg)、使用雪碧图减少请求、UI框架按需加载，代码压缩，cdn加载静态资源
webpac优化：webpack分包、打包小图片时进行base64转码

编码优化
事件代理、keep-alive、拆分组件、key保证唯一性、路由懒加载、异步组件、防抖节流
、生成打包报告（可以看到整个项目依赖大小，项目访问速度，从而进行优化。生成打包报告的两种方式：一种使用npm run build --report，另一种使用vue脚手架的ui可视化面板，在项目中输入vue ui）

Vue加载性能优化
图片懒加载、使用第三方UI库（element-ui）按需引入组件、第三方模块按需导入（babel-plugin-component ）

用户体验
app-skeleton骨架屏、shellap p壳、pwa

SEO优化
预渲染
重要的内容比如logo用H1标签
meta标签，keywords关键词和description描述
标签语义化
百度搜索资源平台

cdn：一组分布在不同地理位置的服务器，通过计算使用户可以访问到离自己最近的web资源。
base64：就是一串字符串码表示的图片，在加载页面和js时一块加载出来，减少了加载图片时的http请求（安装url-loader，rules里写一些配置）。
iconfont：放大不失真，颜色方便修改，占用资源少

❗3）你说一下cdn托管是怎么做的吧

电信天翼云服务器，Nginx源？
公司的cdn虽然不是我配的，但是我有去了解怎么去配置，就是在比如百度云后台里面开通个cdn服务，配置源信息，再配置个CNME

❗2）项目中遇到过哪些问题 怎么解决？有碰到过哪些比较难解决的问题？

• 优料库的项目：产品详情页上面有个索取样品的按钮，点击会有一个浮层让用户填信息，填完提交的时候如果不小心多次点击了提交后台就会有好几条一样的数据，然后我用节流做了个优化，点击提交之后加了一个loading的图片，不管点了多少次都是过了2秒之后才能提交，防止重复点击。
• 解决vue项目首次加载慢，使用vue-router路由懒加载实现。加载慢
• 页面缓存问题，刷新没反应。通过给文件添加版本号。

❗ylk这个PC项目为什么用jQuery？为什么不用Vue?

那你这个也可以用服务端渲染，没考虑那个东西？

❗4）Vue和jQuery区别？为啥要用Vue来写这个项目？

jQuery是用选择器来获取dom对象，然后对dom对象进行进行赋值、取值、事件绑定等操作，数据和界面是在一起的。
Vue数据和视图是分离的，可以进行组件化开发。
Vue的优点：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快。

❗你这个产品中心这块，有做一个动态效果，气泡往上冒的，你这块效果是怎么实现的？canvas怎么实现的，能具体说说吗

Canvas+requestAnimationFrame动画。（html5还提供一个专门用于请求动画的API，顾名思义就是请求动画帧）
原理和优势

1. 屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz
2. 动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。
3. setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。
4. requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。
5. CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
6. 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。

❗2）图片懒加载怎么做的？了解过lazyload的原理吗？

使用了jquery.lazyload.min.js的插件

<img data-original="img/bmw_m1_hood.jpg">
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            threshold : document.body.offsetHeight,
            effect : "fadeIn",
            skip_invisible : true
        });
        $(window).trigger('scroll');
    });
</script>

使用目的：优化页面性能，提升用户体验，减少服务器压力；

❗抽取公共代码都是怎么做的

所有页面中公共头部和版权文件抽取出来单独来引用

❗2）你跟你们后端是怎么联调的?通过什么方式？

写好页面之后，后端提供接口文档和接口，通过ajax，进行前后端的一个调试
ajax怎么使用？
$.ajax({})里面写个url、type写get或post，success返回成功的结果

❗3）Vue用了多久，觉得自己掌握的如何？

用了一年多，掌握的还行

❗只有这一个Vue项目吗？

工作中Vue的项目就这一个，还有一些小的活动页面也用到过Vue，还有就是我自己看视频学习Vue的时候也有做一些项目。

❗有做过后台的项目吗？

做过CRM、CMS的后台

❗后台的用户权限怎么实现？

❗5分钟内免登录怎么实现？

需求：要求在关闭页面后30分钟内再使用应用可以免登陆，30分钟后再打开就需要跳转到登录进行验证。
使用vuex在页面刷新会重置状态和给localstorage设置有效期来完成。
首先，每次页面刷新，都会将我们应用中的vuex state重置，我就设置一个 flag 默认状态为false，当我登录到应用中后，将 flag 置为 true，那么每次刷新时，经过vue router 的前置守卫，就通过判断这个 flag 来决定是否要重新装载路由。当然为了避免产生类似于加载了重复路由的警告，我们可以定义一个路由重置方法，在每次装载路由时都重置一次，代码如下：

import VueRouter from 'vue-router'
 
//创建路由方法
const createRouter = () => new VueRouter({
    // mode: 'history',
    routes: ['你定义的静态路由']
})
 
//路由重置方法
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // the relevant part
}
 
…………

接下来，我们在最外层的父组件加上对浏览器关闭事件的监听：

//app.vue 
mounted(){
    let vm = this;
    window.addEventListener( 'beforeunload',e =>{
         //在浏览器关闭之前在 localstorage 中存入一个 30分钟有效的 flag
         // 这里用的 vue-ls
         vm.$ls.set('need_login_flag',true, 30 * 60 * 1000);
    })
},

然后在 vue router 的路由前置守卫中，加入判断：

router.beforeEach((to, from, next) => {
    //第一个判断用于判断是否为刷新或者新开页面
    //第二个判断控制 是否已关闭页面超过一定时间（localstorage 过期了）
    if(!state.flag && !Vue.ls.get('need_login_flag')){  
         //去登录页 
         next({ path: '/' });
    }
})

❗你做过的项目都是哪种类型的？

前台的一些网站，公司官网、资讯、商城类的这种网站

❗你们公司有几个前端？平时的开发是独立的多还是团队合作的多呢？

2个，另一个是高级前端在广州办公

❗前端开发流程

产品沟通需求，出文档和原型图，UI出设计稿，后端提供接口，根据设计稿写静态页面和交互，和后端联调接口，再去测试，没问题就上线了。

❗2）项目打包和部署上线

❗你有什么想问我的吗？

我想问下咱们公司前端后端大概有多少人？
我想问下咱们公司目前在做什么项目？
我想问下咱们公司前端用的技术栈是什么？

拓展问题

❗2）平时如何学习前端的？逛什么社区或技术论坛？

考察点：学习能力+总结能力+动手能力

我学习前端主要是通过视频的方式，主要是总结很多知识点，还有就是从做项目中学习，在项目中也会遇到很多问题值得学习，我一般都是自己查找原因或者和同事交流进行解决，然后我会把遇到的问题记录下来做一些总结。
还会逛一些社区网站比如掘金、csdn上面看一些技术文章，比如要学Vue的话看看官方的文档。

最近在学习Vue3+TypeScript+Element-Plus做一个后台管理的项目；

❗有自己搭建过Vue吗？有线上运行吗？

工作中做的项目都有在线上运行，工作之外自己搭建过一个Vue3的后台管理项目

❗前端还需要学习什么新技术？对新技术的看法

Vite和TypeScript
TypeScript 是一种给 JavaScript 添加特性的语言扩展：类型批注和编译时类型检查
TypeScript 通过类型注解提供编译时的静态类型检查
为什么要使用 TypeScript？

1. 程序更容易理解（函数或者方法输入输出的参数类型，外部条件等）；
2. 效率更高，在不同代码块和定义中进行跳转，代码补全等；
3. 更少的错误，编译期间能够发现大部分的错误，杜绝一些比较常见的错误；
4. 好的包容性，完成兼容 JavaScript，第三方库可以单独编写类型文件；

❗上一份工作中有什么收获？

工作规范，文件命名和文件归档，每件任务落实到位，充分考虑工作的优先级，合理排期，提高工作效率；
要有一个良好的工作习惯就是完成了任务要及时反馈；
在团队协作之间有什么问题要及时沟通，遇到不清楚的要多问；
平时业余时间还需要多去学习一些新的前端技术。
办公技能提升；

❗你以往的经历中最让你有成就感的事？

在我看来最有成就感的事就是我在上一份工作当中，从一开始什么都不会做出来了很多项目的。
完成过什么项目，解决过什么问题，业务能力也得到过领导的认可。

❗在面试过程中有什么值得让我思考的问题

其他问题

你觉得前端工程的价值体现在哪？

为简化用户使用提供技术支持（交互部分）
为多个浏览器兼容性提供支持
为提高用户浏览速度（浏览器性能）提供支持
为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
为展示数据提供支持（数据接口）

什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，而且好扩展。

说说你对前端架构师的理解

负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率； 带领团队完成研发工具及平台前端部分的设计、研发和维护； 带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先 负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

你在项目中遇到问题会怎么办？

遇到问题我会先查资料，如果实在是没办法解决，会及时问相关的人，即使加班，也会在规定的时间内解决。

介绍一下你自己的核心优势

比如沟通能力、学习能力、逻辑性、效率高等等。
会的技术栈

你对前端行业有什么看法？

目前前端是比较火热的，再加上移动APP开发和小程序也越来越多，所以我认为前端的发展前景很不错的。前端技术更新速度太快，还有很多需要学习和进步的地方。

你是如何理解前端的？前端是在做什么？前端和后端的区别是什么？

前端是最贴近用户的程序员，比后端、产品经理、运营都近，前端还要关注用户体验，懂得交互设计，前端的能力就是把更好的产品呈现给用户。后端就是做接口数据相关的还有逻辑功能实现。

Vue实现登录记住密码和登录验证码

链接

你用element-plus做后台管理做过哪些功能

哪些功能

项目结构梳理

你的项目对于基本的结构的设计要有。模块的划分、工具类的封装与抽离、ajax层的封装与抽离（这个具体业务具体分析）、公共css样式的抽取、公共组件的设计（SPA的会设计的比较明确）。这样你的src目录下肯定就有了utils文件夹、一堆模块的文件名、css公共样式文件。

了解公司是做什么业务的

买化塑产品：优料库/智慧商铺/慧正资讯决策指数/专家库/在线课堂/展会/求购。
买化塑是集信息服务、交易服务、数据服务为一体的服务平台；买化塑是一家专注于服务化工产业链上的，为上游和下游的用户群体提供商务服务的一家互联网平台。
B2B：企业对企业（1688批发、慧聪）
B2C：商家对个人（天猫、京东）
C2C：个人对个人（淘宝）
O2O：线上交易到线下消费（线上团美团券到线下使用）

Vue带来了哪些改变？

区别
改变一：真正意义上的前端工程师
之前开发都是前端做静态页面，把页面给到后台程序员改成jsp、php、asp等等…一顿乱改，一顿塞变量，做完以后页面样式乱七八糟，最后你再调整css。说白了你会html，css就行了，基本没什么门槛，可以这么说。
有了Vue和Node的前端工程化以后，前端工程师能做的事情越来越多，后台人员只需要抛过来一个Api，剩下的就可以都交给前端了。

改变二：服务端渲染VS客户端渲染
传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。（Spring Boot是通过模板引擎，由服务端完成的渲染工作）
但是vue开发是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。
不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。

改变三：渲染优雅，代码易维护
jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在标签中，渲染更加优雅。
因为前端代码和后台代码都是分开的，所以项目更容易维护，开发效率更高。

改变四：项目工程化，结合npm直接安装第三方库
Vue让前端项目更加工程化，同时也规范了前端工程师的代码，而node和npm的加入才是vue能蓬勃发展的重要原因。
Node为Vue提供了本地server和模块化开发的思路，npm更能安装Vue项目需要的模块，配合Vue使用，比如Moment.js Element ui vuex等等，这些第三方库让Vue有了无限的可能。

Nginx

Nginx是一款轻量级的Web服务器、反向代理服务器，它的内存占用少，启动极快，高并发能力强