刻意练习

书中的训练方法自己还在上学期间就在大脑中有些印象,比如归纳总结找出共同点或者规律,便于以后相同问题能快速解决等。但是,我把“刻意练习”的方法使用的比较局限。我觉得在生活的方方面面都能刻意的使用“刻意练习”的方法来做,而不只是爱好或者工作。 下面是我的读书总结,希望能对你有用:

如何高效阅读

在读这本书的同时也是在进行高效阅读的实践,因为我性子比较急,做事强调结果,有很强的目的性。这样的性格特点和书中的一些观点结论不谋而合,下面进行总结回顾。 读书目的 带着目的或者问题看书,重点部分只占 2…

CSS新世界

本书是著名博主张鑫旭的呕心沥血之作,涵盖了 CSS2.1 版本需要注意和知道的常用知识,我这里在看书总结时对以往不太清楚的地方做个深入整理,理清自己的知识体系树。 知识应该成体系 才能方便我们日后工作中对内部信息进行快速检索,所以我在看这本书的同时会画一些结构树(思维导图),以便让我能更深入的理解 CSS 中的一些 “怪异、特殊” 的行为。 需要重点说明的是 :本书是对 CSS2.1 的介绍与总结,最新的 CSS3 的内容需要从别的地方获取资料学习。 前言 了解“流” HTML+CSS…

如何处理滚动优化

解决题述的问题需要清楚用户在滑动页面时,Chrome 在背后的工作过程,了解了工作过程解题就会水到渠成。 基础:Chrome 线程化渲染框架 之前提到过这样的一个浏览器渲染线性流程,这里简单说下: 在传统浏览器中,主线程的执行是 单线程渲染模式 ,JS 执行及页面布局渲染在一个线程中串行执行(根据修改的 CSS 元素不同会跳过部分执行阶段)。为了保证 UI 流畅需要每一帧上述的处理时间小于 10ms。 为了优化上述过程,Chrome 浏览器内核对 Composite…

CSSConf 总结

PDF 下载地址: CSSConf.pdf 这个 Slides 是参加 CSS 大会的总结,因为要对小伙伴们分享,因此这个总结会比较“大”。是的,我搜集了 四届 的大会报告做了总结,引用的文章在每个 Slide 的页脚。 所谓 一通百通 ,我希望这个 Slides 能帮到你理清 CSS 的脉络! BigMap 根据我搜集的 21 个报告做的如下分类。根据 CSS 展开,包括:组件库中 CSS 的位置、响应式、CSS 编译器、动画及性能、CSS…

SSR相关

1. 什么是 SSR?什么情况下需要使用 SSR? SSR(Server Side Render) 服务端渲染 ,这里主要是为了解决 SPA 应用首屏 加载缓慢、白屏 的问题。用户在访问 SPA 应用时,服务端(Nodejs)先获取页面需要的数据 生成 HTML 字符串 传递给客户端用于首屏显示,随后再加载其余资源进行 渲染结果比对 和 后渲染 流程。 2. 传统 SPA 渲染过程和 SSR 渲染过程有何不同? 下面是两种方式的时序图: 客户端渲染 服务端渲染 注意: SSR…

JS高程问答

缘由 记得第一次看《JavaScript 高级程序设计》这本书是在两年前刚接触前端,花了一点时间大致翻阅了下,随后就把这本书当做工具书来用。工作两年后,虽然面对的业务千奇百怪但都能查查手册 Cover…

JS事件机制及Tasks和microtasks的区别

这里所指都是在浏览器环境中,而不是 Nodejs 环境。 JS 异步机制 关于 JS 简要的运行机制及事件队列等知识 强烈 希望能翻墙看下这个视频: 地址 。 这里有个很重要的图需要深刻理解: Chrome 中的 V8 只处理 JS 的解析及执行(可能有歧义) JS 运行在单线程上,通过 event loop 完成异步调度 DOM、XMLHTTPREquest、setTimeout、setInterval 等是异步的 WebAPIs 异步代码会被推入 callback queue(Tasks…

从输入URL到页面显示过程中发生的事儿

占坑,内容会陆续补齐 1. URL->IP 将输入的域名转化为真实的 IP 地址,这里涉及到 DNS 层层向外查找等内容。 2. IP->HTTP 拿到远端的 IP 地址,浏览器向服务器发送 HTTP 请求,包括相应的请求头 3. HTTP->TCP 4. 服务端部分 4.1 负载均衡 5. 浏览器接收数据 6. 浏览器解析 HTML 流程 浏览器渲染过程,资源加载同步异步 7. 浏览器资源加载过程 keep-alive、缓存、HTTP1.0、HTTP1.1、HTTPS、HTTP2.0…

无服务端的自动静态化Web应用

这里介绍的不是 SPA 和 PWA。 我觉得这可能是未来 前后端分离的新方式 ,因为: 更快的页面显示 项目在构建时就能生成对应路由的静态页面,用户访问网页就能提前触发 事件并渲染页面。这个在后面的一篇文章 《SSR 相关》 有介绍。 更方便的部署 前端项目骨架都静态化,因此资源可以走 CDN,这个没什么好说的。页面动态部分通过接口获取,可以使用 RESTAPI 也可以是 GraphQL。这样相对于传统的网页项目来说,静态化的方案可以大大节省服务器的资源。 解决方案成熟 1. React…