标签: 前端

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标。这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化。虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,还是需要前后端的通力配合。

历史背景

老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正常运行,至于性能方面,那是很遥远的事。苦逼的是开发人员,每次有首页的修改都是担惊受怕的,怕改了这个那个又出问题,历史原因造成的问题越来越多。

最先看不下去的应该是前端人员,因为首页在不断的修修补补中,性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去,没法采取实质性的措施来改善,因为这牵涉到各部门的利益,也如上面说的,优化不仅仅在于前端,于是前端人员也只能向上面反映问题。到了今年,终于领导也看不下去了,某领导在海外访问我司的8185173首页,对比起来前者首页很快(插播一句,818首页前端开发人员也正是我^_^),后者首页很慢,差别较大。于是在领导重视的推动下,5173首页的前端性能优化项目才经过批准,开发人员终于可以放手大胆的折腾了。

更多

页面前端的水有多深?

但凡从事互联网的人基本都会写几行 html,用过 Word 的人用 Dreamweaver 也能做出规整的页面,所以大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小 case;图片集成,一直都在用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢?网易邮箱前端技术中心也设立好几年了,似乎有着讨论不完的话题,也经常会有一些新的想法让大家为之一振。那么页面开发还有哪些要求,还要做些什么,这里面的水有多深,让我们舀舀看。

在不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的。那时的页面设计风格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是 IE6 的天下,javascript 也只是网页特效的代名词,HTML 页面本身没有引起太多人的关注,似乎只要能用 div 甚至 table 加 css 辅助把图片定好位,把页面内容预留好就 OK 了,并且这种观念存在了很长一段时间。随着页面内容的丰富,设计风格的发展,交互复杂性的增加,AJAX 的应用,浏览器的更新换代,又让大家重新对最基本的页面本身重视起来。然后热议的就是浏览器的兼容性,碰到问题最热衷的就是满网络搜索 hack,顺便再骂骂 IE6、7……当这些都做一遍后,似乎又遇到了瓶颈,又开始寻找出路。我们就从这个阶段开始说起。

更多

前端工程师面试题!!!

[HTML && CSS]
1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
2:行内元素有哪些?块级元素有哪些?CSS的盒模型?
3.CSS引入的方式有哪些? link和@import的区别是?
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
5:前端页面有哪三层构成,分别是什么?作用是什么?
6:css的基本语句构成是?
8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
9.如何居中一个浮动元素?
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
11.你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)
13:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
14:你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

更多