摘要：
1. 早期主要使用JSONP的方式，jsonp的原理很简单，就是动态的创造script标签，然后利用script的src属性不受同源策略约束来跨域获取数据 <script type="text/javascript"> function handleResponse(response){ conso 阅读全文
摘要：
1. JS与C#， Java，Python等很多高级语言一样，对堆中内存有虚拟机（V8）自动回收，不需要程序员手动释放，让coder们更多的focus on业务代码。 2. 对于栈中的基础数据类型，当前函数执行完，只需要移动ESP（记录当前执行状态）指针，则当前执行栈中的上下文全部销毁，所有变量会自 阅读全文
摘要：
1. 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 2. 浏览器优先会把一些小文件放到浏览器Memory中存储，大文件直接放到disk中，内存占用不多的时候，会优先放Memory中 阅读全文
摘要：
1. 浏览器辨别出是否是一个合理的URL，不是则用默认搜索引擎进行搜索。如果是合理的URL，则执行一次DNS的查询，DNS也可以从浏览器的缓存或者操作系统的hosts目录去查找，如果没有找到，则会往远程的DNS域名服务器上去查询，这个结果会被浏览器缓存下来，方便下次加速查询。 2. 如果是合理的UR 阅读全文
摘要：
一 为什么要学习浏览器的原理？ 1. 准确评估web开发项目的可行性； 2.更高的维度审视页面，多站在用户体验的角度来考虑页面性能，比如1秒内看到关键内容，用户点击某按钮，100ms内无响应，动画没有达到60fps，会感受到动画卡顿。 3.在快节奏的技术迭代中把握事物本质。 二 Chrome架构 2 阅读全文
摘要：
1. BFC （Block formatting contexts） 就是块级格式上下文，是页面盒模型（块盒和行盒）布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有： html 根元素 float 浮动，即float 除 none 以外的 阅读全文
摘要：
前端优化的维度其实非常多，使用不同的前端框架（React / Vue），还可以做针对性的优化。实际工作中，应该根据问题的具体表现，分析出性能瓶颈，从业务和技术的角度，找出优化方案，本文主要从一些基础公共的视角去分享一些优化点。 一 减少请求数量 a. 早期使用 gulp 合并 或者内嵌js，css， 阅读全文
摘要：
1. 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局，注意浏览器兼容性问题，chrome21+，Opera12.1+，Firefox22+，Safari6.1+， IE10+才支持。 6个属性for flex container， 6个属性 for 阅读全文
摘要：
1. 由于不同浏览器对各个标签的基础属性默认值不相同，如Padding，Margin等。所以一般会使用一个normalize.css这个2kb的基础包来统一（这个包还有umd版本可以import进入项目），这个包并不是简单粗暴的让所有样式一样，而是尽可能让他们表现的一样，兼顾浏览器的一些基础友好设置 阅读全文