项目：手工交易系统
难点一：交易员需要支持3600多只股票按照拼音首字母检索，且要支持多音字(支持多音字检索)；
面临问题：没有汉字拼音字典来实现这个需求；
解决办法：写爬虫去爬取百度词典二级字库的7200多个常用汉字的拼音及多音字节，然后构造字典存储在前端实现。
相关优化：3600多只股票的名称和代码字段数据全部缓存在本地(放到js文件模板里，import进来)，这样搜索框搜索的时候，不需要每次都向后端请求返回数据，而且搜索框有做防抖处理。
防抖：就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
需求：需要支持自定义快捷键设置；
解决办法：创建一张本地字典，可以支持用户输入快捷键并帮助他绑定相关事件。
(一大串json，放到localStorage里面，例：{ keyBuy: 114, keySell: 115 } )
比如交易员设置f3和f4快捷键是买入和卖出，那么本地就会存储这两个按键的对应按键编码以及绑定的事件函数，下次他在股票交易的时候按这些快捷键，就会监听相应的事件，触发对应的事件函数。
难点二：每个交易模块要支持用户增删改和自定义布局、自定义拖拽改变位置和大小；
面临问题：自己开发的话成本较高；
解决办法：经过技术选型比较了react-grid-layout、react-dnd等库，综合考虑了性能和实现成本后，选用了react-grid-layout。
(react-grid-layout刚好能满足我们的需求，且API比较友好，性能也很好)
难点三：需要支持一屏内最多显示16只股票的十档行情和逐笔行情，这些行情数据交易所那边的实时数据推送频率不可控，可能会出现时间间隔少于16毫秒；
面临问题：行情推送在订阅的股票数量太多的情况下，推送频率太高，超出GUI刷新的频率限制；
解决办法：通过对数据进行最小时间间隔的合成处理。
本地构建工程化优化：
1、构建本地模拟cgi数据
原理：递归遍历本地一个cgi目录，把目录里的文件名映射到对应的ajax请求路径
2、webpack热加载
提高开发效率
其它的一些简单优化：
数据分页处理，不请求全量数据
项目中遇到的一些问题：
websocket断线重连，使用了一个reconnecting-websocket的模块，用来自动兼容断线重连的问题
文件缓存问题，webpack打包生成的文件名加hash码(hash/chunkhash/contenthash)
项目中安全相关的一些问题：
xss/csrf
前端工程化的理解：
官网项目
优化一：
seo优化 //待完成
优化二：
ssr
//待完成
解决兼容相关的一些问题：
多端适配
HTTP2和 HTTP1.1 比起来有什么优势
1. HTTP/2采用二进制格式而非文本格式
2. HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
3. 使用报头压缩，HTTP/2降低了开销
4. HTTP/2让服务器可以将响应主动“推送”到客户端缓存中
其中的 多路复用对前端优化性能有很大的帮助
HTTP 1.1 基于串行文件传输数据，因此这些请求必须是有序的。
而 HTTP/2 引入二进制数据帧和流的概念，其中帧对数据进行顺序标识，这样浏览器收到数据之后，就可以按照序列对数据进行合并，而不会出现合并后数据错乱的情况。同样是因为有了序列，服务器就可以并行的传输数据。
HTTP2的服务端推送和websocket有什么区别
SSR
1. 浏览器缓存策略，重点Cache-Control选项(强缓存、协商缓存，Cache-Control: max-age, s-maxage, public, private, no-store, no-cache等)
2. 状态码：301 302 307 (301永久，302临时，307临时且不允许变method和body)
3. Cookie和Session是什么？Token有啥用？登录检验过程(没说清楚)
4. Cookie是怎么设置的，里面有哪些选项？Secure选项是做什么的？(主要说到HttpOnly防止脚本读取，SameSite防止跨站攻击，Secure是Https加密传输用的)
5. https握手过程，指纹是怎么得到的？http2和http1.1有啥区别吗？(指纹忘记了，http2只说了头部压缩和多路复用)
6. 跨域方式哪几种？cors头字段有哪些？有什么要注意的？(cors说了非简单请求和withCredentials)
7. 前端事件？哪些是宏任务哪些是微任务？
8. 前端主要的攻击方式，CSRF攻击的细节，XSS和CSRF怎么结合的？CSP是什么？(说着说着就懵逼了，还是菜)
9. 怎么避免自己的页面被iframe嵌套 (不知道)
5128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
