威尼斯手机娱乐官网:前端优化带来的思考
分类:计算机知识

前端优化带来的想想,浅谈前端工程化

2015/10/26 · 前端职场 · 2 评论 · 工程化

初稿出处: 叶小钗(@欲苍穹)   

前端优化带来的观念,浅谈前端工程化,浅谈前端

这段时光对项目做了三回完整的优化,全站有了百分之三十左右的升官(本来载入速度已经1.2S左右了,优化度异常的低),算一算已经做了四轮的全站品质优化了,回看五回的优化手腕,基本上多少个字就能够说领悟:

传输层面:减少请求数,降低请求量
执行层面:减少重绘&回流

传输层面的根本都是优化的大旨点,而这几个范围的优化要对浏览器有三个着力的认知,例如:

① 网页自上而下的分析渲染,边剖判边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会招致回流

② 浏览器在document下载停止会检验静态能源,新开线程下载(有并发上限),在带宽限制的尺度下,冬日并发会导致主财富速度下滑,进而影响首屏渲染

③ 浏览器缓存可用时会使用缓存财富,这一年能够幸免央求体的传输,对质量有高大增加

权衡品质的机要目标为首屏载入速度(指页面能够望见,不自然可互相),影响首屏的最大因素为呼吁,所以恳请是页面真正的杀人犯,一般的话大家会做那么些优化:

再度优化的思辨

这段时日对项目做了三次完整的优化,全站有了四成左右的进级(本来载入速度已经1.2S左右了,优化度相当的低),算一算已经做了四轮的全站品质优化了,回想一回的优化花招,基本上多少个字就会说精通:

传输层面:裁减央求数,裁减央浼量 实行层面:减弱重绘&回流

1
2
传输层面:减少请求数,降低请求量
执行层面:减少重绘&回流

传输层面包车型地铁常有都以优化的宗旨点,而以此范围的优化要对浏览器有贰个主干的认知,举个例子:

① 网页自上而下的深入分析渲染,边剖析边渲染,页面内CSS文件会堵塞渲染,异步CSS文件会促成回流

② 浏览器在document下载甘休会检查评定静态财富,新开线程下载(有并发上限),在带宽限制的规范下,冬辰并发会导致主财富速度下降,进而影响首屏渲染

③ 浏览器缓存可用时会使用缓存财富,这年可以幸免要求体的传导,对品质有高大巩固

权衡品质的第一目标为首屏载入速度(指页面可以瞥见,不肯定可相互),影响首屏的最概况素为呼吁,所以恳请是页面真正的刺客,一般的话大家会做那几个优化:

缩减央求数

① 合併样式、脚本文件

② 合併背景图片

③ CSS3图标、Icon Font

减去央浼数

① 合併样式、脚本文件

② 合并背景图片

③ CSS3图标、Icon Font

下跌央求量

① 开启GZip

② 优化静态能源,jQuery->Zepto、阉割IScroll、去除冗余代码

③ 图片无损压缩

④ 图片延迟加载

⑤ 减少Cookie携带

广大时候,大家也会使用类似“时间换空间、空间换时间”的做法,举个例子:

① 缓存为王,争论异较迟缓的财富&接口做缓存(浏览器缓存、localsorage、application cache这一个坑多)

② 按需加载,先加载首要财富,其剩余资金源延迟加载,对非首屏能源滚动加载

③ fake页才具,将页面最早供给显示Html&Css内联,在页面所需能源加载结束前至少可看,理想状态是index.html下载甘休即突显(2G 5S内)

④ CDN

......

从工程的角度来看,上述优化点过半是重新的,一般在发表时候就一直运用项目营造筑工程具做掉了,还应该有一对只是轻松的服务器配置,开拓时不供给关爱。

能够看看,我们所做的优化都以在调整和收缩央求数,减弱央浼量,减小传输时的耗费时间,或然经过一个铺排,优先加载首屏渲染所需财富,而后再加载交互所需财富(比方点击时候再加载UI组件),Hybrid 应用软件这上头应当尽量多的将集体静态财富位居native中,譬喻第三方库,框架,UI以至城市列表这种常用业务数据。

降落央求量

① 开启GZip

② 优化静态能源,jQuery->Zepto、阉割IScroll、去除冗余代码

③ 图片无损压缩

④ 图片延迟加载

⑤ 减少Cookie携带

过多时候,大家也会利用类似“时间换空间、空间换时间”的做法,比方:

① 缓存为王,对革新较缓慢的能源&接口做缓存(浏览器缓存、localsorage、application cache那些坑多)

② 按需加载,先加载重要能源,别的资源延迟加载,对非首屏财富滚动加载

③ fake页本事,将页面最先需求出示Html&Css内联,在页面所需资源加载停止前至少可看,理想状态是index.html下载甘休即体现(2G 5S内)

④ CDN

……

从工程的角度来看,上述优化点过半是重新的,一般在揭发时候就一贯动用项目营造筑工程具做掉了,还恐怕有一点只是轻易的服务器配置,开采时无需关切。

能够见见,大家所做的优化皆以在减弱央求数,减少诉求量,减小传输时的耗费时间,大概经过二个国策,优先加载首屏渲染所需资源,而后再加载交互所需能源(举例点击时候再加载UI组件),Hybrid 应用软件这方面应该尽量多的将集体静态财富位居native中,举个例子第三方库,框架,UI以致城市列表这种常用业务数据。

拦路虎

有一对网址初期相当的慢,可是随着量的堆集,BUG更加多,速度也越加慢,一些前端会利用上述优化花招做优化,但是收效甚微,多个相比较标准的例证就是代码冗余:

① 在此以前的CSS全体放在了贰个文本中,新一轮的UI样式优化,新老CSS难以拆分,CSS容量会追加,假如有事情公司采纳了国有样式,情形更不容乐观;

② UI组件更新,可是即使有职业集团脱离接口操作了组件DOM,将招致新组件DOM更新受限,最差的情形下,客户会加载两个零部件的代码;

③ 胡乱使用第三方库、组件,导致页面加载大量无用代码;

......

如上难题会区别档案的次序的充实财富下载体量,假设任天由命会发出一名目好些个工程难点:

① 页面关系目迷五色,供给迭代轻巧出BUG;

② 框架每回进级都会产生额外的央浼量,常加载一些作业无需的代码;

③ 第三方库泛滥,且难以维护,有BUG也改不了;

④ 业务代码加载大量异步模块财富,页面供给数增多;

......

为求飞快据有商铺,业务成本时间数次火急,使用框架级的HTML&CSS、绕过CSS 7-Up使用背景图片、引进第三方工具库可能UI,会时有的时候发出。当遭受质量瓶颈时,若是不从根源化解难点,用古板的优化手腕做页面等级的优化,会并发飞跃页面又被玩坏的动静,两遍优化结束后小编也在动脑筋三个标题:

前端每次性能优化的手段皆大同小异;代码的可维护性也基本是在细分职责;
既然每次优化的目的是相同的,每次实现的过程是相似的,而每次重新开发项目又基本是要重蹈覆辙的,那么工程化、自动化可能是这一切问题的最终答案

工程难点在类型积存到个别后也许会产生,一般的话会有多少个情景预示着工程难题应时而生了:

① 代码编写&调节和测量检验困难

② 业务代码不好维护

③ 网址品质布满不佳

④ 质量难题重新出现,何况有不可修复之势

像上边所陈诉境况,正是三个超人的工程难题;定位难题、发掘标题、消除难题是大家处理难点的花招;而哪些防范同一品种的主题素材再一次产生,就是工程化须要做的事情,轻易说来,优化是化解难题,工程化是防止难题,今天我们就站在工程化的角度来解决一部分前端优化难点,幸免其过来。

文中是自身个人的一些开采经历,希望对各位有用,也期待各位多么援救研讨,提出文中不足以及提议您的一对建议

拦路虎

有部分网址早期一点也十分的快,不过随着量的积聚,BUG越来越多,速度也更加慢,一些前端会动用上述优化手腕做优化,可是收效甚微,四个相比较标准的例证正是代码冗余:

① 在此以前的CSS全体身处了一个文本中,新一轮的UI样式优化,新老CSS难以拆分,CSS体积会增添,若是有工作团队接纳了集体样式,情形更不容乐观;

② UI组件更新,不过假如有业务团队脱离接口操作了组件DOM,将形成新组件DOM更新受限,最差的状态下,客商会加载三个零件的代码;

③ 胡乱使用第三方库、组件,导致页面加载多量无用代码;

……

以上难题会区别程度的加多能源下载体积,假诺大势所趋会生出一文山会中国人民解放军海军事工业程大学程难点:

① 页面关系目不暇接,需要迭代轻松出BUG;

② 框架每回升级都会导致额外的央浼量,常加载一些作业不需求的代码;

③ 第三方库泛滥,且难以保险,有BUG也改不了;

④ 业务代码加载多量异步模块能源,页面央浼数加多;

……

为求快速占有商场,业务支出时间往往迫切,使用框架级的HTML&CSS、绕过CSS Pepsi-Cola使用背景图片、引入第三方工具库或许UI,会有的时候发生。当蒙受品质瓶颈时,假使不一向自化解难题,用古板的优化手腕做页面等第的优化,会油可是生高速页面又被玩坏的图景,三回优化甘休后本人也在思考一个主题材料:

前端每一回品质优化的招数皆完全同样;代码的可维护性也基本是在分割任务; 既然每一次优化的目标是一致的,每一次完成的进程是相似的,而每一遍重复开垦品种又着力是要反复的,那么工程化、自动化或然是那整个难点的最后答案

1
2
前端每次性能优化的手段皆大同小异;代码的可维护性也基本是在细分职责;
既然每次优化的目的是相同的,每次实现的过程是相似的,而每次重新开发项目又基本是要重蹈覆辙的,那么工程化、自动化可能是这一切问题的最终答案

工程难点在项目积存到零星后恐怕会生出,一般的话会有多少个场景预示着工程难题应际而生了:

① 代码编写&调节和测验困难

② 业务代码不好维护

③ 网址品质分布倒霉

④ 品质问题再一次出现,而且有不行修复之势

像上边所陈诉景况,正是三个名列三甲的工程难点;定位难点、开掘标题、化解难题是大家管理难点的招数;而什么防止同样品种的标题再次产生,便是工程化要求做的事情,轻巧说来,优化是化解难点,工程化是防止难点,今天我们就站在工程化的角度来缓慢解决一些前端优化难点,幸免其卷土而来。

文中是本身个人的一些支出经历,希望对各位有用,也意在各位万般扶助钻探,建议文中不足以及建议您的一对建议

扑灭冗余

咱俩那边做的率先个业务便是革除优化路上第4个障碍:代码冗余(做代码精简),单从一个页面包车型地铁加载来讲,他供给以下能源:

① 框架MVC骨架模块&框架等级CSS

② UI组件(header组件、日历、弹出层、消息框......)

③ 业务HTML骨架

④ 业务CSS

⑤ 业务Javascript代码

⑥ 服务接口服务

因为产品&视觉会平时折腾全站样式加之UI的称心如意,UI最轻松生出冗余的模块。

扑灭冗余

我们那边做的率先个业务正是扫除优化路上第三个障碍:代码冗余(做代码精简),单从三个页面包车型地铁加载来讲,他供给以下财富:

① 框架MVC骨架模块&框架等第CSS

② UI组件(header组件、日历、弹出层、消息框……)

③ 业务HTML骨架

④ 业务CSS

⑤ 业务Javascript代码

⑥ 服务接口服务

因为产品&视觉会日常折腾全站样式加之UI的八面后珑,UI最轻易爆发冗余的模块。

UI组件

UI组件本人包涵总体的HTML&CSS&Javascript,一个良莠不齐的零件下载量能够直达10K以上,就UI部分来讲轻巧产生五个工程化难题:

① 进级爆发代码冗余

② 对外接口变化导致业务升级须求分外支出

UI组件

UI组件本身包括完全的HTML&CSS&Javascript,一个复杂的零件下载量可以达到10K以上,就UI部分来讲轻巧产生七个工程化难点:

① 晋级发生代码冗余

② 对外接口变化导致工作进级必要十分支出

UI升级

最完美的晋升是保险对外的接口不改变以致保持DOM结构不变,但多数情状的UI晋级其实是UI重做,最坏的动静是不做老接口包容,那年工作同事便要求修改代码。为了防止万一事情抱怨,UI制小编往往会保留四个零部件(UI+UI1),借使原先这四个UI是核心依赖组件(举例是UIHeader组件),便会向来打包至基本框架包中,那时便冒出了新老组件共存的局面,这种情形是必得防止的,UI进级须要服从八个尺码:

① 宗旨注重组件必需保证单纯,一样效果的基本器件只可以有一个

② 组件进级必得做接口包容,新的性状可以做加法,绝不允许对接口做减法

UI升级

最优异的晋级换代是维持对外的接口不改变以至保持DOM结构不改变,但比较多处境的UI升级其实是UI重做,最坏的场地是不做老接口包容,今年工作同事便必要修改代码。为了防守事情抱怨,UI制小编往往会保留八个零件(UI+UI1),假设原先那些UI是着力重视组件(比方是UIHeader组件),便会直接打包至中央框架包中,那时便冒出了新老组件共存的规模,这种情景是必需幸免的,UI进级须要遵从七个原则:

① 大旨依赖组件必须保险单纯,同样功用的基本器件只好有叁个

② 组件晋级必得做接口包容,新的表征能够做加法,绝不允许对接口做减法

UI组成

品种之初,分层较好的团队会有多个公家的CSS文件(main.css),一个作业CSS文件,main.css包罗公共的CSS,並且会蕴藏全体的UI的体制:

威尼斯手机娱乐官网 1

4个月后事情频道增,UI组件必要一多便容易膨胀,缺欠立固然暴表露来了,最先main.css恐怕独有10K,可是不出5个月就能够膨胀至100K,而各种事情频道一最早便供给加载这100K的体裁文件页面,可是中间大多数的UI样式是首屏加载用不到的。

进而比较好的做法是,main.css只含有最大旨的样式,理想图景是什么样事情样式效率皆不要提供,各样UI组件的体裁打包至UI中按需加载:

威尼斯手机娱乐官网 2

如此UI拆分后,main.css总是处在最基础的体制部分,而UI使用时按需加载,就算出现五个一样组件也不会导致多下载能源。

UI组成

品类之初,分层较好的组织会有三个共用的CSS文件(main.css),一个事务CSS文件,main.css满含公共的CSS,而且会含有全数的UI的体制:

威尼斯手机娱乐官网 3

7个月后职业频道增,UI组件必要一多便轻松膨胀,破绽马上便暴流露来了,最先main.css大概唯有10K,不过不出4个月就能够暴涨至100K,而种种事情频道一初始便须要加载那100K的体裁文件页面,可是当中多数的UI样式是首屏加载用不到的。

故而相比较好的做法是,main.css只含有最中央的样式,理想状态是何许业务样式成效皆不要提供,各类UI组件的体制打包至UI中按需加载:

威尼斯手机娱乐官网 4

如此UI拆分后,main.css总是处于最基础的样式部分,而UI使用时按需加载,就算现身多少个一律组件也不会导致多下载能源。

拆分页面

一个PC业务页面,其模块是很复杂的,这年能够将之分为多少个模块:

威尼斯手机娱乐官网 5

一经拆分后,页面就是由业务组件组成,只供给关爱各类业务组件的支付,然后在主要调节制器中创设业务组件,那样主要调控制器对页面包车型大巴决定力度会追加。

职业组件一般重用性比较低,会发生模块间的工作耦合,还可能会对职业数据产生注重性,不过主体照旧是HTML&CSS&Javascript,那有的代码也是常事导致冗余的,借使能按模块拆分,能够很好的支配这一主题素材发生:

威尼斯手机娱乐官网 6

安份守己上述的做法今后的加载准则是:

① 公共样式文件

② 框架文件,业务入口文件

③ 入口文件,异步加载业务模块,模块内再异步加载另外能源

诸有此类下去职业支出时便不供给援用样式文件,能够最大限度的晋升首屏载入速度;供给关注的一些是,当异步拉取模块时,内部的CSS加载供给八个条条框框制止对别的模块的震慑,因为模块都蕴涵样式属性,页面回流、页面闪烁难点亟需关心。

二个事实上的例子是,这里点击出发后的都会列表正是一个安然无恙的政治工作组件,城市政委员会大选择的财富是在点击后才会发出央求,而事情组件内部又会细分小模块,再分叉的财富支配由实际业务情状调整,过于细分也会促成掌握和代码编写难度上升:

威尼斯手机娱乐官网 7

威尼斯手机娱乐官网 8

demo演示地址,代码地址

假设曾几何时必要方需求用新的都市政委员会公投择组件,便能够一向重新开垦,让事情之间利用新型的城市列表就能够,因为是单独的财富,所以老的也是足以动用的。

要是能造成UI等第的拆分与页面业务组件的拆分,便能很好的搪塞样式进级的需求,那方面冗余只要能避过,另外冗余问题便小意思了,有七个正规最棒服从:

1 避免使用全局的业务类样式,就算他建议你使用
2 避免不通过接口直接操作DOM

冗余是首屏载入速度最大的阻力,是野史演进的包袱,只要能清除冗余,便能在后面包车型客车路走的更顺畅,这种组件化编制程序的方法也能让网址一连的护卫越发简便易行。

拆分页面

三个PC业务页面,其模块是很复杂的,那一年可以将之分为四个模块:

威尼斯手机娱乐官网 9

若果拆分后,页面正是由业务组件组成,只要求关爱种种业务组件的付出,然后在主调控器中建构业务组件,那样主要调整制器对页面包车型客车主宰力度会增加。

业务组件一般重用性十分低,会发出模块间的业务耦合,还恐怕会对业务数据产生倚重性,可是主体照旧是HTML&CSS&Javascript,那部分代码也是日常导致冗余的,假设能按模块拆分,能够很好的决定这一难点发出:

威尼斯手机娱乐官网 10

依照上述的做法今后的加载法规是:

① 公共样式文件

② 框架文件,业务入口文件

③ 入口文件,异步加载业务模块,模块内再异步加载其它财富

那般下来工作支付时便无需引用样式文件,能够最大限度的晋级首屏载入速度;须求关爱的少数是,当异步拉取模块时,内部的CSS加载必要贰个准则幸免对其他模块的熏陶,因为模块都蕴涵样式属性,页面回流、页面闪烁难点供给关心。

三个事实上的例证是,这里点击出发后的都市列表就是叁个完全的工作组件,城市政委员会公投择的财富是在点击后才会发出乞请,而职业组件内部又会细分小模块,再分叉的能源支配由实际专门的工作情形决定,过于细分也会形成精晓和代码编写难度回升:

威尼斯手机娱乐官网 11威尼斯手机娱乐官网 12

demo演示地址,代码地址

如若哪一天必要方要求用新的城市政委员会公投择组件,便足以向来重新开垦,让事情之间利用新型的都市列表就可以,因为是单身的财富,所以老的也是足以运用的。

比如能成功UI品级的拆分与页面业务组件的拆分,便能很好的应景样式晋级的须求,那上头冗余只要能避过,别的冗余难题便不荒谬了,有多个正经最佳服从:

JavaScript

1 制止接纳全局的业务类样式,尽管他提出你利用 2 避免不经过接口直接操作DOM

1
2
1 避免使用全局的业务类样式,就算他建议你使用
2 避免不通过接口直接操作DOM

冗余是首屏载入速度最大的拦Land Rover,是野史演进的担负,只要能祛除冗余,便能在后边的路走的更顺畅,这种组件化编制程序的章程也能让网址连续的爱慕特别简约。

能源加载

缓慢解决冗余便抛开了历史的包袱,是前者优化的首先步也是相比较难的一步,但模块拆分也将全站分为了大多小的模块,载入的能源分流会增多哀告数;假诺一切联结,会招致首屏加载无需的财富,也会促成下二个页面不可能选择缓存,怎么做出客观的输入能源加载法则,怎么着合理的拿手缓存,是前者优化的第二步。

经过一回质量优化相比,得出了一个较优的首屏财富加载方案:

① 焦点框架层:mvc骨架、异步模块加载器(require&seajs)、工具库(zepto、underscore、延迟加载)、数据供给模块、宗旨依赖UI(header组件音讯类组件)

② 业务公共模块:入口文件(require配置,起始化职业、业务公共模块)

③ 独立的page.js财富(包括template、css),会按需加载独立UI财富

④ 全局css资源

威尼斯手机娱乐官网 13

那边如若追求极致,libs.js、main.css与main.js能够接纳合併,划分停止后便足以操纵静态财富缓存攻略了。

财富加载

赶尽杀绝冗余便抛开了历史的担子,是前面一个优化的第一步也是比较难的一步,但模块拆分也将全站分为了广大小的模块,载入的能源分散会增添央求数;纵然全数合併,会促成首屏加载不须求的财富,也会产生下三个页面不能够动用缓存,如何是好出合理的入口财富加载法则,怎样客观的拿手缓存,是后边三个优化的第二步。

透过三遍质量优化相比,得出了贰个较优的首屏能源加载方案:

① 核心框架层:mvc骨架、异步模块加载器(require&seajs)、工具库(zepto、underscore、延迟加载)、数据央求模块、主题正视UI(header组件音信类组件)

② 业务公共模块:入口文件(require配置,最初化专门的学问、业务公共模块)

③ 独立的page.js能源(蕴含template、css),会按需加载独立UI财富

④ 全局css资源

威尼斯手机娱乐官网 14

那边假若追求极致,libs.js、main.css与main.js可以挑选合併,划分结束后便能够调控静态能源缓存计策了。

财富缓存

能源缓存是为三次呼吁加快,相比常用的缓存本领有:

① 浏览器缓存

② localstorage缓存

③ application缓存

application缓存更新一块不好把握轻便出难题,所以越多的是借助浏览器以及localstorage,首先说下浏览器级其余缓存。

财富缓存

财富缓存是为一次呼吁加速,相比较常用的缓存技艺有:

① 浏览器缓存

② localstorage缓存

③ application缓存

application缓存更新一块不佳把握轻松出标题,所以更加的多的是依靠浏览器以及localstorage,首先说下浏览器级其余缓存。

日子戳更新

就算服务器配置,浏览器本身便具有缓存机制,若是要使用浏览器机制作缓存,势必关注叁个哪一天更新能源难点,大家一般是这么做的:

<script type="text/javascript" src="libs.js?t=20151025"></script>

如此做供给必需先宣布js文件,才具发布html文件,不然读不到新型静态文件的。贰个相比较为难的气象是libs.js是框架共青团和少先队照旧第三方市肆保卫安全的,和事务公司的index.html是多个公司,互相的发布是从未有过涉及的,所以这两头的宣布顺序是无法保障的,于是转向开首运用了MD5的秘籍。

时刻戳更新

一经服务器配置,浏览器自个儿便享有缓存机制,借使要使用浏览器机制作缓存,势必关切一个什么时候更新财富难点,大家一般是那样做的:

<script type="text/javascript" src="libs.js?t=20151025"></script>

1
<script type="text/javascript" src="libs.js?t=20151025"></script>

历次框架更新便不做文件覆盖,直接生成一个独一的公文名做增量发表,今年借使框架首发表,待作业发表时便一度存在了最新的代码;当工作先宣布框架未有新的时,便连续套用老的公文,一切都很美丽好,即便专门的学问费用有时会抱怨每回都要向框架拿MD5映射,直到框架三回BUG产生。

MD5时代

为了缓慢解决以上难题大家开始选用md5码的法子为静态能源命名:

<script type="text/javascript" src="libs_md5_1234.js"></script>

老是框架更新便不做文件覆盖,直接生成三个独一的文本名做增量揭橥,今年若是框架首发布,待作业发表时便已经存在了新式的代码;当事情先发布框架未有新的时,便接二连三沿用老的文本,一切都极美丽好,就算事情支付不常会抱怨每一遍都要向框架拿MD5映射,直到框架叁次BUG产生。

seed.js时代

遽然一天框架开采二个全局性BUG,并且及时做出了修复,业务团队也随即发表上线,但这种业务出现第3回、第三回框架那边便压力大了,那一年框架层面希望事情只要求援引三个不带缓存的seed.js,seed.js要怎么加载是她协和的业务:

<script type="text/javascript" src="seed.js"></script>

1
<script type="text/javascript" src="seed.js"></script>

//seed.js需求按需加载的资源 <script src="libs_md5.js"></script> <script src="main_md5.js"></script>

1
2
3
//seed.js需要按需加载的资源
<script src="libs_md5.js"></script>
<script src="main_md5.js"></script>

当然,由于js加载是种种是不可控的,大家要求为seed.js完毕二个最简便易行的各样加载模块,映射什么的由构建筑工程具完毕,每一回做覆盖宣布就能够,那样做的缺点是外加扩充三个seed.js的文书,况且要承担模块加载代码的下载量。

seed.js时代

猛然一天框架发现三个全局性BUG,并且及时做出了修复,业务公司也立即宣布上线,但这种事情现身第2回、第一次框架那边便压力大了,这一年框架层面希望职业只要求引用贰个不带缓存的seed.js,seed.js要怎么加载是她协和的思想政治工作:

<script type="text/javascript" src="seed.js"></script>

//seed.js需要按需加载的资源
<script src="libs_md5.js"></script>
<script src="main_md5.js"></script>

理所必然,由于js加载是逐个是不可控的,大家须求为seed.js达成三个最简便的一索爱载模块,映射什么的由创设筑工程具完毕,每一次做覆盖发表就能够,那样做的缺点是额外扩充一个seed.js的文件,何况要肩负模块加载代码的下载量。

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:威尼斯手机娱乐官网:前端优化带来的思考

上一篇:移动端自适应方案,多方案解析 下一篇:没有了
猜你喜欢
热门排行
精彩图文