前端效率工程化-学习笔记脚手架工具html标签扩展

92 阅读 0 评论 61 点赞

我是靠谱客的博主美丽滑板，最近开发中收集的这篇文章主要介绍前端效率工程化-学习笔记脚手架工具html标签扩展，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

脚手架工具

工具

yeoman

功能：基于特定生成器来创建项目基础代码，提供足够的开放性和自由度，但缺乏某一种技术栈的深度集中和技术生态。更多用户开发一些开发流程里的特定片段代码的生成。

create React App(简称：CRA):

create-react-app用户选择脚手架创建项目
react-scripts 提供了封装厚的项目启动、编译、测试等基础工具

CRA将一个项目开发运行时的各种配置细节完全封装在一个react-scripts依赖包中，但为后期的用户自定义优化带来了困难。

Vue CLI

定位是vue.js快速开发的完整系统

作为全局命令的@vue/cli
作为项目内集成工具的@vue/cli-service
作为功能插件系统的@vue/cli-plugin-

Vue CLI保留了创建项目开箱即用的优点，提供了用于覆盖修改原有配置的自定义构建配置文件和其他工具配置文件，Vue CLI提供了通过用户交互自行选择的一些定制化选项例：是否集成路由，TypeScript等。

各自理念：

Yeoman 代表一般开源工具的理念-专注于实现脚手架生成器的逻辑和提供展示的第三方生成器，主要的目标群体是生成器的开发者

CRA 代表面向有一种技术栈降低开发复杂度的理念-提供一个包含个开发工具的集成工具集和标准化的开发-构建-测试三步流程脚本。

Vue CLI 代表更灵活折中的理念-继承CRA降低配置复杂度的有点，在创建项目的过程中提供更多交互式选项来配置技术栈的细节，允许在项目中使用自定义配置。

了解脚手架模板中的技术细节

对脚手架足够熟悉，能减少花费的时间，提升开发效率

要了解一个脚手架，需要学习会如何使用脚手架来创建项目，还需要了解它提供的具体功能边界，提供了哪些功能，哪些优化。

html标签扩展

meta 标签：自动刷新/跳转

实现 PPT 自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可

//每五秒跳转至url设置的界面
<meta http-equiv="Refresh" content="5; URL=page2.html">
//每隔一分钟就需要刷新页面的大屏幕监控
<meta http-equiv="Refresh" content="60">

缺点：刷新和跳转操作是不可取消的

title 标签与 Hack 手段：消息提醒

let msgNum = 1 // 消息条数
let cnt = 0 // 计数器
const inerval = setInterval(() => {
cnt = (cnt + 1) % 2
if(msgNum===0) {
// 通过DOM修改title
document.title += `聊天页面`
clearInterval(interval)
return
}
const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
document.title = `${prefix}聊天页面`
}, 1000)

script 标签：调整加载顺序提升渲染速度
由于浏览器的底层运行机制，渲染引擎在解析 HTML 时，若遇到 script 标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至 JavaScript 引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。

为了减少这些时间损耗，可以借助 script 标签的 3 个属性来实现。

async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
defer 属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
HTML5 标准 type 属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。

link 标签：通过预处理提升渲染速度

dns-prefetch 当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存
preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。
prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

meta 标签：提取关键信息

<meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">

link 标签：减少重复

有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：

https://lagou.com/a.html
https://lagou.com/detail?id="abcd"

那么在这些页面中可以这样设置：

<link href="https://lagou.com/a.html" rel="canonical">

防抖

试想这样的一个场景，有一个搜索输入框，为了提升用户体验，希望在用户输入后可以立即展现搜索结果，而不是每次输入完后还要点击搜索按钮。最基本的实现方式应该很容易想到，那就是绑定 input 元素的键盘事件，然后在监听函数中发送 AJAX 请求

//代码1
const ipt = document.querySelector('input')
ipt.addEventListener('input', e => {
search(e.target.value).then(resp => {
// ...
}, e => {
// ...
})
})
// 代码1
const ipt = document.querySelector('input')
let timeout = null
ipt.addEventListener('input', e => {
if(timeout) {
clearTimeout(timeout)
timeout = null
}
timeout = setTimeout(() => {
search(e.target.value).then(resp => {
// ...
}, e => {
// ...
})
}, 500)
})
/*在抽取成公共函数的同时，还需要考虑更复杂的情况：
参数和返回值如何传递？
防抖化之后的函数是否可以立即执行？
防抖化的函数是否可以手动取消？
*/
// 代码2 抽取成公共函数
const debounce = (func, wait = 0) => {
let timeout = null
let args
function debounced(...arg) {
args = arg
if(timeout) {
clearTimeout(timeout)
timeout = null
}
// 以Promise的形式返回函数执行结果
return new Promise((res, rej) => {
timeout = setTimeout(async () => {
try {
const result = await func.apply(this, args)
res(result)
} catch(e) {
rej(e)
}
}, wait)
})
}
// 允许取消
function cancel() {
clearTimeout(timeout)
timeout = null
}
// 允许立即执行
function flush() {
cancel()
return func.apply(this, args)
}
debounced.cancel = cancel
debounced.flush = flush
return debounced
}
//关于防抖函数还有功能更丰富的版本，比如 lodash 的 debounce() 函数，有兴趣的话可以到 GitHub 上查阅资料。

节流

设置在指定一段时间内只调用一次函数，从而降低函数调用频率，这种方式我们称之为“节流”。

节流与防抖都是通过延迟执行，减少调用次数，来优化频繁调用函数时的性能。不同的是，对于一段时间内的频繁调用，防抖是延迟执行后一次调用，节流是延迟定时多次调用。