礼锐的博客 | Lirui Blog

PWA

Progressive Web Application

概述 PWA（渐进式网页应用）是谷歌推出的一个可以媲美原生app用户体验的web网页。具体涉及的技术有： service worker notification/push api（需翻墙） manifest 优点渐进式：可以运行所有浏览器，再支持的PWA中使用PWA功能，不支持的浏览器也能正常访问响应式：可以适配不同大小的屏幕允许离线访问：servic...

Posted by Lorry on August 25, 2018

webpack plugin

webpack的毛细血管

概述 webpack之所以强大是因为有许多的插件供其使用, 能够极大的丰富其功能.下面就重点介绍一些我工作中所用到的插件们, 基于版本 webpack 4.0 SplitChunksPlugin 他的前身是CommonsChunkPlugin.该插件的默认配置即可满足大多数用户需求默认配置只会影响按需加载, 因为改变最初的chunks将影响HTML文件包含的script标签. 比...

Posted by Lorry on August 25, 2018

客户端储存

cookies, local storage, session storage, indexed DB

概述客户端储存数据只有四种: Cookies Local Storage Session Storage Indexed DB 曾经还有一个WebSQL, 已经被废弃.详情请参见 W3C, 简单的原因就是已经有了Indexed Database 可以更好的实现了. 好处确保可靠的方式保存信息(数据的持久化) 减少带宽提升响应能力实现离线移动...

Posted by Lorry on August 12, 2018

webpack中的css-loader和style-loader

网页三剑客中的css是的打包对网页的呈现以及编码十分重要

CSS Loader css loader 会解析类似于import/require 的@import 和 url() install yarn add css-loader -D Usage 一个好的用于require assets的loader是 file-loader 和 url-loader // file.js import css from 'file.css' // we...

Posted by Lorry on August 7, 2018

js中的比较运算

常用的比较都不会出错, 就怕有了非常见的比较却不知道导致的bug

ECMAScript标准中有一大章节是讲Abstract Operation, 目的仅仅是为了定义语法以及抽象运算, 其中就包括了比较,以及比较中十分重要的类型转换. 类型的转换都知道js不是显示类型的语言.比如 var a = 1; a = '123'; a既可以是数字也可以是字符串, 并不会报错,在其他强类型语言中可不能如此随意. ToPrimitive(input[,Pre...

Posted by Lorry on July 31, 2018

Other Interesting Things

积小流以成江河

有时候看到一些有趣的东西,又不知道放在哪里,也担心过目即忘,索性开一个文,用于记录点滴,不定期整理成单独文章. DOMContentLoaded vs Load Event DOMContentLoaded在HTML document 完成加载和实例化后(parsed)触发,不包括CSS stylesheet, images 和 frames. load是当HTML Document ...

Posted by Lorry on July 11, 2018

Make your own Promise

做出自己的承诺,而不是背诵脍炙人口的誓言

学习完event loop之后,对promise也有了新的认识,现在想自己写一个Promise的实现方式. resolve的功能: 改变promise状态为onfulfilled 储存resolve(…)中的值判断当前是否存在then(…)注册回调函数,如果存在则异步执行onRe 核心: 利用DOM Mutation 实现 microtask 步骤...

Posted by Lorry on July 8, 2018

Event Loop

我不管你应不应,我会永远的询问你,只为万一某个瞬间的你需要

事件轮询是js中最重要的部分之一,只有理解了这个东西,才能理解为什么有callback,为什么用单线程. HTML标准里的定义为了定位事件,用户交互,脚本,渲染, 网络等等,user agent使用事件轮训来描述这些部分. 有两种轮询: for browsing context for workers 在每个user agent中至少有一个browsing cont...

Posted by Lorry on July 4, 2018

Canvas

WebGL的载体

现如今的电脑硬件过剩,密集的计算过程都是CPU负责,渲染过程则是通过GPU,如何最大程度的利用GPU减少CUP的负载,提升页面的流畅度和速度?是否你会偶尔想到还有一个叫做canvas的东西. canvas 用于触发WebGL(Web Graphics Library, 执行2D或3D绘画的API, 基于OpenGL ES 2.0),可以提供一个渲染表面(rendering surface)...

Posted by Lorry on July 3, 2018

Layout Thrashing

你的一点点改变,却要改变整个的我

起因最近项目需要跟硬件打交道,硬件是用C++写的,需要实时接收硬件发送的数据,如果没有对硬件设置延时发送数据的话会导致前端页面无法及时响应,触发layout的回流(reflow),最终程序会卡死. 涉及到了性能优化.寻找程序中比较消耗性能的操作,最后发现了有一个队scroll的操作.目的是实现数据更新的滚屏. message_container.scrollTop = message_c...

Posted by Lorry on July 1, 2018

Lirui Blog

PWA