tomwang1013的学习总结

行内布局是css的难点，主要涉及line-height，vertical-align，font-size这几个属性，一个简单的”行内居中对齐”就常常让人抓狂，因为行内不止有文字，还有图片、icon font及inline-block元素，它们混在一起会导致各种像素偏差，如果不深入理解其中原理的话，调起来只有碰运气了。还好，已经有前辈帮我们做了很深入浅出的总结，最近又重温了一遍张鑫旭同学的《C... 阅读全文…

归并排序和快速排序比较归并和快速排序是两种常见的排序算法，基本思路都是分治，平均时间复杂度都是O(nlg(n))，下面是它们的一些特性比较： 归并排序 快速排序 平均时间复杂度 O(nlg(n)) O(nlg(n)) 最坏时间复杂度 O(nlg(n)) O(n^2) 稳定性 稳定 不稳定 空间复杂度 O(n) O(1) 归并排序实现merge-sort.js 1... 阅读全文…

浏览器端有多种存储方式，作为PWA程序该如何选择离线存储方式呢？首先我们看看典型的web程序有哪些数据需要存储。浏览器端的数据分两类： 静态资源：如html，css，js，image等和某个URL关联的请求资源 动态数据：如动态请求后端接口返回的一些状态信息等，通常是ajax请求返回的 总结来看： 对静态资源(URL addressable resources)，我们使用Cache A... 阅读全文…

offline cookbook是关于service worker缓存及响应策略很好的文章，这里画个图总结一下： offline cookbook 阅读全文…

关于CSRF和XSS的文章非常多，相信很多人也看过了，笔者也看了一些，但总是记不住，这个做个非常简单的总结，让大家有个直观的印象 CSRF全称：Cross-Site Request Forgery，以用户的名义发起一个恶意请求，简单过程如下： 用户登录正常网站A 用户同时不小心打开黑客的网站B 网站B自动或由用户触发发起一个恶意的指向A服务器的请求 A服务器处理这个恶意请求，坏事发生 这... 阅读全文…

tree shaking指的是去掉没用到的代码，减小js文件体积从而提高加载速度；而code splitting指的是如何将js代码分解成不同的js文件，使得页面在打开时只加载必要的js文件，从而提高页面加载速度。 大概有以下三种分解方式： Vendor splitting将第三方代码(vendor code)和应用程序的代码分开来，使用不用的缓存策略，使得它们互不影响。我们始终都应该这么做... 阅读全文…

web性能分析通常都是基本理论+反复实践，没有一套统一的标准或方法。以我的经验来看，我们或多或少都知道一些或几点相关理论，但都是很片段很零碎的，不太好总结或关联起来。本文尝试在critical render path(后简称crp)上做一个分析总结。 什么是crp？crp是和浏览器首屏渲染有关的，指的是浏览器在渲染首屏之前需要经过哪些关键步骤。我们知道，首屏渲染速度是性能的一个重要指标，我们... 阅读全文…

这篇文章的主要素材来源于google开发文档：https://developers.google.com/web/fundamentals/performance/rendering/，算是做一个总结再加上自己的一些理解，做一个备忘录 概述显示器是以一个固定速度刷新屏幕的，一般是每秒60帧，我们可以想象浏览器里面有一个保存当前浏览器内容的渲染缓存，有一个独立的线程每隔大约16.6ms从这个缓... 阅读全文…

简单地说，tree shaking就是不要将用不到的代码打包进来，举个例子，下面的文件定义了2个函数： 12345678// util.jsexport function f1() { // ...}export function f2() { // ...} 主模块只用到了其中一个函数： 1234// main.jsimport * a... 阅读全文…

Blob一般指的是二进制块Binary Large Object的简称，用来存储大块不透明的任何数据，如图片、视频、字符串等等。Blob作为一种js类型，只有下面很少的属性和方法： 属性 size：blob的字节大小 type：blob的MIME type 方法 slice：截取blob的一段返回一个新的blob，算是blob的一种创建方法 Blob的构建直接构建 Blob构造函数：... 阅读全文…