专业网站建设技术服务!
电话图标 咨询电话:0755-8253-8016     24小时服务热线:13828753662

建站知识

将想法与焦点和您一起共享

前端开发资源定位的历史变迁

发表日期:2019-01-04 08:20 文章编辑:深圳网站建设 文章来源:博纳信息 浏览次数:

    资源定位是随着前端的发展同步演进的,从前端工程师的诞生、前后端职责分化,一直到前后端分离,Web项目面对的资源定位问题的具体形态不断变化着,对应的解决方案也不断进化着。
1.原始形态——一切都很简单
    原始形态的时代背景是互联网技术不发达、个人计算机尚未普及的年代,Web站点以静态展示为主,内容主要是文字和图片,没有复杂的交互逻辑。当时的开发分工要么是“前端写demo,后端套模板”,要么就是干脆后端开发人员同时包揽了前端的工作。因为网站的用户量不像今天这么庞大,同时浏览器的并发请求能力不足,所以当时Web项目普遍的部署方式是将JS、CSS、图片等静态资源与服务器端代码部署在相同的路径。比如一个典型的PHP项目的资源分配如下:
    这种模式下的资源定位非常简单,由于静态资源与动态资源部署在同一路径,所以不论是开发还是生产环境,资源互相之间的引用使用相对路径即可。比如index.tpl文件中引用js和css文件如下:
    在资源定位问题上,这种模式下的开发者可以说是最舒服的,无须考虑动静态资源部署以及开发和生产环境的差异性引起的额外工作。但是历史是不断进步的,个人计算机的普及以及互联网技术的发展,随之而来的是用户量的大规模上涨,原有的动静态资源一同部署的模式无法适应密集的请求和并发量,也无法适应对用户体验要求高的Web产品。
2.内容分发网络一—推动进化的车轮
    CDN(Content Delivery Network,内容分发网络)是一种部署策略,包括分布式存储、负载均衡、内容管理等模块。CDN的实现细节并不属于前端的范畴,但是如果Web站点使用了CDN部署策略,那么便会影响到资源定位的处理。
    CDN的一个重要功能是将静态资源缓存到用户近距离的CDN节点上,不但能提高用户对静态资源的访问速度,还能节省服务器的带宽消耗、降低负载。实现此功能的一个重要前提是将静态资源部署到已接入CDN解析服务的专属服务器上,而这类服务器通常与Web主页面处于不同的域名下。这样做的主要目的是为了充分利用浏览器的并发请求能力,提高页面的加载速度。同时,独立域名的静态资源请求不会携带主页面的cookie等数据,这样进一步加快了网络访问。
    对于未实现前后端分离的项目来说,主页面的HTL由服务器端渲染,所以html模板文件必须与主页面服务器端代码一同部署,这样就造成开发环境与生产环境下的HTL文档对JS、CSS等静态资源的引用地址不同。仍然以上文的index.tpl为例,假设开发完成之后将静态文件部署到域名为static.app.com的CDN服务器,主页面的域名为www.app.com,那么在部署服务器端代码之前必须将index.tp1中对静态资源的引用改为CDN服务器的地址:
 
    对于静态资源数量较少的页面来说,修改地址的行为可以交给开发人员手动执行。但是如果页面中存在数量可观的静态资源引用,或者在同时开发多个页面的场景下,手动修改既费时费力又不能保证正确性。所以服务器端开发人员将这项操作交给了代码,比如对模板引擎进行扩展,可以将相对地址转化为CDN服务器的地址:
    经过解析之后被转化为:
    保证上述解析过程正确执行的重要前提是:必须让解析函数或者工具在解析之前知道静态资源在CDN服务器的路径。当然这并不会难倒我们,因为静态资源是由服务器端开发人员负责部署到CDN服务器的,将资源固定放在某个路径,然后把解析函数或者工具的此信息设置为固定值就可以了。
但是接下来又出现了难题:静态资源应用增量更新策略,每次迭代之后会被加入hash指纹,文件名改变了。现在如果要保证正确的解析,除要提供资源的路径给解析函数或者工具,还必须提供加入hash指纹的文件名,如下图所示。
    由于文件名每次都会变化,不能设置为固定值,只能每次执行解析时动态配置。当然这也难不倒我们,因为hash指纹的构建也是由
服务器端开发人员执行的(此时前后端尚未分离)。那么构建完成之后把hash值存储下来,然后将其告知解析函数或者工具不就行了吗?
需求又一次得到了解决,但是新的问题出现了:随着前端逻辑的不断复杂化,前后端开发人员的职责进一步分化,静态资源的开发以及构建工作全部交由前端开发人员执行。在这种分工模式下,如果服务器端开发人员仍旧要使用原有的解析功能,则必须向前端开发索要每个资源构建后的hash指纹。这不仅仅导致了工作流的混乱,同时也新增了额外的消耗——沟通成本。
    原有的资源定位解析方案已经严重拖慢了团队的工作效率。历史发展到这个阶段,下一步的变迁要淘汰的不仅仅是资源定位的解决方案,前后端的职责划分也必须进一步明确。
3.前后端分离一一将责任交给前端
    前后端分离将View层的开发和部署工作全部交给了前端开发。不论是完全前端渲染的SPA,还是支持服务器端渲染的大前端,得益于Node.js的支持以及构建工具的发展,资源定位问题的解决均可由前端工程师熟悉的JavaScript语言驱动。我们再回顾一下由服务器端负责解决资源定位问题所依赖的条件。
    ·硬性条件:静态资源构建及部署之后的完整地址,包括CDN服务器路径和携带hash指纹的文件名。
    ·附加条件:沟通成本。
    资源定位问题交由前端开发负责,首先节省了沟通成本这一附加条件(在真实协作场景下,这恰恰是最高的消耗成本)。其次,由于静态资源的构建和部署工作也是由前端开发人员负责执行的,所以CDN服务器和文件hash指纹信息是透明的。

如没特殊注明,文章均为博纳信息原创,转载请注明来自https://www.sabong.net/new/know/250.html
将文章分享到..
相关新闻
最新新闻
最新网站建设案例
  • 我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围涵盖基础的域名服务、主机服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供最佳的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +我们的优势

  • 更多 +关于博纳信息

    博纳信息一直秉承专业、诚信、服务、进取的价值观,坚持优秀的商业道德,以用户最终价值为导向,向用户提供优质产品和优质服务,从而赢得了用户的信赖。自2011年以来公司业务范围包括深圳福田、罗湖、南山、盐田、龙岗、宝安、坪山新区、龙华新区以及一线城市深圳、广州、北京、上海,全国各地接受异地服务商的公司企业或者机构。博纳信息始终以不懈的努力、更高的目标来要求自己。