1、Th 在dota里表示Tide hunter(潮汐猎人)
2、在动漫与游戏中,TH是指GALGAME《To Heart》,而To Heart2则是"TH2"
3、在网页设计中,th是一个元素标签
4、.th 是泰国顶级域名后缀
5、元素符号: Th 英文名: Thorium 中文名: 钍 Th元素
拓展资料:1815年,贝齐里乌斯从事分析瑞典法龙(Fahlum)地方出钍生产产的一种矿石,发现一种新金属氧化物和锆的氧化物很相似。他用古代北欧雷神Thor命名这一新金属为throine(钍),给出它的拉丁名称 thorium和元素符号Th。
由于贝齐里乌斯是当时化学界的权威,所以化学家们都承认了它。可是,贝齐里乌斯在10年后发表文章说,那个称为thorine的新金属不是新的,含它的矿石只是钇的磷酸盐,他自己撤销了对钍的发现。
到1828年,贝齐里乌斯分析了另一种矿石,是由挪威南部勒峰岛上所产的黑色花岗石中找到的,发现其中有一种当时未知的元素。仍用thorine命名它。现明确,这种矿石的主要成分是硅酸钍ThSiO4。因此钍是先被命名后被发现的。
先来说说为什么要自动化。凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务。这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业,而成为一个复杂的工程时,还涉及到性能优化一系列工作等等,这时自动化已然是迫切的需求。早期的网站开发
在还没有前端工程师这种分工如此明确的岗位时,大家所理解的前端工作无非就是制作网页的人,包括html、css、js等。稍微高级点的可能就是php了,可以读写数据库,可以称之为动态的网页。通过近几年的发展,分工越来越细,在大公司如BAT三家,基本是把前端分开来了,有专门的人写js,有专门的人写css。以前一个网页可以一个人搞定,包括切图,写页面到写逻辑,无非是几个资源链接拼凑起来。当然逻辑性不强,页面不重。
最简单的页面如下:
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
这样几个html标签就能展示成网页了。顺便写几个逻辑,填写几个表单就差不多了。这就是早期的网页。
javascript库
有一次需求你做了一个页面,然后第二次需求,你领导又让你做了页面,只是这次与上次的逻辑都差不多,就改改样式皮肤,修改图片等等。这样你就要从原来的地方拷贝一份代码过来。如果有一天发现一个bug,你就需要修改两处地方,这使得你非常的恼火,于是就把公共的逻辑抽取出来,两个页面都引用这段代码,这样就很好的解决了这个问题。以后有第三个第四个页面,你也不会担心了。渐渐的公共的代码越来越大,又是个独立的文件,这个文件就成为了一个库文件了,就像jquery等等。
模块化
随着业务的不断扩大,页面越来越多,逻辑越来越重,之前你提取出来的库文件越来越大,功能越来越多。A页面只引用了其中的一部分函数,B页面C页面同样如此,后来你决定将库文件拆分成更小的模块,由各自的功能决定应该在哪个模块。这样一来前端开发就此演化为模块化开发方式。你开发的产品就像搭建积木一样,将各个模块组装在一起。
网页优化
好了,现在你的工程很庞大了,文件数量新增了非常的多,JS模块也很多,这时候一个页面也能加载了上十个js文件或者好几个样式文件。用户访问你的网页的时候需要把这些资源从服务器下载下来,所以理论上来说,想要加快你的网站,比必须减少下载的时间。可以从下载的数量和下载的大小出发,在不做大改变的前提下就是减少HTTP请求数以及压缩文件大小。雅虎的网页优化十四条军规中很大一部分是针对这种情况进行优化,如:
1、合并请求
2、使用雪碧图
3、压缩js、css代码(除去空格,混淆等等)
4、延迟加载
在PC时代,这些问题可能不是那么尖锐。移动互联网的兴起,对网页速度提出了更高的要求,因为网速相对比较慢。也有新的优化措施出现,比如缓存js文件等。可是要做到这些,并不是很容易。假如你的页面引入十个JS文件,这样发布出去显然是不好的,所以你要手动合并,将十个JS文件合并成一个,或者几个。然后还要将合并后的文件进行压缩。发出去之后产品经理发现有个小问题需要优化一下,这时候你又要重复刚才的工作。如果这样的事情发生三次,或者更多次,你会变得恼火。当然这只是令你恼火的一点点因素而已,更多的还有合并雪碧图等等。
经历过几次痛苦之后,你会发现性能优化与工程本身之前存在一些矛盾的地方。就是在优雅的开发的同时,兼顾性能方面的考虑实在难以做到。这时自动化工具太有必要了,将开发与发布隔离开来。按照优化的准则,利用构建工具,在发布的时候轻松一键搞定,这将是最理想化的作业方式。
一些构建工具
nodejs的出现,给前端开发带来了一些改变。在没有任何语言障碍的情况下,前端同学可以转为后台开发,nodejs带来另外的一个福音便是构建工具。之前的压缩合并工具大多是由java编写的,像雅虎的yui compressor,但对没有java基础的前端开发来说,至少要走不少弯路。然后最近一两年比较火的是国外的grunt和gulp,以及国内的FIS。相比而言,国外总是走在前头,在探索更好的开发方式,做出了很多探索。
grunt
之前在鸟厂的时候,在组内也尝试推广过模块化的开发方式,主要是用seajs模块加载器,关于这个的好处我这里就不展开说明了。这种方式从11年开始到现在基本已经得到了认可,或者说是未来的趋势,ECMAScript 6已经将模块化加入了规范。等到浏览器支持应该是几年之后的事情。这种模式主要是参考了nodejs,将其思想运用到浏览器上。seajs模块化的诟病之处便是网络请求,上线前面临的一个问题就是模块太多,有十几个文件,需要合并和压缩,而且还不能简单的将文件合并在一起。有一套他自己的规则。
在开发的时候,一个模块对应一个文件,如下:
// a.js
define(function(require, export, module){
require('./b')
// xxxxx
})
//b.js
define(function(require, export, module){
// xxxxx
})
如果上线前简单的将这两个文件合并在一起,那么a模块是不能找到b模块,因此这样的做法是行不通。一个规则是根据文件的路径,给每个模块加上一个唯的id,id的值就是该模块的路径:
// a.js
define('a', function(require, export, module){
require('./b')
// xxxxx
})
//b.js
define('b', function(require, export, module){
// xxxxx
})
所以在自动化的过程中,需要提取模块的唯一ID,然后再进行合并。
grunt的插件很多,也非常的成熟,能够满足各式各样的需求。作为新手,我是琢磨了大概半个月的时间才大概了解了其配置文件的意思,但也只是知道用,不明白个所以然。grunt的运作方式就是根据配置文件加载相应的插件,完成相应的任务(task)。当时中文资料比较少,英文也比较晦涩,尤其是配置文件中各配置项的意思不太明白。而当文件多起来了,构建的效率明显跟不上。加上组内也不太重视,所以就没怎么去折腾了。转去鹅厂之后,grunt就无疾而终了。
gulp
没有在实战项目中运用过,暂不说明
组内的构建工具
刚来到鹅厂时,也有自己的一套构建工具,比较单一,项目不大。主要是将上文提到的seajs所带来的文件解决掉,提取模块ID,合并之。随着业务的发展,越来越不满足实际的需求,后来索性放弃了它,转而投向百度的FIS。
FIS构建工具
放弃之前的构建工具是因为一个尖锐的问题引起的,就是在发布的时候,有一段时间将会引起外网报错,就是页面已经出去,js文件却还是旧的,即使你在文件后面加上了查询参数也不太起作用。加上浏览器和CDN本身的缓存,这个问题一时之间找不到好的解决方案,唯一的办法就是采用新的文件,文件加上自身的hash值作为文件名。这样一来就瞄准了百度的FIS,它能够简单的实现我们所需要的功能。
核心思想是文件的定位,也就是在开发测试的阶段并不需要将文件hash,只需要在上线的那一刻来做这步。找到原有文件的依赖,将其替换为新的文件名。
理想都很美好,但现实真的很残酷。FIS上手相对于grunt是要简单些,但其一点也不简单。需要理解整体的思想才能去实施,而且小白用户基本不会使用,除非是一些简单的合并需求。但复杂的业务场景FIS是满足不了的。包括前面提到的模块ID的提取,seajs模块文件的合并等都需要进行二次开发才能够做到。
很多页面是嵌入到APP内部的,APP本身也可以做一次缓存,根据特定的文件名规进行缓存,彻底消灭了304请求,如果每次都是新文件,在服务器端也可以配置更长久的缓存期,所以这里也需要定制开发。
FIS最值得诟病的地方就是全局构建,这一点不仅使得构建速度快不起来,而且生成的新文件特别多,导致发布的时候去挑选文件。在多人协作开发的时候,会产生冲突,发布的过程极其的痛苦,不知道百度内部的人是怎么使用的。望着文件夹满是hash的文件名,瞬间就奔溃了。这是小组内部使用FIS后,血的教训。
后来决定大刀阔斧的对FIS进行改造。在构建的时候只生成相关的资源文件,核心是找到该文件所依赖的所有的资源文件。当然还是全局构建,只是在生成文件的时候不生成其他不相关的。
这样发布工作变得非常轻松,一目了然。然后配合现在的发布工具,基本上整个开发发布流程也比较顺畅了。那天小组会议讨论,构建工具的理想目标是什么,这个问题我也没有细想过,总之就是要从重复的劳动中解放出来,把时间花在值得的地方。或许可以采用一键发布,这可能就是理想,也是后期可以考虑再优化的地方。
现在组内所采用的构建工具,已经和FIS本身有很大的差别了。进行了很多地方的改造,后面有机会进行整体的开发发布流程分享,以及我的一些构建思路。
iamaddy
关注
1
0
0
专栏目录
4款前端自动化构建工具的介绍与对比.zip_java自动化框架
01-07
4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款
前端自动化构建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040">使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。 本套视频主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具,为什么要用构建工具,到如何去使用构建工具。 学习本套视频之前 建议先学习 JS 模块化。</span>
如何实现自动化前端开发?
CSDN资讯
7051
IDE不仅是文本编辑器,还是编译器、生成器、调试器和集成器。 作者 |Nicolus Rotich 译者 |弯月,责编 | 郭芮 出品 | CSDN(ID:CSDNnews) 以下为译文: 每一行代码都可以表示为字符串变量,无论代码本身执行了哪些操作。 这就是我们使用文本文件(即集成开发环境,IDE)向计算机发布指令的根本原因,我知道你一定在想:文本编辑器的名字也太高级了吧。...
前端自动化发布实战总结
weixin_34418883的博客
163
为什么要做 今年4月份,开始自己的第二份工作,习惯了老东家如丝般的发布体验,一下子感觉来到了“原始社会”。 首先这是一篇长文,主要介绍自己在做自动发布这个过程的一些思考。 引用玉伯的Web研发模式演变来说,现在我们处于 - Web1.0时代: 前后端代码耦合 java环境对前端过于复杂 缺乏工具和规范,代码难维护 内嵌代码:html内嵌js,j...
前端项目自动化部署
最新发布
@SCY
392
本文主要内容为三个方面: 一、使用Git仓库来管理项目 二、如何使用云服务器 三、使用Jenkins进行自动化部署
如何实现Web前端自动化?让这些工具帮助你
xiaoxijing的博客
1569
随着前端技术的发展,前端开发从静态网页的开发到复杂的前后端交互再到基于node.js的全栈开发,前端需要做的事情越来也多,前端代码的逻辑和交互效果越来越复杂,越来越不易于管理。模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。在新技术不断涌入的多元化发展模式中,Web前端工程师的工作量也越来越大。前端自动化构建在整个项目开发中越来越重...
前端工程化实战 - 自动化构建工具
每天进步一点点
496
最典型的运用场景就是在去开发网页应用时就可以使用: main.scss index.html package.json 安装 Sass 模块 安装完成后,在 node_modules 下有一个 .bin 目录,这个目录下有一个 Sass 的命令文件,可以使用指令打开帮助信息 将 Sass 文件转换成 CSS 使用 或 启动 实现自动化构建 (1)安装 browser-sync 模块,用于启动一个测试服务器,去运行项目 (2)在 scripts 中添加 serve 命令,通过 br
前端自动化部署
qq_41206257的博客
2689
名词解释 集成:在推送或者 merge 代码后自动进行构建打包 交付:将上一步生成的代码包发布至测试、生产等环境 需求 在 git 代码仓库发生变化后,自动执行打包脚本,并且发布至服务器。 解决的问题 在之前每次开发完毕需要上线之前,需要手动执行 bash 命令打包,并且将打包后的代码人为的拖动至上传应用(FlileZilla Pro)。 手动执行构建脚本消耗时间人力 而拖动代码文件会存在拖拽错误,覆盖之前的其他项目代码等难以预料的问题 工具选择 gitlab/github/gitee Jenki
前端自动化介绍
张营的技术博客
1815
文章目录DevOps介绍前端自动化自动化相关概念问题提出常见现象最佳实践 DevOps介绍 相信大家或多或少的听过这个词DevOps,而且看起来很高大上,其实这个是敏捷开发的一种执行流程表现,先来一张经典的DevOps流程图: 具体的流程为: 先是计划plan,编码code,然后编译build,测试test(Dev) 然后发布release,部署deploy,运维operate,监控monitor(Ops) 然后发现问题或有新的需求,就重新计划plan。。。如此循环 这就是完整的DevOps流程。 下
前端项目自动部署
weixin_29005819的博客
1190
一、实现的最终效果 点击一下,即可实现 项目打包 文件压缩(便于上传到服务器) 连接服务器 备份 上传打包的文件 解压 完成部署 二、原理及需要的插件 原理: 执行shell脚本 需要的npm依赖包:archiver(压缩),ssh2(执行脚本:如连接服务器,解压等操作) 三、详细步骤 3.1 安装包 yarn add archiver ssh2 3.2 引入包和编写配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自动化测试详解
wdquan19851029的专栏
2405
这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。 1 前言 文章研究了四个问题:什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中,梳理了一套完整的前端自动化测试方案,包括:单元测试、接口测试、功能测试、基准测试。 2 什么是自动化测试 维基百科是这样定义的html 在软件测试中,测试自动化(英语:Test automation)是一种测试方法,使用特定的软件,去控制测试
Gitlab-ci:从零开始的前端自动化部署
大灰狼的小绵羊哥哥的博客
2669
前言 本文为首发原创,同时转载至公众号“全栈前端精选“和“广发证券金融科技”中 目录 一.概念介绍 1.1 gitlab-ci &&自动化部署工具的运行机制 1.2 自动化部署给我们带来的好处 二.知识预备 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本语法规则 2.3 .gitlab-ci.yml配置的特定关键字 三.CI实战 3.1 编写一个gitlab-ci的“he
vue前端用服务器上路径的图片展示_谈谈前端性能自动化
weixin_39968640的博客
1445
前述:前段时间出了性能分析的需求,需要对前端页面性能做一套自动化测试工具。领导都发话了,那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续,需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE,后端用的node(由于本人较熟悉前端),数据库用的是mangoDB。好了,话不多说,上才艺~设计背景 &前...
实现前端项目自动化部署(webpack+nodejs)
winne雪
2097
前言: 一般来说,我们前端是不需要关心部署的事情的,只需要把打包后的文件直接丢给后台去部署就可以了。但是呢,如果频繁修改一点东西就要叫后台进行部署,这样后台会很烦(毕竟人家还有其他工作嘛),我们也会很不好意思。 或许有些公司会给前端配置可视化操作服务器文件的软件(FTP客户端),这时我们就可以打包后自己到服务器上部署了,如果不同环境需要部署到不同服务器,此时我们又需要区分打包再手动上传到服务器上。 这时我们就会想,有没有直接一句命令就能自动化部署到不同服务器上,根本不需要打开软件来手动上传的??? 答案:必
前端项目自动化部署——超详细教程(Jenkins、Github Actions)
q411020382的博客
1374
参考资料 Docker 入门教程
常用的前端自动化构建工具gulp/grunt/fis --简介
杜杜的博客
235
常用的前端自动化构建工具 之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力,那么我们会了解 Gulp Grunt fIS 用法基本相同:都是通过一些简单的代码,组织一些插件的使用,然后就可以用工具代替我们一些重复的工作,增强开发效率。 Grunt 是基于内磁盘实现的 最早的自动化构建工具 Grunt(点击可进入官网查看) 优点: 它的插件几乎可以帮助我们完成任何我们想要做的事情, 缺点: 由于工作过程是基于临时文件去实现的,所以构建速度较慢。 下
前端自动化部署项目到服务器 -- 一行命令搞定,摒弃传统的手工部署 npm run build
一个来自外太空的游客
2353
传统的前端代码手工部署流程如下: 传统的手工部署需要经历: 1.打包,本地运行npm run build打包生成dist文件夹。 2.ssh连接服务器,切换路径到web对应目录下。 3.上传代码到web目录,一般通过xshell或者xftp完成。 传统的手工部署存在以下缺点: 1.每次都需要打开xshell软件与服务器建立连接。 2.当负责多个项目且每个项目都具有测试环境和线上环境时,容易引起部署错误。 (个人之前非常悲剧地遇到过一次,由于同时负责四个项目,八个环境。一天同时可能修改多个项目,
“相关推荐”对你有帮助么?
非常没帮助
没帮助
一般
有帮助
非常有帮助
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
关于我们
招贤纳士
商务合作
寻求报道
400-660-0108
kefu@csdn.net
在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2023北京创新乐知网络技术有限公司
iamaddy
码龄8年
暂无认证
3
原创
42万+
周排名
115万+
总排名
8683
访问
等级
122
积分
2
粉丝
3
获赞
0
评论
1
收藏
私信
关注
热门文章
聊聊前端自动化 3903
扒一扒前端构建工具FIS的内幕 3474
web前端性能优化–缓存 1306
分类专栏
javascript
3篇
技术
3篇
您愿意向朋友推荐“博客详情页”吗?
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
扒一扒前端构建工具FIS的内幕
web前端性能优化–缓存
2015年1篇2014年2篇
举报
————————————————
版权声明:本文为CSDN博主「iamaddy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/iamaddy/article/details/42364137