秋来九月八

‌浏览器网络线程接收HTML文档‌：当浏览器的网络线程接收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。整个渲染流程分为多个阶段，包括HTML解析、样式计算、布局、分层、绘制、分块、光栅化和画面绘制。每个阶段都有明确的输入输出，前一阶段的输出会成为后一阶段的输入，形成一个组织严密的生产流水线。

根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。新任务会加到消息队列的末尾。在Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

推荐一些办公日常的快捷键和摸鱼日常

网站的构建往往会忽略一群特殊的人群，在某些方便存在障碍的网民，比如帕金森综合征，红绿色盲，视力存在一定问题等。帕金森综合征是无法正常使用鼠标的，所以只能依靠键盘来与网站交互。还有颜色辨识障碍的，可能对哪些可交互，哪些不可交互无法准确识别。视力存在问题就更加麻烦，他们也许需要将字体放大或者完全依靠读屏软件辅助识别网站的类容。目前国内对这些群体在网站上的体验并没有太大关注，因此开发者也并未思考过，如何帮助这特殊人群浏览自己编码的网站。实际上，web有一套标准用来指导开发者，如何在编码的过程中，帮助他们。

img标签是没有跨域限制的，图片的url在a网站可用，在b网站同样可用，而且图片的加载和整体dom的渲染是异步的，对本项目的影响较小。缺点也很明显，如果图片的url被不怀好意者利用，将会对图片上传的网站构成威胁，维护也不方便，如果图片被上传网站删除或者更改，所有使用图片链接的网站都会收到影响。解析加载快，不需要额外下载，只是会增加代码的体积，但相对于8k以下的图片来说，增加的代码体积会更小，所以比较划算。gif格式的优点也很明显，可以透明的，而且采用无损压缩，尺寸相对较小，支持动图，兼容性很好。

alert、confirm、prompt这类原生的交互框，会让整个页面的程序停下来，给人一种页面出错的错觉。不允许将函数的参数命名为arguments，这会覆盖掉函数作用域中的arguments对象 ⭐⭐。如果函数过于复杂，参数太多，不利于维护和使用，是否可以考虑将函数拆分，或将参数以对象的方式传递。优先使用访问对象属性，[]应用在访问动态属性名，或有特殊字符的属性名时使用。不要在块中使用函数声明，（如if、while、for 等）⭐⭐⭐。如果需要使用警告框，提示框，请自己封装或者使用ui组件库。

HTML5 doctype在每个html页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能展现一致字符编码统一使用UTF-8字符集ie兼容internet export 支持使用兼容性meta 标签来指定使用什么版本的ie渲染页面，通常通过edge mode来通知IE使用最新的兼容模式引入css和javascript在引入css和js时不需要指明type，因为text/css和text/javascript 分别是它们的默认值css必须在head标签内引入，js基

单行注释用//单行注释，要单起一行，放在要注释代码的上方。如果单行注释不是代码块的首行，那么注释前面需要空出一行注释前要带一个空格便于阅读多行注释用/** …/和//…多行注释/** …/用在文件说明，类型说明，参数说明//…用在代码多行注释//TODO : 来标记即将处理的问题//FIXME: 来标记需要解决的问题...

一、 基本规范1.1 缩进使用两个空格 ⭐⭐1.2 每个声明块的左花括号前添加空格 ⭐⭐⭐1.3 声明块的右花括号必须单独成行 ⭐⭐⭐1.4 每个声明语句：后应该添加一个空格，前面不需要 ⭐⭐⭐1.5 所有语句都要以分号结尾 ⭐⭐⭐二、 选择器规范2.1 选择器分组时，每一个单独成一行 ⭐⭐/** bad */ .name, .des { font-size: 16px;}/** good */.name,.des { font-size: 16px;}2.2 为选

主域名不同的cookie是不能数据共享的，但一级域名相同，子域名不同的却可以。比如 youkuaiyun.com 和 blog.youkuaiyun.com 和 dengxi.youkuaiyun.com 这三种domain的cookie在dengxi.youkuaiyun.com这个网站都能拿到。

详细解读 onfocus 到onblur 各个事件之间的联系和顺序

前后端分离开发，是目前行业的主流，前面有一篇博客曾经说过这个问题，当时，我推荐使用yapi模拟数据。然后使用yapi是需要成本，公司是否有yapi账户，开通yapi账户的花费，yapi模拟的数据不在前端项目中，等等问题。可以安装mock.js，导出配置好的接口和数据，在项目的最顶层引入，当发送ajax请求时，可以将请求拦截，返回mock数据。安装npm install mockjs --save或yarn add mockjs在src目录下创建mock文件夹，文件夹创建mock.jsimp

这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；编号用在HTML中时，需要在前面加上&#符号；用于CSS文件中，但是需要用反斜杠\转义；用于JavaScript，和CSS用法一样，不过要用\u来转义；不同浏览器表现效果略有不同，不同的设备表现效果可能也有差异；货币符号实体HTML代码CSS代码js代码$$$\0024\U0024¢¢¢\00A2.

git clone 拷贝一个 Git 仓库到本地，让自己能够查看该项目，或者进行修改。git clone [url]git clone https://github.com/tianqixin/runoob-git-testgit branch 用于新建一个分支git branch [分支名] [被拷贝的分支名]git checkout 用于切换分支git checkout [分支名]git checkout -b 创建一个新的分支，并切换到该分支git checkout -b [新建

时间复杂度和空间复杂度是考量算法性能的重要指标，尤其是时间复杂度，因为计算时间的快慢，直接影响到用户的体验，而占用的内存可以在物理形式上解决。先说说什么是算法？算法是解决编程问题的代码实现过程，比如将最大的数从数组中取出来，给数组排序，甚至简单到将两个数组连接，将两个数字相加。换句话说，平时我们为了实现数据上变化，所写的函数或者逻辑，都能称之为算法，算法不是什么高大上的东西，编程人员基本天天与之接触。这也体现了它的重要性，别说前端开发只是实现页面布局，不需要学算法。时间复杂度这是一种概念，来大致估算

react vue js原生事件，默认都是以冒泡的形式触发。事件流总是以 先捕获 从根节点 —> 祖父节点 —> 节点本身后冒泡 节点本身 —> 祖父节点 —> 根节点所有的事件都是默认冒泡触发，在捕获阶段不会触发。如果将该事件设置为捕获，那么该事件则不会在冒泡阶段触发。vue代码<div @click = "divClick"> <a href="www.baidu.com" @click="linkClick"

单例模式无论执行多少次，返回的始终都是同一个对象或实例。// 构造函数function Person(name,age) { this.name = name; this.age = age; this.setName = (changeName) => { this.name = changeName }}Person.prototype.getName = function () { return this.name}// 单例模式函数(自执行函数,将r

今天到新公司入职，代码始终拉取失败，报错如下remote: The project you were looking for could not be found发生这个问题的原因，在于git账号可能并未真正登录。我们可以通过打开电脑的凭据管理器，查看git当前的登录是否正常。如果你发现，你的账号相关的凭据并不存在，可能需要重新登录一次git解决方案：在自己的项目路径上加上自己的用户名，例如：Git clone http://10.9.100.1:0000/credit/code/xia

前端模块化开发是每一位前端开发人员必须掌握的开发技能。如何让自己封装的模块更便于维护，易于使用，逻辑清晰，是一个巨大的挑战。前端封装逻辑封装样式封装ui组件封装业务模块封装逻辑封装在前端开发过程中，我们经常会遇到相同的逻辑，比如将自然数转为字母，或者到某一个时间的倒计时，或者对后端数据进行处理等。实际开发中，我们总是会将相同的逻辑，写成一个方法，放到一个共用文件中，只要需要就引用对应的方法，不需要每一次都处理一遍相同的逻辑。我们开发过程中，会运用各种各样的框架，在这些框架中，总会有介绍对应

前言echarts是比较流行的图标和地图框架，文档清晰，灵活，满足各种自定义。众多的api接口，让使用者犹如大海捞针，每一个细节都需要通过api慢慢调整，耗费开发者大量的时间精力。在这里补充一种新的图表地图框架，虽然做得不如echarts强大，适合快速开发节奏，让前端程序员在除了echarts以外还可以多一种选择。antvantv是蚂蚁金服团队打造的图表和地图框架（用过antd的同学应该知道这个团队）。官方网站：https://antv.vision/zh/aboutantv包含G2（就是图表

正常的项目开发流程第一步，产品部门出项目原型和思维导图第二步，设计师出设计图，前后端分别派出一位大佬，根据原型图设计接口第三步，前端根据设计的接口和原型图写静态页面，后端根据接口文档和原型写服务器接口。第四步，前后端对接，联调，测试，上线。对于前端开发而言，如果第一步和第二步没做好（不断改需求，改接口文档，改设计图），太痛苦了。前后端应该在统一的接口文档下进行同步开发，这样就能实现双方分离，前后端单独交付，最后联调。前端如果单独通过node.js开发服务器，耗费大量的人力，所以需要使用一个比较

要使用先安装（全局）npm i lerna -g安装之后注册npm，登录npm（如果你还没下载npm，可以不用看了）npm login创建一个新的包lerna create @scf/ding-userinfo依次往下配置，分别是package name: 包名称，version: 版本号description:简单描述包的作用keywords: 关键字 （可以不填）homepage: 可以不填license: (ISC)entry point: 入口文件 （用过web

性能优化：一、减少请求资源大小或者次数　1、尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）　　原因：主要是为了减少http请求次数以及减少请求资源的大小　　打包工具：　　webpack　　gulp　　grunt.　　…2、尽量所使用的字体图标或者SVG图标来代替传统png图　　因为字体图标或者SVG是矢量图，代码编写出来的，方大不会变形，而且渲染速...

localStorage和sessionStorage共同点1、存储大小均为5M左右2、仅在客户端中保存，不参与和服务器的通信不同点一localStorage 应用的范围要比sessionStorage大一些，localStorage 只要是同一个浏览器，同源页面（我的理解是同一个服务器的页面）都可以共享sessionStorage 只能在同一个浏览器，同一个页面内共享。当你使用...