随笔分类 - 前端开发
网页的渲染流程
摘要：要说清楚从浏览器输入一串URL输入到界面展示的过程是一个并不容易的工作。这个问题确实可以全面考察一个人的计算机知识，以及对它们的熟悉深度。如果细说这些理论，完全可以编辑成一本书；而如果说简单的说，也可以寥寥数语就说完。我们这篇博文总体是从一名前端工程师的角度来看待这件事情的。从计算机基础，到网络传输 阅读全文
浅谈web前端优化
摘要： 开篇 优化网站是一个系统性和持续性的过程。很多人认为优化网站的性能只需要合并图片啦，减小HTTP请求啦，部署CDN啦就行，实际上这都是见木不见林的做法。以上的做法经常会被面试者提起，在被问到自己在网页优化的经验和技巧时，大多数人都是例举出以上的这些方法。无可否认 阅读全文
如何搭建一套前端监控系统
摘要：日志采集 信息分类 日常手机的日志信息大概分如下几个类别： 错误 错误类型分多种，不同的错误类型对应用的影响程度不同而分为不同的级别。根据这些优先级，我们也需要指定出一套紧急修复的SOP。 错误类别 捕获方法 表现形式 发生概率 运行错误 全局监听error 类型错误 全局监听error 引用错误 阅读全文
如何编写一个NPM工具包
摘要： 编写代码只是我们整个软件开发流程中很小的一部分，一个完整的软件开发流程还包含其准备，测试，部署等其他阶段。在这些阶段，我们会用到除了编程语言之外的很多工具帮助我们搭起来一套工作流程。本这篇文章，通过一个实际项目，将这套流程辅助工具用到项目中，从代码开发-测试-部 阅读全文
Promise
摘要： TL;DR 早期的callback方式，使得代码变得难以维护。 promise出现，解决了异步代码编写的问题。 generatro函数使得代码更像同步代码，但是也存在问题。 async/await出现了彻底解决异步编码。 callback 接受任务 本篇文章我们 阅读全文
如何搭建自己的CLI工具
摘要： 为什么要CLI CLI 英文全称为Command Line Interface，是在图形界面普及之前人们与电脑的交互方式。例如我们经常在控制台敲的命令系统，或者linux的操作系统命令，或者自己定义的一些列电脑操作命名，凡是通过这种命令去与计算机交互的统称为CL 阅读全文
RAF是什么东东
摘要： ###开篇 我们之前在这篇文章里面讲过浏览器的事件循环，还提到事件队列，调用栈等浏览器的一些实现机制。但还有一些细节我们没有提到，这篇文章我们就来把这些细节补充。 帧和动画 你一定知道动画片是怎样制作的，没错，只需要很多张画满动画的纸张，只要这些纸张的动画情景是 阅读全文
事件循环
摘要： 浏览器 消息队列 我们之前在这篇文章中讲到过关于浏览器线程和进程的知识。这些知识在本文中将继续被用到。浏览器上的任务主要执行在一条线程上，我们称这条线程为浏览器主线程。在它上面执行这众多的任务：包括界面绘制，排版，用户手势/鼠标动作，处理滚动，用户输入，以及执行 阅读全文
HTTP 缓存终极指南
摘要： TL;DR 错误的缓存策略是如何抵消你所做的性能优化工作的。 缓存存在于客户端并且通过chrome或者其他抓包工具查看其状态信息。 客户端通过header中的各个字段做缓存的过期判断。 代理服务器上也存在缓存，并且使得我们在计算浏览器缓存时变得复杂了。 合理地配 阅读全文
WEB安全指南
摘要：说明：本文是Mozilla Web应用部署文档，对运维或者后端开发团队的部署行为进行指导。该部署安全规范内容充实，对于部署有很大意义。同时也涉及到了许多web前端应用安全的基本知识，如CSP, TOKEN, HTTPS，COOKIES等，对于前端来说了解安全规范相关知识是十分有必要的，尤其是COOK 阅读全文
Web vitals
摘要： Introduction 本文列出了评测网页基本性能的一些指标。这些指标包含了一个网页从加载到呈现到可交互的一个完成的周期，在评价整体性能上有较大的参考意义。本文基本上是google vitial系列文章的总结，这些文档还没有中文翻译，但是你可以对照着本文进行查 阅读全文
Redux进阶（一）
摘要：State的不可变化带来的麻烦 在用Redux处理深度复杂的数据时会有一些麻烦。由于js的特性，我们知道当对一个对象进行复制时实际上是复制它的引用，除非你对这个对象进行深度复制。Redux要求你每次你返回的都是一个全新的State，而不是去修改它。这就要求我们要对原来的State进行深度复制。这往往 阅读全文
快速构建SPA框架SalutJS--项目工程目录 三
摘要：配置文件 在开始我们的第一个界面之前，我们需要把初始的html和config文件配置好。html非常简单，只需要一个div作为最外部的容器包裹着所有界面即可： 接下来我们在construction目录中配置config文件和入口app.js文件 第一个界面 配置完基础文件后我们开始配置我们的第一个配 阅读全文
快速构建SPA框架SalutJS--项目工程目录 一
摘要：起因 刚进公司那会儿，接的是一个微信APP应用，SPA是前人搭起来的，用到的技术主要是backbone和zepto。后来那人走了，就卤煮一个人把项目接了下来。项目越是到后面，越发觉了诸多弊端，不停的增加界面和业务使得整个应用看起来臃肿不堪。于是觉得是时候重构了。那时也巧是正好认识requireJS， 阅读全文
快速构建SPA框架SalutJS--项目工程目录 二
摘要：目录结构 上面这张图是salut的目录文档，从github上将其下载后直接运行node run和 node json 可以直接启动项目。下面逐个介绍每个目录的存放的文件和作用。 construction 该目录下存放着工程文件，grunt配置文件以及几本requireJS，在此处运行npm inst 阅读全文
快速构建App界面的框架(●'◡'●) -----SalutJs
摘要：前言 卤煮在公司之初接触到的是一个微信APP应用。前端技术采用的是Backbone+zepto等小型JS类库。在项目开发之初，这类中小型的项目采用这两种库可以满足基本的需求。然而，随着迭代的更新和业务的增加，成堆的代码被覆盖到项目中去了，使得这样一种技术架构方式变得异常的臃肿，很多界面变得异常的难以 阅读全文
浅谈Web自适应
摘要：前言 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可 阅读全文
快速开发Grunt插件----压缩js模板
摘要：前言 Grunt是一款前端构建工具，帮助我们自动化搭建前端工程。它可以实现自动对js、css、html文件的合并、压缩等一些列操作。Grunt有很多插件，每一款插件实现某个功能，你可以通过npm命名去下载插件，然后使用它们。关于grunt的使用以及配置，卤煮不打算在此介绍。本篇博文重点要讲的是如何快 阅读全文
如何快速开发SPA应用
摘要：前言 web早已经进入了2.0时代了，如今的网页大有往系统应用级别的方向发展的趋势，再也不是以前的简单展示信息的界面了。如今很多webapp已经做到了原生应用的功能，并且运用自身的优势逐步取代之。HTML5也很给力，对多平台，多屏幕设备的良好兼容性使得前端工程师们在各种平台上大显身手。卤煮两年前进公 阅读全文
javascript的api设计原则
摘要：前言 本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时遵循的原则，总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章，相关地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。 一、接口的流畅性 好的接口是流畅易懂的， 阅读全文
