随笔分类 -  Frontend Notes

基于主子孙（无限嵌套）数据结构的diff算法分析和尝试
摘要：一、 主子孙（无限嵌套）数据结构长啥样？ 模拟一种场景，一个人是主实体（聚合根），此人有多张银行卡（子），每张银行卡有多次取款记录（孙），它的数据结构示意图大致如下 实际业务中，子节点和孙节点都是数组存储，数据量很大时可能还需要考虑分页场景，所以子和孙应该是对象或者二维数组来表达，他可能用类似下面的 阅读全文
posted @ 2021-04-08 21:33 lswtianliang 阅读(306) 评论(0) 推荐(0)
Webpack 模块化打包优化
摘要：一、 早期的前端打包工具有很多，主要是Grunt和Gulp等，他们早期的打包思路是通过一个配置文件告诉工具，哪些文件应该被绑定在一起输出到一个文件中，这样可以减少了http请求，还可以做一些压缩。 而webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack 阅读全文
posted @ 2020-09-28 11:37 lswtianliang 阅读(759) 评论(0) 推荐(1)
Web网络安全
摘要：一. 浏览器系统安全方面，使用多进程方案，而js主线程运行在渲染进程中，渲染进程时运行在沙箱中的，没有对本地OS文件的直接读写权限，所以需要通过IPC与浏览器主线程通信，才可以获取cookie等信息，这样就限制了恶意JS对本地OS系统的置入病毒或者恶意程序。 二. 网络安全方面Https 实现安全加 阅读全文
posted @ 2020-09-24 21:48 lswtianliang 阅读(962) 评论(0) 推荐(0)
Http2.0和Http3.0
摘要：1. http2.0，或许是一个过渡协议 a. 它兼容1.1版本，2015年左右发布，目前部分知名网站已经开始使用，它依然基于TCP协议，主要focus on performance。 b. 很多请求都是头部很多内容，实际传输的内容很少，所以http2.0做了头部压缩。不过 HTTP/2 并没有使用 阅读全文
posted @ 2020-09-23 23:30 lswtianliang 阅读(4247) 评论(1) 推荐(0)
Http协议基础
摘要：1. http是应用层协议，从1990年左右，0.9版本起步，到1993年1.0版本发布, 2000年左右发布1.1，2015年http2发布，还有目前还在草案的http3，现在很多网站还在使用20年前的http1.1，所以我们主要focus 1.1版本。 2. http报文有3部分组成，请求/响应 阅读全文
posted @ 2020-09-23 22:05 lswtianliang 阅读(216) 评论(0) 推荐(0)
Https 握手过程
摘要：1. https工作在http和tcp层之间，添加了加密逻辑，让整个传输过程更安全，不会被黑客操纵和截取明文报文。https的握手过程是在tcp三次握手之后额外添加2次RTT来完成。 2. 这中间涉及到对称加密和非对称加密，使用非对称加密（RSA代表）协商出对称加密（AES代表）的密钥，主要是因为非 阅读全文
posted @ 2020-06-12 23:57 lswtianliang 阅读(1257) 评论(0) 推荐(0)
JS跨域解决方案
摘要：1. 早期主要使用JSONP的方式，jsonp的原理很简单，就是动态的创造script标签，然后利用script的src属性不受同源策略约束来跨域获取数据 <script type="text/javascript"> function handleResponse(response){ conso 阅读全文
posted @ 2020-04-28 09:29 lswtianliang 阅读(174) 评论(0) 推荐(0)
浏览器缓存策略
摘要：1. 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 2. 浏览器优先会把一些小文件放到浏览器Memory中存储，大文件直接放到disk中，内存占用不多的时候，会优先放Memory中 阅读全文
posted @ 2020-04-12 09:31 lswtianliang 阅读(560) 评论(0) 推荐(0)
在浏览器输入一个URL后主要流程是怎么样的？
摘要：1. 浏览器辨别出是否是一个合理的URL，不是则用默认搜索引擎进行搜索。如果是合理的URL，则执行一次DNS的查询，DNS也可以从浏览器的缓存或者操作系统的hosts目录去查找，如果没有找到，则会往远程的DNS域名服务器上去查询，这个结果会被浏览器缓存下来，方便下次加速查询。 2. 如果是合理的UR 阅读全文
posted @ 2020-03-21 23:38 lswtianliang
Chrome浏览器进程
摘要：一 为什么要学习浏览器的原理？ 1. 准确评估web开发项目的可行性； 2.更高的维度审视页面，多站在用户体验的角度来考虑页面性能，比如1秒内看到关键内容，用户点击某按钮，100ms内无响应，动画没有达到60fps，会感受到动画卡顿。 3.在快节奏的技术迭代中把握事物本质。 二 Chrome架构 2 阅读全文
posted @ 2020-02-21 22:59 lswtianliang 阅读(571) 评论(0) 推荐(0)
Front-end 前端优化总结
摘要：前端优化的维度其实非常多，使用不同的前端框架（React / Vue），还可以做针对性的优化。实际工作中，应该根据问题的具体表现，分析出性能瓶颈，从业务和技术的角度，找出优化方案，本文主要从一些基础公共的视角去分享一些优化点。 一 减少请求数量 a. 早期使用 gulp 合并 或者内嵌js，css， 阅读全文
posted @ 2020-01-28 21:07 lswtianliang 阅读(272) 评论(0) 推荐(0)
Browse兼容性问题
摘要：1. 由于不同浏览器对各个标签的基础属性默认值不相同，如Padding，Margin等。所以一般会使用一个normalize.css这个2kb的基础包来统一（这个包还有umd版本可以import进入项目），这个包并不是简单粗暴的让所有样式一样，而是尽可能让他们表现的一样，兼顾浏览器的一些基础友好设置 阅读全文
posted @ 2020-01-11 22:22 lswtianliang 阅读(138) 评论(0) 推荐(0)