优秀前端需要具备的经验

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优秀前端需要具备的经验相关的知识,希望对你有一定的参考价值。

一位优秀的前端工程师不仅要考虑 web 技术和语言,并且还要了解所有不同的组件、系统和概念

顶级前端工程师需要具备的经验和最佳实践(这才是市场急需的前端):

  1. 了解 DNS 解析,充分利用 CDN,使用多个域名来完成资源的请求以缩短加载时间;

1、在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析。 

2、如果hosts里没有这个域名的映射,则查找本地DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析。 

3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系,首先会找TCP/ip参数中设置的首选DNS服务器,在此我们叫它本地DNS服务器,此服务器收到查询时,如果要查询的域名,包含在本地配置区域资源中,则返回解析结果给客户机,完成域名解析,此解析具有权威性。 

4、如果要查询的域名,不由本地DNS服务器区域解析,但该服务器已缓存了此网址映射关系,则调用这个IP地址映射,完成域名解析,此解析不具有权威性。 

5、如果本地DNS服务器本地区域文件与缓存解析都失效,则根据本地DNS服务器的设置(是否设置转发器)进行查询,如果未用转发模式,本地DNS就把请求发至13台根DNS,根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理,并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后,将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后,如果自己无法解析,它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后,就会找qq.com域服务器,重复上面的动作,进行查询,直至找到www.qq.com主机。 

6、如果用的是转发模式,此DNS服务器就会把请求转发至上一级DNS服务器,由上一级服务器进行解析,上一级服务器如果不能解析,或找根DNS或把转请求转至上上级,以此循环。不管是本地DNS服务器用是是转发,还是根提示,最后都是把结果返回给本地DNS服务器,由此DNS服务器再返回给客户机。 


CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比喻:CDN=更智能的镜像+缓存+流量导流。因而,CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题,提高用户访问网站的响应速度。
      为更好地理解CDN,让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时,首先通过DNS重定向技术确定最接近用户的最佳CDN节点,同时将用户的请求指向该节点。当用户的请求到达指定节点时,CDN的服务器(节点上的高速缓存)负责将用户请求的内容提供给用户。具体流程为: 用户在自己的浏览器中输入要访问的网站的域名,浏览器向本地DNS请求对该域名的解析,本地DNS将请求发到网站的主DNS,主DNS根据一系列的策略确定当时最适当的CDN节点,并将解析的结果(IP地址)发给用户,用户向给定的CDN节点请求相应网站的内容。

       CDN的实现需要依赖多种网络技术的支持,其中负载均衡技术、动态内容分发与复制技术、缓存技术是比较主要的几个,下面让我们简单看一下这几种技术。

国内百度、新浪、360等都有可用的前端CND资源库;百度官网:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
  1. 设置 HTTP Headers(Expires, Cache-Control, If-Modified-Since);
  2. 遵循 Steve Souders 给出的全部规则(High Performance Websites)

  规则一:减少HTTP请求。这本书的规则顺序是按照其重要性来排名的,减少HTTP请求作为第一个规则,足见其重要性。根据黄金法则,减少组件数量从而减少HTTP请求是最有效的性能优化方式,其中有几项技术值得提一下:

  1. CSS Sprites。应该前端人都比较熟悉了,把图片整合到一个大图里,利用background-position来定位。

  2. data:URL。值得一说把图片变为内联的,减少了图片请求,webpack里图片小于8kb就会转为base64的data:URL。

  3. 合并脚本和CSS。

  规则二:使用CDN。这个规则不用多说,分发内容使之更靠近终端用户,减少了请求时间。

  规则三:添加Expires头。善用缓存,给长久不变的内容组件设置有效期较久的Expires头。

  规则四:压缩组件。利用gzip等内容编码对文档或组件进行压缩,通常能将相应数据量减少70%左右。

  规则五:将样式表放在顶部。页面在打开工程中逐步呈现,用户会觉得页面快一些,也让用户在等待过程中有一个良好的反馈。把CSS放在底部的话有可能出现白屏现象。

  规则六:将脚本放在底部。页面下载脚本时会阻止其他内容下载与呈现,以防止浏览器的重绘重排。所以把脚本放在页面的底部不会阻止页面内容的呈现,而且页面一些可视化组件可以尽早下载而不被阻塞。

  规则七:避免使用CSS表达式。CSS表达式会进行频繁的求值,导致了性能低下。

  规则八:使用外部JavaScript和CSS。纯粹而言,内联更快一些,因为满足了规则一的减少HTTP请求,但是这个问题上,一定要考虑缓存带来的性能优化,外部文件很有可能被缓存下来,从而提升了性能。

  规则九:减少DNS查找。善用DNS缓存,比如持久连接。

  规则十:精简JavaScript。移除不必要的字符空格,我们常见的.min.js就是如此。

  规则十一:避免重定向。3xx的响应状态码代表着一股重定向的响应。其中URL结尾缺少斜线造成的重定向需要特别注意,不要因为这一点失误损伤性能。

  规则十二:删除重复脚本。

  规则十三:配置ETag。说起这个不得不说条件请求If-Modified-Since和If-None-Match,都是用来进行缓存再验证。ETag的问题是服务器构造ETag时,尽管两个文件完全一样,但如果处于不同的服务器的话还是会有不同的ETag,增加了HTTP进行请求下载的次数,这对于后台是服务器集群的网站性能损伤很大。

  规则十四:使Ajax可缓存。虽然Ajax是异步的,但也不能让等待响应的时间过长。优化准则的话参见上面的性能准则,其中善用缓存依然是我们重点关注的。


  1. 知道如何解决 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 显示的所有问题;
  2. 知道什么任务该放在服务端,什么任务该放在客户端;
  3. 知道使用缓存,DNS 预取和资源预加载技巧;
  4. 精通 javascript,知道何时自己写何时借组别人的框架或代码,优劣明辨;
  5. 熟练使用现代 MVC JavaScript 框架(例如 AngularJS EmberJS React 等),图形库(D3、SnapSVG 等),DOM 操作类库(jQuery、Zepto 等),惰性加载或者模块管理类库(例如 RequireJS、CommonJS 等),任务调用工具(例如 Grunt Gulp 等),包管理工具(Bower Componentjs)以及测试工具(Protractor、Selenium 等);
  6. 掌握图片的格式,每种格式的优点,适用的场景;知道图片优化技巧以及加载策略(雪碧图、懒加载、缓存刷新以及 PNG 交错);
  7. 熟悉 CSS 标准、最新的转换工具积极策略规范(比如 BEM、SMACSS、OOCSS 等);
  8. JavaScript 的计算机科学(内存管理、单进程特性、垃圾回收算法、定时器、作用域、提升以及设计模式)。

换句话说,如果说精通 html+CSS+JS,了解后端知识,只是60分的合格前端;那么要想成为受追捧、拿高薪的80分优秀前端,要对业务需求和、架构设计有真正的运用;而100分的顶级前端,则必须要能够兼顾技术和设计,更接近「以前端开发为主的全栈工程师」了

http://zhuanlan.zhihu.com/FrontendMagazine/20598089?






以上是关于优秀前端需要具备的经验的主要内容,如果未能解决你的问题,请参考以下文章

这才是GraphQL最详细的解释[每日前端夜话0x80]

这才是前端该写的代码:CSS常见套路续

优秀的Web前端开发工程师需要具备的4个条件

一个优秀的前端工程师应具备哪些技能?

这才是自学前端的正确姿势!(本人亲身经历,9个月拿到拼多多美团京东校招offer)

爱前端|HTML5手机游戏工程实践答辩