记录收纳面试遇到的问题

你最近有接触什么新的技术吗？

growingIO

埋点，是网站分析的一种常用的数据采集方法。我们主要用来采集用户行为数据（例如页面访问路径，点击了什么元素）进行数据分析，从而让运营同学更加合理的安排运营计划。现在市面上有很多第三方埋点服务商，百度统计，友盟，growingIO 等大家应该都不太陌生

现有埋点三大类型

用户行为分析是一个大系统，一个典型的数据平台。由用户数据采集，用户行为建模分析，可视化报表展示几个模块构成。现有的埋点采集方案可以大致被分为三种，手动埋点，可视化埋点，无埋点

手动埋点手动代码埋点比较常见，需要调用埋点的业务方在需要采集数据的地方调用埋点的方法。优点是流量可控，业务方可以根据需要在任意地点任意场景进行数据采集，采集信息也完全由业务方来控制。这样的有点也带来了一些弊端，需要业务方来写死方法，如果采集方案变了，业务方也需要重新修改代码，重新发布。
可视化埋点可是化埋点是近今年的埋点趋势，很多大厂自己的数据埋点部门也都开始做这块。优点是业务方工作量少，缺点则是技术上推广和实现起来有点难（业务方前端代码规范是个大前提）。阿里的活动页很多都是运营通过可视化的界面拖拽配置实现，这些活动控件元素都带有唯一标识。通过埋点配置后台，将元素与要采集事件关联起来，可以自动生成埋点代码嵌入到页面中。
无埋点无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据，优点是前端只要加载埋点脚本。缺点是流量和采集的数据过于庞大，服务器性能压力山大，主流的 GrowingIO 就是这种实现方案。

工作中前端开发有遇到什么难点吗？

要说难点的话，我在开发的几年里还真没有遇到过什么特别大的难点，有的bug基本都能解决，解决不了的部分，都是大家相互讨论最后结果，有可能解决问题，有可能会让产品修改需求，但前端开发也确实是有难点的，比如：

1. 我们要不断的学习：由于前端开发现在的火爆程度，所需要学习的东西越来越多，比如npm上数之不尽的包，大小框架也是多的不行，做前端的第一个难点就在于你要不断的学习新的内容，每一年新的技术新的框架，几乎是每一位前端工程师头疼的事情，我们没有办法学习完所有的框架，只能学习部分，去学习框架的特点，不学习也是肯定不可能的，因为迟早会被淘汰。

2.与各个部门的沟通协作：大部分程序员其实都比较内向，沟通能力相对较弱，其实更多的是不愿意和别人沟通，但是工作中没办法，必须涉及沟通部分，和UI和后端和产品和测试等等职位都需要沟通，有效的沟通可以极大的提升工作效率，沟通也能促进人类之间的感情,想办法让自己的能力全方面得到提升，往往纯技术人员是不会收到领导的重视的，所以沟通很重要，也是很多人觉得难的一方面

3. 最后在说回技术方面：现在的公司对于前端人员的要求很高，要求PC端手机端应用都要很漂亮、很炫酷、用户体验、逻辑性等等，我们始终是最接近用户的那群人，我们得为用户考虑到一切问题

项目里面做过什么优化

优化首页加载时间
编译打包打包使用vue-cli-plugin-dll优化
提前预加载提高切换路由的体验 preload
开启gzip压缩，需要服务端支持
runtime.js 处理策略打包成一个单独的文件放进index.html
全局scss变量，不需要每个文件import了

如何优化单页面项目首次加载白屏

优化项目体积
路由按需加载
开启gzip
图片懒加载
index.html加loading
ui组件按需加载
打包后的项目，除了index.html，其他全放cdn，不过这个需要开发的时候配置一下
骨架屏，这里面试官有提到，用Webpack统一处理骨架屏 page-skeleton-webpack-plugin

Vue 项目一些常见问题的解决方案

1. 页面权限控制和登陆验证

2. 动态菜单

以上两个问题本人在开发过程中确实遇到了，这边就不总结了，借用大佬的总结。

大型复杂项目开发协作经验、遇到的问题和解决方案

主要介绍下git的协作流程

如果让你负责一个新项目，如何选择技术栈，如何避免多端合作可能遇到的问题

脚手架开发、约定团队开发规范、Lint 等；根据团队的技术栈、成员能力等去选择

B端遇到的最复杂的数据结构是什么

electron与小程序遇到的什么坑？

项目的亮点/难点，怎么解决的？

你是如何进行技术突破的，又是如何学习的？

平时如何管理你的项目的？

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如页面模块开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

JS 分文件夹存放命名以该JS功能为准的英文翻译。

图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理

前端面试有几问？