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

在 不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候，小车还是比房子贵的，烧饼和粉丝还只是用来吃的，菊花还只是用来泡茶的。那时的页面设计风 格相对单一，对应的页面需求比较简单，并且当时的浏览器也基本是IE6的天下，javascript也只是网页特效的代名词，HTML页面本身没有引起太 多人的关注，似乎只要能用div甚至table加css辅助把图片定好位，把页面内容预留好就OK了，并且这种观念存在了很长一段时间。随着页面内容的丰 富，设计风格的发展，交互复杂性的增加，AJAX的应用，浏览器的更新换代，又让大家重新对最基本的页面本身重视起来。然后热议的就是浏览器的兼容性，碰 到问题最热衷的就是满网络搜索hack，顺便再骂骂IE6、7……当这些都做一遍后，似乎又遇到了瓶颈，又开始寻找出路。我们就从这个阶段开始说起。
实现效果图是最基本的工作
把 视觉稿通过页面代码的方式表现出来包含了两个基本诉求：1.能够真实反映视觉稿；2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和 一定的页面功底，能完成这两个内容就可以初步进入页面前端的从业者行列了，但这就代表着我们可以胜任页面开发的工作了？不，才刚刚开始！
与设计师的沟通和项目的参与
沟 通很重要。先抛出几个问题：我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大？有没有探讨过部分效果可以用CSS3实现从而使得结构更加 简洁清晰？有没有在代码和视觉中寻追求过平衡？页面前端的开发向基本用户，编写的代码也直接作用在浏览器上，我们有义务对页面的稳定性和渲染效率负责。我 们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行，这时更有必要尽量多地获取项目信息，了解我们还要做些什么，这些可以帮助我们充分考 虑重用和框架拓展。
良好的页面结构
页 面结构的编写好比盖房的地基建设，其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后，不 要忙着动手开始，多观察思考。先分析布局，划分框架，然后规划结构，编写代码。特别在大型项目中，合理使用模块化的开发不论从整体进行还是拓展维护都有相 当大的好处。
关于hack
很 多同学在页面开发时上网搜索最多的就是hack了，是否我们完全要依赖hack来实现页面兼容性，答案是否定的。大家经常比喻IE6向我们撒了一个谎，结 果我们要再撒一百个谎来圆这个谎。不否认IE6经常让我们口吐鲜血，但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调 整HTML结构，或使用一些虽然无法解释但相对安全的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发 layout或position:relative就可以帮助解决很多IE6的问题。
优美的代码
现 在很多web项目功能复杂，代码规模也会变得很庞大，如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划，还有要养成良好的代码 开发习惯才会在面临各种情况时游刃有余。翻阅页面代码，看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的css不仅犹如欣赏一个艺术品，更为 下游开发和协同开发降低了不小的沟通成本，我们有什么理由不去这么做呢？举个反面例子：div滥用是现在比较典型的一个问题。数数看自己使用的标签有多少 个呢？不同的语义都该使用对应的标签代码，特别是HTML5提供了更丰富的语义化标签，它们都苦苦地在等待战场上的冲锋号，让我们去解放它们吧！
无障碍页面开发
可 访问性与易用性是非常主观且人性化的东西。普通人看上去上完美呈现的页面在特殊群体中不一定显得那么贴心。当盲人用读屏软件在页面某个区域内陷入循环时， 我们应该感到内疚。只能说目前国内的网站对此的重视程度还远远不够，这就需要我们共同努力，让更多的人感受到我们的热情。
保障效率
作 为项目开发中比较靠前的一环，页面开发可能需要尽早完成为项目争取时间，这就需要我们尽可能地提高效率。“工欲善其事，必先利其器”，除了实战经验和代码 习惯的形成可以帮助我们提高效率外，想要提高对自己开发的进度掌控能力，还有很多辅助工具可以帮助我们进行页面开发。比如使用Less或Sass可以帮助 我们拓展和组织CSS，大大提高CSS的编写效率增加了可维护性。比如可以通过zen coding的自动自动完成和自定义代码块让你可以剑指如飞。甚至还见过通过自定义输入法的代码块关键字来提升开发速度的。多多发掘一定会找到最合适自己 使用的工具。
针对服务器的优化
页 面开发也需要了解服务器的优化，尽量减小服务器负担。比如css sprite就是一个典型减小服务器请求数的例子。在网易邮箱的页面前端开发中大家不停地在做着各种优化，比如一直在寻求文件大小与服务器请求数的平衡； 为了尽可能提高缓存利用率采用了补丁升级；对class名进行了混淆压缩避免命名过长的冗余；应用base64减少请求数量等等措施。这些都是综合权衡的 结果，需要考虑各个方面整体优化。因为当页面访问量达到一定的数量级时，再小的一点优化都会达到可观的效果，再小的问题都可能会形成巨大的灾难。
拥抱HTML5
这 是一个充满机会的时代，HTML5时代的来临伴随着移动互联网的兴起创造了更大的机会，还有太多的东西值得我们去学习去发现。 HTML5提供了丰富的JS API接口，需要我们去研究；CSS3的绚丽吸引了足够多的眼球，需要我们去研究；移动设备上如何开发更加适配的页面，需要我们去研究……
Stay Hungry, Stay Foolish
水 是越舀越多了，却发现原来下面还深不见底，上面的内容越是深入研究就越会发现更多山川需要翻越。保持饥饿状态，用眼睛去努力发现发掘，不断丰富技能才能找 到定位，突破瓶颈，正所谓“唯有高屋建瓴方可水到渠成”。形成本文是因为之前和同行讨论到瓶颈的问题，想给自己，给页面前端的同学一起找找定位，梳理一下 思路。拿苹果CEO在斯坦福演讲的一句话“Stay Hungry, Stay Foolish”和大家共勉。

转载于:https://www.cnblogs.com/zhaolizhe/p/6936556.html

页面前端的水有多深？再议页面开发相关推荐

  1. 前端的“水”很深！指的是……

    01 前端并不简单 近年来,前端的发展速度极快,前端开发不再是曾经众人调侃的"写网页的程序员"了,更不是早期掌握 JavaScript+CSS+HTML ,便可以找到一份相对不错工 ...

  2. “假一赔十”的4k 120Hz电视能买吗？研究完我服了，水是真的深

    萧箫 发自 凹非寺 量子位 | 公众号 QbitAI 朋友,你是否也和我一样,为了<Apex英雄>上线PS5已苦等一年半? 那是否也和我一样,在年初听到<Apex英雄>PS5版 ...

  3. EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  4. 前端面试总结(2)--从输入URL到页面加载完成，都发生了什么

    目录 序言 从输入URL到页面加载完成,都发生了什么 1. 一个极其粗糙且简化的流程 2. 每个步骤都只是摘要 2.1 浏览器中输入URL 2.1.1 URL的概念 2.1.2 浏览器对URL的长度限 ...

  5. 路飞学城项目之首页轮播图定时更新、课程页面前端及课程表分析

    文章目录 1.首页轮播图定时更新(使用celery) 2.课程页面前端 3.课程表分析 3.1.课程表相关模型(实战课为例) 3.2.课程表数据录入 3.3.课程分类接口 3.3.课程分类前端展示(对 ...

  6. 该页面仅以HTML格式保存_轻松实现页面自动刷新功能，提高前端开发效率

    作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...

  7. 前端页面优化：如何更快速将你的页面展示给用户？

    前端页面优化:如何更快速将你的页面展示给用户? 现在许多公司往往注重后端优化,而忽略了前端优化想想如果辛苦优化了服务器,后台,排查了sql,却在最后页面加载展示的时候很慢,也得不偿失其实,前后台优化都 ...

  8. 梦泪的服务器是qq还是微信,微信区水有多深？偶遇演员，梦泪国服曜被打哭，三个字透露心酸！...

    原标题:微信区水有多深?偶遇演员,梦泪国服曜被打哭,三个字透露心酸! 王者荣耀目前有两个区服,微信区和QQ区,相比而言玩家更多的聚集在QQ区,在微信区的玩家就比较少见了.但这并不意味着微信区上分就轻而 ...

  9. 代码式动态录入生成个人简历页面html页面前端源码

    大家好,今天给大家介绍一款,代码式动态录入生成个人简历页面html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 整个页面分为两个部分,左右布局,左边动态输入一个代码编辑器,根据输入的代 ...

最新文章

  1. 使用Google Closure DepsWriter生成JS依赖文件（二）
  2. ADT,Eclipse启动时在Android SDK Content Loader0%无法编译
  3. VLAN之间ACL和VACL的区别
  4. 【作品发布】QQ2008远程自助 1.5.1.1
  5. 谷歌2007年上交大考试最后一题解答
  6. 【工具使用系列】关于 MATLAB 反馈神经网络，你需要知道的事
  7. Android 内存泄漏分析（完）
  8. C语言的printf一些骚操作
  9. android elf 加固_Android常见App加固厂商脱壳方法的整理
  10. (9)Redis-Cluster集群理论及实践【下】
  11. VMware运维工程师常用工具介绍
  12. 打印ascll码表与查询
  13. 人工智能资源下载2024G
  14. 计网 - 内容分发网络 : CDN 回源的工作机制初探
  15. 每日打卡：等式方程的可满足性
  16. C语言利用差分法求解泊松方程
  17. 2万行java代码的系统_PublicCMS: 200万行代码修改 打造安全快速的java cms 轻松支撑千万数据、千万PV；目前已经拥有全球0.0002%的用户，诸多明星网站案例。...
  18. 一个好的学习算法的网站
  19. Spring Cloud（十七）：高并发设计
  20. 警告：关于电磁辐射对孕妇的危害。

热门文章

  1. 解决krpano全景视频在QQ浏览器、安卓不能正常播放的问题
  2. Cannot create container for service peer1.org2.example.com: Conflict. 解决方案
  3. [解决方案]WebAPI+SwaggerUI部署服务器后，访问一直报错的问题
  4. 解决springmvc报No converter found for return value of type: class java.util.ArrayList问题
  5. WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障
  6. 如何根据参数类型重载__init__方法？
  7. 查找包含具有指定名称的列的所有表 - MS SQL Server
  8. Redis集群的搭建与主从复制，redis-cluster
  9. python中paste函数_PIL图像处理模块paste方法简单使用详解
  10. python的方向_Python Shell下方向键显示「^[[C^[[D」修复方法