百姓大小事,一呼百应!

百姓网 | 百姓知道

软件开发

拉勾网的前端架构是怎样的?

相关问题: 百姓网的前端架构是怎样的?百姓网的前端架构是怎样的? - 前端开发美团的前端架构是怎样的?美团的前端架构是怎样的? - 前端开发支付宝的前端架构是怎样的?支付宝的前端架构是怎样的? - 前端开发大搜车的前端架构是怎样的? 大搜车的前端架构是怎样的? - 前端开发

2 个回答

  • 华安 | 2017-09-03 10:28:34

    有部分可以优化的地方:
    首页图片:
    1、微信的二维码,现有的格式是JPG的,图片大小 为35KB,如改成GIF,图片大小为15KB左右,或者把JPG压缩下品质,在同等情况下,大小大概在20KB左右。首页LOGO,也可以做下图片压缩,在品质保证的情况下。

    再说下JS这块
    1、很多JS可以合并为一个JS,或者说放一个公共的,可好像并没有看到有公共的
    如:
    <script> var a = $('#home_banner .banner_bg li a'); var http = 'http://' for(var i=0;i<a.length;i++){ var str = $(a[i]).attr('href'); if( str.indexOf( http ) < 0 ){ $(a[i]).attr('target','_self'); } } </script> <script type="text/javascript"> $(function(){ // $('#aaa').click(function(){ // PASSPORT.popup(); // }) $(".mr_del").on("click",function(){ $(".mr_remind").hide() ; $.ajax({ type:'POST', data: {}, url:ctx+'/resume/clearShowNoticeInSeesion.json' }).done(function(result) { }); }) }) </script> <script type="text/javascript"> var pypv; var IsLogin = "com.lagou.entity.User@5127f68c"; IsLogin == '' ? pypv = 2 : pypv = 1; var _py = _py || []; _py.push(['a', 'ga..n3f5DPSWZXFMcbQa2-GxjX']); _py.push(['domain', 'stats.ipinyou.com']); _py.push(['pv', pypv]); _py.push(['e', '']); -function(d) { var s = d.createElement('script'), e = d.body.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e), f = 'https:' == location.protocol; s.src = (f ? 'https' : 'http') + '://' + ('www.lagou.com') + '/js/adv-sim.js?v=1.5.6_2015090115'; }(document); </script> <!--浏览记录--> <script type="text/javascript" src="http://www.lagou.com/js/history2.js?v=1.5.6_2015090115"></script> <!-- 统计代码配置 --> <script type="text/javascript"> $(function(){ var tag = $('.init_joblist'); var tag_attr = 'data-jobid'; var t = $.trim($('.hotabbing').children('li:first').text()); if( t == '热门职位' ){ t = 'hot'; }else if( t == '推荐职位'){ t = 'recommend'; } initHotJob(t,tag,tag_attr); }); </script> <noscript><img src="//stats.ipinyou.com/adv.gif?a=ga..n3f5DPSWZXFMcbQa2-GxjX&e=" style="display:none;" /></noscript> <script type="text/javascript"> var jobids = []; var dszicon_joblists = $(".position_list_item"); for ( var i = 0; i < dszicon_joblists.length; i ++ ) { jobids.push(jQuery(dszicon_joblists[i]).data("jobid")); } var jobicons_type = 1; </script> <script type="text/javascript"> //页面滑动到底部时,底部的登录banner向上移,露出“拉勾微博 拉勾微信 帮助中心 联系我们:400-605-9900” if(document.getElementById('loginToolBar')){ $(window).scroll(function(){   var scrollTop = $(this).scrollTop();   var scrollHeight = $(document).height();   var windowHeight = $(this).height();   if(scrollTop + windowHeight >= scrollHeight-36){ var bottom_range = 36 - (scrollHeight - scrollTop - windowHeight); $("#loginToolBar").css('bottom', bottom_range);   }else{ $("#loginToolBar").css('bottom', 0);   } }); } </script> <script type="text/javascript"> var arr=jobids; jobids = jobids.join(","); var $icon1 = $("<i class='fl pos_icon_small'></i>"); var $icon2 = $("<i class='fl pos_icon_big'></i>"); function callback(data) { for(var i=0,l=arr.length;i<l;i++){ var jobid=arr[i]; if(!data[jobid]) break; switch(jobicons_type){ case 1: var item = $(".position_list li[data-jobid=" + jobid + "]").find(".pli_top .position_name"); item.append($icon1.clone()); break; case 2: var item = $(".recommend_list .rec_pos li[data-jobid=" + jobid + "]").find(".rec_pos_l .row:eq(0)"); item.append($icon1.addClass("rec_pos_icon").clone()); break; case 3: var item = $(".my_collections li[data-id=" + jobid + "]").find(".co_item h2 a"); item.append($icon1.clone().addClass("rec_pos_icon")); break; case 4: $("#container .content_l").append($icon2.clone()); break; } } } jQuery.ajax({ url:"http://c.lagou.com/icon/showIcon.json", dataType: 'jsonp', jsonp: 'callback', data:{ type:"POSITION", size:'big', ids : jobids } }).done(function (data) { callback && callback(data); }); </script>
    这些,可以并到一个JS里面去,这样可以减少加载请求,不知道这是不是编译之后的。 我只是随便放的一段代码
    还有,JS不是应该都放底部的么,为啥,都放顶部啊?

    CSS可以做一些优化,如
    <a href="http://www.wangxiao.cn" target="_blank">中大网校</a> <span>|</span>
    1、可以把后面的span标签去掉,写2套CSS方案,IE6-8用一套,其它的浏览器和IE8以上,用另外一套,虽然有点麻烦,但它们支持伪类选择器,可以减少很多代码。
    2、很多小图标可以用图标字体代替,如“帐号设置”里面的,QQ、微博、微信等图标,以及其它的,剪头图标等等,很多会支持IE6/7的字体图标。

    虽然这些优化,都是非常小的,而且在PC端体现的并不是很明显,其实我也不知道这些有没有优化的必要性。最近做移动端比较多。 @豪情 请指点下啊,豪大大

    不知道说的对不对,欢迎大家来讨论。

    本问答由华安提供

  • 华安 | 2017-09-03 10:15:07

    先自我介绍下,拉勾的前端程序员,也就是某匿名的那位同学所说的几个渣的程序猿之一。话说真没想到竟然会有人提问拉勾网的前端架构是怎么样的?对支付宝美团这样的大厂小厂来说,我们也就是个作坊吧,笑。
    言归正传,简单的介绍下拉勾前端的演变过程吧

    第一个阶段,拉勾网2013年7月上线后大概一年的时间内,那时的业务逻辑很简单,页面也很少,根本谈不上什么架构,基本jquery加上jquery的各种插件就可以搞定,开发的流程也是后端开发完了前端再来的原始方式。

    第二个阶段,到今年的上半年,拉勾网在这期间快速成长着,拉勾网的业务逻辑也变的越来越复杂,功能越来越多,前端的开发上也暴露出了很多问题,就像上面的那位同学说的,页面有许多能够优化的地方,而开发模式前端的后端开发的原始形式也越来越低效,跟不上整个拉勾产品的需求。
    那这个时候,拉勾的前端同学除了埋头于业务线还做了什么呢?我们做了一个可以脱离后端开发的前端集成环境:Lagou-Frontend/idt · GitHub,可以提供调试的web服务,可以写mock数据来解析velocity模版,可以打包压缩,使前端能够完全独立于后端并行开发,我们的开发流程变为前后端定接口---独立开发---连调上线,而我们的开发方式也进化为用less作为css预处理器,用amd来进行模块化开发,大量的使用前端模版,开发如弹出框,分页,轮播等等组件,今年上半年拉勾的主要产品:搜索结果页改版,公司主页改版,公司列表页改版都使用了这样的开发模式。

    第三个阶段,从今天下半年开始,拉勾准备将之前旧模式下开发的页面使用新的开发方式进行拆分,而我们的前端集成解决方案也准备替换为基于fis3的Lagou-Frontend/normae · GitHub,更好的本地调试功能:实时刷新,模拟url转发,更好的页面性能优化:打包,压缩,精灵图合成,更好的发布方式,md5戳非覆盖式的部署,远程部署,而我们所有的静态资源也将发布到static.lagou.com上,我们也正在制定拉勾的UI规范,搭建组件库,让拉勾前端的整个工作流程更加的规范高效。
    当然了,我们要做的远不止于此,拉勾的C端B端拆分后,我们会尝试MV*框架,最近也一直在进行技术选型,是最流行的angular,还是朴实实用的mvvm框架,抑或是大胆的尝试下React?对了,我们还有大前端的野心,用node做中间层,我们自己来搞定view层,再也不用纠结什么前后端模版了。当然这个目标还稍显遥远,目前node在拉勾前端还仅限于一些构建工具的搭建。

    因为各种各样的原因吧,拉勾目前接近10人的前端团队还是非常年轻的,我们知道拉勾网的页面有许多待优化的问题,也懂得我们也许应该尝试更好的架构,但是可惜拉勾并不是一个技术驱动的公司,应该说是产品驱动吧,在以前,我们可能真的没有时间进行大量的基础性技术建设,用昨天开会时eric的话说,就是我们需要一边开车一边修车,笑。但是随着我们team的壮大,开发效率的提高,我们接下来要真的去做很多事了。而且我相信在拉勾网整个前端优化的过程中,我们的团队也将获得很大的成长。

    至于说我们渣不渣什么的,在我看来真的不重要,现在做得不好就是做的不好,但是我们依然在努力着,我们相信就算是作坊,只要用心有一天也能做出漂漂亮亮的东西,话又说回来说不定哪天就不是作坊了呢?

    本问答由华安提供

* 本站部分内容来源自网络,仅作分享之用,侵删。