仰望星空的代码
专注Web前端和微信小程序开发。
展开
-
【核心基础知识】你不知道的HTML标签
有一些非常重要却容易被忽视的标签,这些标签大多数用在页面头部 head 标签内,虽然对用户不可见,但如果在某些场景下,比如交互实现、性能优化、搜索优化,合理利用它们就可以达到事半功倍的效果。一、实现交互在实现一个功能的时候,我们编写的代码越多,不仅开发成本越高,而且代码的健壮性也越差。有几个标签,可以帮助我们更简单地实现一些页面交互效果。1、meta 标签:自动刷新/跳转假设要实现一个间隔一段时间自动跳转的效果,你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。但其实有更加原创 2020-05-26 14:43:34 · 385 阅读 · 0 评论 -
【核心基础知识】高效的操作DOM元素,避免性能陷阱
为什么说 DOM 操作耗时?要解释 DOM 操作带来的性能问题,我们不得不提一下浏览器的工作机制。一、浏览器的工作机制1、线程切换浏览器包含渲染引擎(也称浏览器内核)和 JavaScript 引擎,它们都是单线程运行。单线程的优势是开发方便,避免多线程下的死锁、竞争等问题,劣势是失去了并发能力。浏览器为了避免两个引擎同时修改页面而造成渲染结果不一致的情况,增加了另外一个机制,这两个引擎具有互斥性,也就是说在某个时刻只有一个引擎在运行,另一个引擎会被阻塞。操作系统在进行线程切换的时候需要保存上原创 2020-05-26 16:31:40 · 384 阅读 · 0 评论 -
【核心基础知识】3个场景的DOM事件处理
一、防抖在一段时间内能够多次触发并且在最后一次触发才是能够得到完整结果的事件可以使用防抖来防止事件处理函数的多次执行以提升体验和性能。比如:有一个搜索输入框,为了提升用户体验,希望在用户输入后可以立即展现搜索结果,而不是每次输入完后还要点击搜索按钮。一种实现方式应该很容易想到,那就是绑定 input 元素的input事件,然后在监听函数中发送 AJAX 请求。这样的实现很容易造成性能问题。比如一个词需要输入四次那么就会发送四次ajax请求。其实只有最后一次才是用户想要输入的完整内容,前面三次的查原创 2020-07-02 16:22:16 · 269 阅读 · 0 评论 -
【核心基础知识】CSS的关键:布局
通常提到的布局,有两个共同点:大多数用于 PC 端,因为 PC 端屏幕像素宽度够大,可布局的空间也大; 布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多数时候讨论的布局都是对水平方向进行分割。我们在讨论布局的时候,会把网页上特定的区域进行分列操作。按照分列数目,可以大致分为 3 类,即单列布局、两列布局、三列布局。一、单列布局单列布局是最常用的一种布局,它的实现效果就是将一个元素作为布局容器,通常设置一个较小的(最大)宽度来保证不同像素宽度屏幕下显示一致。一原创 2020-07-02 18:16:59 · 281 阅读 · 0 评论 -
【核心基础知识】如何管理CSS代码
尽管 CSS 提供了 import 命令支持文件引用,但由于其存在一些问题(比如影响浏览器并行下载、加载顺序错乱等)导致使用率极低。更常见的做法是通过预处理器或编译工具插件来引入样式文件。将样式文件进行分类,把相关的文件放在一起,让工程师在修改样式的时候更容易找到对应的样式文件,在创建样式文件的时候更容易找到对应的目录。管理样式文件的目的就是为了让开发人员更方便地维护代码。一、开源项目中的样式文件先来看看著名的 UI 相关的开源项目是怎么管理样式文件的。(1)Bootstrap:https:原创 2020-07-03 15:53:48 · 359 阅读 · 0 评论 -
【核心基础知识】浏览器渲染页面的流程
假设我们在浏览器中输入了一个网址,得到了下面的 html 文件,渲染引擎是怎样通过解析代码生成页面的呢?<html> <head> </head> <body> CSDN </body></html>一、从HTML到DOM1、字节流解码对于上面的代码,我们看到的是它的字符形式。浏览器通过 HTTP 协议接收到的文档内容是字节数据,下图是抓包工具截获的报文截图,报文内容为左侧高亮显示的区域(为...原创 2020-07-09 14:28:03 · 271 阅读 · 0 评论 -
【核心基础知识】javascript的数据类型
JavaScript 的数据类型可以分为 7 种:空(Null)、未定义(Undefined)、数字(Number)、字符串(String)、布尔值(Boolean)、符号(Symbol)、对象(Object)。其中前 6 种类型为基础类型,最后 1 种为引用类型。这两者的区别在于,基础类型的数据在被引用或拷贝时,是值传递,也就是说会创建一个完全相等的变量;而引用类型只是创建一个指针指向原有的变量,实际上两个变量是“共享”这个数据的,并没有重新创建一个新的数据。一、UndefinedUndefi原创 2020-07-14 13:30:29 · 233 阅读 · 0 评论 -
【核心基础知识】函数、原型、作用域
数据类型与函数是很多高级语言中最重要的两个概念,前者用来存储数据,后者用来存储代码。JavaScript 中的函数相对于数据类型而言更加复杂,它可以有属性,也可以被赋值给一个变量,还可以作为参数被传递......正是这些强大特性让它成了 JavaScript 的“一等公民”。下面我们就来详细了解函数的重要特性。一、this关键字什么是 this?this 是 JavaScript 的一个关键字,一般指向调用它的对象。这句话其实有两层意思,首先 this 指向的应该是一个对象,更具体地说是函数执行原创 2020-07-15 15:33:55 · 443 阅读 · 0 评论 -
【核心基础知识】Promise的常用场景
一、异步串行将异步转化为串行执行的基本实现方式。异步函数 asyncF1 和 asyncF2,且 asyncF2 依赖 asyncF1 的返回结果执行。使用 Promise 提供的 then 函数可以直接实现,代码如下。asyncF1().then(data => asyncF2(data)).then(() => { ...}).catch(e => console.error(e))如果使用 async/await 可以摆脱链式调用,代码可读性更好:原创 2020-07-17 16:21:23 · 542 阅读 · 0 评论 -
【核心基础知识】模块化的模块规范和实现方式
作为前端开发者或许早已习惯了在开发组件时使用 import 和 export 来管理代码模块,在编写 Node.js 服务时通过 require 和 module.exports 来复用代码。但 JavaScript 模块化之路充满了坎坷,JavaScript 模块发展史上有很多著名的模块规范与实现。一、ES6模块目前最主流的模块化方案应该是 ECMAScript 2015 提出的模块化规范(也称“ES6 模块”),这个规范同时适用于 JavaScript 的前后端环境。1、定义和引用.原创 2020-07-30 18:46:14 · 509 阅读 · 1 评论 -
【核心基础知识】认识浏览器的javascript引擎
JavaScript 引擎的编译过程大体上,可分为解析、解释和优化 3 个步骤。下面就以 V8 引擎为例。一.编译过程1.解析解析步骤又可以拆分成 2 个小步骤:词法分析,将 JavaScript 代码解析成一个个的令牌(Token); 语法分析,将令牌组装成一棵抽象的语法树(AST)。下面是一段简单的代码,声明了一个字符串变量并调用函数 console.log 进行打印。var name = 'web'console.log(name)通过词法分析会对这段代码逐个字符进行解原创 2020-08-03 14:37:13 · 195 阅读 · 0 评论 -
【核心基础知识】HTTP协议的各个版本的特性与差异
HTTP(HyperText Transfer Protocol,超文本传输协议)是浏览器与服务端之间最主要的通信协议一.HTTP/0.91991 年 HTTP 正式诞生,当时的版本是 0.9,从名字可以看出,该协议的作用是传输超文本内容 HTML。协议定义了客户端发起请求、服务端响应请求的通信模式。请求报文内容只有 1 行,为 GET 加上请求的文件路径。服务端收到请求后返回一个以 ASCII 字符流编码的 HTML 文档。HTTP/0.9 通信示意图如图.二.HTTP/1.0随着原创 2020-08-05 11:29:08 · 399 阅读 · 0 评论 -
【核心基础知识】浏览器缓存
想要加快浏览器加载网络资源的速度,可以通过减少响应内容大小,比如使用 gzip 算法压缩响应体内容和 HTTP/2 的压缩头部功能;另一种更通用也更为重要的技术就是使用缓存。Web 缓存按存储位置来区分,包括数据库缓存、服务端缓存、CDN 缓存和浏览器缓存。浏览器缓存的实现方式主要有两种:HTTP 和 ServiceWorker 。一、HTTP缓存使用缓存最大的问题往往不在于将资源缓存在什么位置或者如何读写资源,而在于如何保证缓存与实际资源一致的同时,提高缓存的命中率。也就是说尽可能地让浏览原创 2020-08-07 15:18:13 · 206 阅读 · 0 评论 -
【核心基础知识】浏览器同源策略与跨域方案
一、浏览器的同源策略(Same Origin Policy)源(Origin)是由 URL 中协议、主机名(域名 domain)以及端口共同组成的部分。如果两个 URL 的源相同,我们就称之为同源。不同源的情况有以下几种:协议不同。比如:http://www.baidu.com与https://www.baidu.com,http与https协议不同。 主机名不同。比如:http://www.baidu.com与http://sp2.baidu.com。如果是ip地址也是同理。 端口不同。比原创 2020-08-08 10:39:19 · 352 阅读 · 0 评论 -
【核心基础知识】前后端通信——API设计规范
前后端通信的重要协议是 HTTP,但在实际通信场景中,光有协议是不够的。假设有下面的 GET 请求,返回结果是用户列表数据。GET https://a.com/a对于浏览器而言,可以通过头部字段 Content-Type 轻松判断出来,然后进行对应的逻辑处理。但对于工程师而言是不可读的,不知道 /a 代表什么。解决这个问题的方法就是制定一种规范,让请求具有语义化,这种规范就是我们常说的 API 设计规范。下面就来介绍前后端通信中出现过的 3 种 API 规范。一、RPC—远程过程调用RP原创 2020-08-10 11:16:30 · 649 阅读 · 0 评论 -
【应用场景解析】前端路由实现
当浏览器地址栏中的 URL 发生变化时,会请求对应的网络资源,而负责响应这个网络资源的服务就称为路由。在早期的 Web 开发中,路由都是交由服务端处理,但随着前端技术的快速发展,路由模块逐渐转移交给了前端进行控制,而路由转移到前端,正是前后端分离和单页应用架构 的 基石。一、前端路由实现基础默认情况下,当地址栏的 URL 发生变化时,浏览器会向服务端发起新的请求。所以实现前端路由的重要基础就是在修改 URL 时,不引起浏览器向后端请求数据。根据浏览器提供的 API,有下面两种实现方案。1、基于原创 2020-08-12 11:19:12 · 357 阅读 · 0 评论 -
【应用场景解析】组件通信的状态管理
通过组件化的方式能够有效地将 Web 页面进行解耦,但另一个问题也随之出现,组件之间如何进行通信。我们就来分析组件化 Web 应用中的组件通信问题。一、全局状态对于父子组件通信,框架都已给出可行的解决方案:父组件通过 prop(s) 属性向子组件传参,子组件通过自定义事件来向父组件发送消息。而非父子组件之间,如果通过层层传递,这个过程就会变得相当麻烦。最简单的直接解决方式就是设置一个供多个组件共享的全局变量,但如果直接使用全局变量会存在一些问题,比如:可能多个组件会同时修改变量值,这个过程...原创 2020-08-13 11:01:24 · 227 阅读 · 0 评论 -
【应用场景解析】合理搭建前端项目
前端项目搭建并不只是使用构建工具这么简单,我们将从项目组织、代码规范 2 个方面来进行分析。一、项目组织考虑这样一个场景,在开发项目 projectA 的时候,发现其中的 codeX 也可以用于项目 projectB,最简单直接的处理方式就是把 codeX 的代码直接复制到 projectB 下,按照“三次原则”(三次原则是指同一段代码被使用到 3 次时再考虑抽象)这种处理方式没什么问题。但如果此时项目 projectC 和 projectD 也会用到 codeX,那么这种方式维护起来会很麻烦。原创 2020-08-14 13:56:35 · 394 阅读 · 0 评论 -
【应用场景解析】性能优化指标和方式
为了不断提升用户体验,前端工程师往往会对页面性能不断改进,而这个改进的过程就叫性能优化。一、性能指标什么是性能?性能是指程序的运行速度,而前端性能是指页面的响应速度,提到速度必然离不开一个变量,那就是时间。所以我们会看到性能指标都是以时间为单位来测量的。前端性能的指标有很多,本文从是否可以通过浏览器采集上报,是否由权威组织或大型公司提出,以及是否严重影响用户体验这 3 个方面考虑,选取了下面一些重要的指标。1、首屏绘制(First Paint,FP)首屏绘制由 W3C 标准 Paint原创 2020-08-17 14:15:07 · 472 阅读 · 0 评论