当前位置:首页 » 网页前端 » 雅虎的前端优化
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

雅虎的前端优化

发布时间: 2023-05-04 20:08:50

1. 前端必看的书籍

了解更多的前段知识请看下面我精心为您整理的前端必看的书籍,希望您喜欢!

十本学习前端必看书籍

第一本,入门

《Head first HTML&CSS》

最好的入门书。看两遍就对HTML & CSS 有个大概印象了。

此时把w3cschool作为备查手册收藏起来

第二本《CSS权威指南(第三版)》

最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译有点操蛋,遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看,并当做字典随时查。

第三本《精通CSS》

广受前辈推荐的一本书。上一本书是字典的话,这本书相当于《中学生作文大全》,汇集了一些CSS的最佳实践。

第四本《图解CSS3:核心技术与案例实践》

这本书比较新,讲解的是最新的CSS3(前三本书停留在CSS2.1时代),CSS3也是必学的,不是什么可学可不学的最新技术。

HTML CSS值得看的书就这些(之后会有一本《CSS秘密花园》,尚在翻译中,也很值得期待),剩下的就是自己写还有看技术博客了。接下来是JavaScript,HTML和CSS都是没有逻辑的标记型语言,JS才是真正的编程语言,评价前端工程师的水平就看这个了。

第五本《JavaScript DOM编程艺术》

最好的JS入门书籍,一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功),还灌输了最符合标准的编程理念。可惜有点老,最新一版是2010年的,以至于部分内容有点过期,例如本书内经常提到“某某方法浏览器不一定支持,需要小心使用”,而这些历史遗留问题当今已经不存在了,阅读过程中无视就好。

第六本《JavaScript高级程序设计》

每个前端必看的书,此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。

俗称红宝书,也算入门书籍,虽然是大部头(七百多页),但至少通读一遍。

全部掌握了,你可以在网络社区里谈笑风生了,经过实践的锻炼后,面试个前端工程师的岗位应该都没问题了。

第七本《JavaScript语言精粹》

也是前端必看。薄薄一百来页,对JS的去粗取精。

第八本《你不知道的JavaScript》

这是一套丛书, 目前为止仅翻译了第一卷。每本都挺薄,深入介绍了JS中的重要概念。

第九本《JavaScript设计模式》

“设计模式”是软件工程的重要课题,相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本,也有国人写的,挑一两本看看就好。

第十本《高性能网站建设指南》(及其续篇《高性能网站进阶》)

告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的,最好时刻了解你的同行们的经验。

第一阶段:HTML和CSS的学习

HTML就不多说了,基础中的基础,这个都不会的小伙伴请参见HTML手册,认真学习W3C课程,稍有基础之后可以跟着视频学习《HTML+CSS基础课程》。

前端开发必看的14本书

1、《CSS权威指南》第三版

这本书实在太适合小白用户了,是一本为初学者清扫障碍的书籍。同行一致认为这本书是学习CSS基础的首选。CSS界权威Meyer大师的作品,翻译水平也灰常赞!

2、《CSS那些事儿》

不用于一般技术类书籍的枯燥乏味,这本书很有意思。作者是蓝色理想经典论坛标准版荣誉版主林小志,具有多年网站设计和网站重构经验,在CSS、XHTML等前台技术方面有着深厚功底。

全书以传达CSS布局思维为中心,通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用,使读者能深入了解到如何在页面中更好地运用CSS布局。阅读本书之后将会发现,原来CSS样式居然是这么好玩的东西。

3、《精通CSS:高级Web标准解决方案》第二版

前段学习必备书籍,作者Andy Budd是国际顶尖的网页设计师,着名的Web标准倡导者,网页咨询公司Clearleft的创始人之一。

本书将最有用的CSS技术汇总在一起,总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,重点讲解了一系列的css开发技巧,是前端开发人员必备的手册。

4、《CSS禅意花园》

这是一本令人惊叹的书!必须用一个字形容的话,那就是:美!内容编排合理,文字生动有趣引人入胜,通过一个个实例引导读者阅读,强烈推荐!

作者是世界着名的网站设计师,书中的范例来自网站设计领域最着名的网站——CSS Zen Garden(CSS禅意花园)。童鞋们自己去领略吧。

第二阶段——JavaScript的学习

Javascript的书籍当然还是要看老外的,你懂得~

5、《JavaScriptDOM编程艺术》

此书绝对是入门好书,简洁优美的文笔简直是工具书中的典范啊有木有!

这本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则,然后将这些概念贯穿在书中的所有代码示例中,使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建了一个实际的网站。

6、《JavaScript权威指南》第6版

这本书非常适合初级、中级程序员,是学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。

第6版涵盖HTML 5和ECMAScript 5。很多章节完全重写,紧跟当今最佳Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。

7、《JavaScript高级程序设计》第三版

《javascript权威指南》比较像一本字典,而这本《javascript高级程序设计》可以算是一本由浅入深的好读物。这两本书看完后,对javascript一定会有较为深入的了解。

作者Nicholas C. Zakas是世界顶级Web技术专家,现为雅虎公司界面呈现架构师,负责My Yahoo!和雅虎首页等大访问量站点的设计。这本书,看一遍不能算看过,至少读两三遍,每一遍都会让你有新的收获。

8、《高性能JavaScript》

本书从性能角度全面分析js,含金量非常大,很多知识都是作者通过实践总结出来的,都是经验的积累,强烈推荐!

同是Nicholas C. Zakas所写,如果看《JS高级程序设计》觉得理解不太透彻,学习较为吃力,那么我强烈建议你看看这本书,真的是极好的一本实践类书籍,言简意赅,灰常实用!

9、《JavaScript王者归来》

这本《JavaScript王者归来》不仅是一本传播知识的书,更是一本求道的书。O(∩_∩)O 有追求的程序员一定不要错过!愿神力与你同在!

它揭开了JavaScript的面纱,绕过误解和虚幻的表象,引领你探索程序王国的奥妙。这是一本探寻程序设计思想本源的“魔法典籍”,也是一本Web开发工程师们需要的案头参考书。

10、《JavaScript模式》

它绝对不是一本入门级别的书,适用于希望将自身的Javascript技巧提高到一个新层次的专业的开发人员和程序员。

《JavaScript模式》包含了实现每个讨论的模式的实践建议,并附有数个可以立即上手的范例;同时还可以学到一些反模式。短小精悍,进阶必读!

11、《JavaScript设计模式》

进阶教程,得有一定功底才能看懂。反之,如果你轻而易举就能拿下此书,说明你已非等闲之辈~

本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。

第三阶段——jQUery的学习

12、《锋利的jQuery》第二版

入门首选,简单易懂,非常实在。《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,对jQuery分析的逻辑非常值得学习。

第四阶段—学无止境!

如果以上书籍你全都搞定了,那么,恭喜你,你真的很厉害!到这种程度,相信你也不太需要别人推荐书籍了,不过我还是厚着脸皮推荐两本吧。

13、《高性能网站建设指南》

前端开发可以优化网站剩余70%~80%性能,这本书不算厚,几个小时就能看完,推荐前端开发工程师看看。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。

14、《Web开发敏捷之道》第二版

Web开发敏捷之道》曾荣获Jolt大奖“最佳技术图书”奖。在第1版的内容架构基础上,第2版增加了对Rails 1.2中新特性和最佳实践的介绍。此书覆盖了rails1.2的方方面面,其本身也很"敏捷",翻译也非常好。

2. 前端性能优化(一)

最近跟同事一直忙于关于前端项目的性能分析以及性能优化,前端性能直接影响了用户洞穗的体验,针对于前端性能问题,一滚颤磨直是一个大家热议的话题,也并没有一个比较完整通用的解决方案,以下是我个人的一些认识与实践。

1.DNS 解析
2.TCP 连接
3.HTTP 请求抛出
4.服务端处理请求,HTTP 响应返回
5.浏览器拿到响应数据,解析响应内容,把解析的结果展示给用户

⼀般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时,我们会选⽤ async;当脚本依赖于 DOM
元素和大斗其它脚本的执⾏结果时,我们会选⽤ defer。

缺点: ⾮常吃硬件资源

编码能力

3. 前端框架有哪些

1、Bootstrap是最流行的前端开发框架,可以让不是前端工程师也能开发出优美的页面,更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面,上手也非常快。

中文官网:http://www.bootcss.com/

4. 前端书籍推荐

《JavaScript权或迹威指南(第6版)》

淘宝前端团队翻译的,看译者列表都是一堆大神。这本书又叫犀牛书,号称Javascript开发者的圣经,网上对此书评价很多,大概意思都是说这本书是一本JavaScript文档手册,没有完整看过一遍此书的都不能算是一名合格的前端工程师。

豆瓣评分:8.8

推荐指数:

2?1?5?6?6《JavaScript高级程序设计(第3版)》

又称红宝书,雅虎首席前端架构师,YUI的作者Zakas出品。虽然书名带了“高级”二字,但是讲得衫困并也很基础,而且行文风格很流畅,每一小节就像是一篇博客,读起来并不枯燥,个人感觉比上面那本犀牛书可读性更强。

豆瓣评分:9.3

推荐指数:

3?1?5?6?6《JavaScriptDOM编程艺术(第2版)》

嫌前两本太厚尺缺的可以看这本,深入浅出的佳作。

豆瓣评分:8.7

推荐指数:

4?1?5?6?6《JavaScript设计模式与开发实践》

之前看过《javascript模式》一书,那是一本颇受好评的书籍。而本书则是在设计模式上对模式一书的进一步扩充。本书的一大特点就是结合实际,代码较完整,能直接应用到实际开发中。

豆瓣评分:9.1

推荐指数:

5?1?5?6?6《Web性能权威指南》

本书是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物。本书目标是涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识。

豆瓣评分:8.8

推荐指数:

HTML、CSS不推荐看书,因为新增点比较频繁,看基础的在线教程就好。比如:菜鸟教程离线版下载链接PDF、EPUB、MOBI、chm格式

5. 求资深详细解说下Web前端开发内情、行情。。。及未来这个行业的发展~~~~~工资待遇方面怎么样

任何行业都有前景,只是看个人的能力在什么水平,才能够得到什么样的待遇。

6. 从URL到页面,如何优化性能

从输入URL之后,浏览器先做DNS解谈枣析,即将URL解析为唯一的ip地址,全互联网服务器都各自有一个唯一的ip地址,但一个ip地址可能是对应对台服务器,因此在获取资源是通过唯一的ip地址定位的。
DNS解析也是有一个过程的。以www.taobao.com为例,大致解析过程为:
①本机向local dns请求www.taobao.com
②local dns向根域请求www.taobao.com,根域返回com.域的服务器IP
③向com.域请求www.taobao.com,com.域返回taobao.com域的服务器IP
④向taobao.com请求www.taobao.com。
这里会涉及到一个重定向问题,比如输入的URL为https://taobao.com会被重定向到https://www.taobao.com。
为什么要这么做,第一是为了可以把两种方式的访问量累计到一起在一些搜索方面积累优势,
第二则是如果两个地址去访问的话对缓存问题存在一些不友好。
定位到ip地址后,向该服务器发起http请求,下载网页资源。
浏览器工作是边解析边渲染,其实下载html资源时间消耗很小,主要时间用于构建DOM树。
获取到HTML文件资源后:
众所周知,浏览器引起加载解析是自上而下的。
一、浏览器开始显示HTML,在没有接受全部HTML的时候已经开始显示;
二、浏览器发送获取嵌入HTML中的对象请求,比如CSS文件,JS文件,图片等等的资源。
这些请求其实也都和HTML获取经历一个类似的过程,也有DNS解析等等。
但和动态资源不同的是,这些静态资含羡拆源可以做缓存,不需要每次都从服务器去获取。
三、最后展现完整的页面。
这三个步骤中,大家应该知道一下两点:
1.CSS文件会阻塞所有DOM渲染,但不阻塞DOM解析;
2.JS文件不仅阻塞其后面的DOM渲染也阻塞DOM解析。因为JS和UI是共用一个线程的。
因此要在HTML加载之前把CSS加载解析完毕,在最后才引入JS,则不会影响在它之前的流程,也能够显示页面(优雅降级,即使JS出错)。
另外也存在js中会有改变某个DOM元素的样派敬式,但若CSS还未解析,如style.width等属性还未生成则会报错。
这也就是为什么外部JS文件放在body之后引入,CSS文件放在head内引入。
那么基于这些过程,能够如何优化性能呢?
首先,我们应该了解浏览器渲染过程中,有reflow和repain两个概念。
reflow是改变盒子大小,成本极高,应该会改变整个DOM布局;repain则是改变颜色等一些只影响本身的属性,成本较低。
一、因此在初始化过程中尽量避免用JS去reflow导致性能受较大的影响。
二、CSS选择器匹配机制是自右向左的!!!什么意思呢,很多人往往写样式的时候会习惯#id .xx .xx .xx p a等等,
查找步骤其实是先全页中匹配到a标签,然后再向上遍历到根节点#id为止。
这样的写法是比较消耗性能的,那么很明显,最右边的选择器是标签选择器必然会消耗很大的性能要避免;同时,如果是唯一的id选择器那么速度则会很快。
三、本文上面也有讲到,对于一些静态资源可以做缓存来提高页面加载速度和性能,关于http请求缓存相关内容,可出门左拐哈=>http请求缓存
四、减少http请求,压缩代码等等,雅虎前端优化规则等等之类的可以逐一进行学习。

7. 如何进行web前端性能优化

提起Web前端性能优化的问题,前端开发人员非常熟悉,对于一个网站而言,即使内容和功能再优秀,如果用户需要花费很久的时间才能打开,这样迟早会消耗用户的耐心,并最终失去用户。

那如何才能优化前端性能?归纳为三步

一、关键资源字节数

字节数也就是通常说的减少资源文件(js、css、image、video...)的大小。

1、压缩衫蚂

前端使用uglify混淆压缩

后端开启gzip

对图片进行压缩,使用压缩比例更高的格式(WebP)

2、缓存

强缓存(http状态码:200),不用请求服务运纳器直接使用本地缓存,协商缓存(http状态码:304),使用时先请求服务器若被告知缓存没过期则使用本地缓存,不用下载资源,使用localstorage对数据进行存储

3、针对首屏优化

对非关键资源延迟加载、异步加载,减少首屏资源大小

二、关键资源连接数

1、合并请求

使用http2.0的多路复用合并请求配置combo,在无法使用http2.0的情况下作为一种合并资源请求的手段。

2、减少图片请求数

使用spite图,使用svg-symbol。

3、针对一些场景采用css、js内联的方式。

4、使用强缓存减少了一次服务器请求。

5、非关键资源延迟、异步加载,减少了首屏资源连接数。

三、关键渲染路径

1、bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端需要处理很多个任务,我们可以将这些多个任务进行分块,谁先完成谁就先输出,最终通过JS回填的方式输出DOM节点,这种方式主要解决了直出页面阻塞的问题。

2、bigrender分块渲染

常规的手段就是采用前端模板渲染页面,针对首屏时间主要减少了首次构建DOM树时的节点数

3、针对reflow,repaint,composit路径处理。

4、涉及到动画时关于layer的概旁塌没念renderlayer、graphicslayer。

5、css放在头部、js放底部避免阻塞DOM树的构建,关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心:css资源不会阻塞DOM树的构建但会阻塞DOM的渲染,JS会阻塞DOM树的构建,CSS会阻塞JS的执行。

8. BAT 前端工程师面试对算法一般有怎样的要求

当我是实习生时,我遇到了BAT三,所以我对算法没有要求。当然,实习生的要求也可能比较低。

  • 阿里面试:

一边使用电脑直接连接到互联网看到面试官网站,博客之类的,然后选择一些问,并帮助考背后的标签组件的实现和JS类继承,等等。在第二个方面,我也看到了,GitHub,博客等等。

实际上,在工作的前端使用的算法并不多,即使像jQuery这样的公共库的实现对算法的应用也不是很好。至于何时使用,请使用NodeJs偶尔编写自动化工具,前端WebGL矩阵操作,图像处理,如需要,但我认为这些都超出了一般前端工程师的能力。

9. 前端书籍推荐

初级读物

《JS高级程序设计》:一本非常完整的经典入门书籍,被誉为JS圣经之一,详解的非常详细,最新版第三版已经发布了,建议购买。

《JS王者归来》网络的一个Web开发项目经理写的,作为初学者准备的入门级教程也不错。

中级读物

《JS权威指南》:另外一本JS圣经,讲解的也非常详细,属于中级读物,建议观看。

《JS.The.Good.Parts》:Yahoo大牛,JS精神领袖Douglas Crockford的大作,虽然才100多页,但是字字珠玑啊!强烈建议阅读。

《高性能JS》:《JS高级程序设计》作者Nicholas C. Zakas的又一大作。

《Eloquent JS》:这本书才200多页,非常短小,通过几个非常经典的例子(艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等)来介绍JS方方面面的知识和应用方法。

高级读物

《JSPatterns 》:书中介绍到了各种经典的模式,如构造函数、单例、工厂等等,值得学习。

《Pro.JS.Design.Patterns》:Apress出版社讲解JS设计模式的书,非常不错。

《DevelopingJSWeb Applications》:构建富应用的好书,针对MVC模式有较为深入的讲解,同时也对一些流程的库进行了讲解。

《Developing Large Web Applications》:不仅有JS方面的介绍,还有CSS、HTML方面的介绍,但是介绍的内容却都非常不错,真正考虑到了一个大型的Web程序下,如何进行JS架构设计,值得一读。

结语

要做优秀的前端工程师,还需要继续努力:《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。 这些都要深入研究!

万事开头难!如果你能到这个境界,剩下的路自己就可以走下去了。

10. web前端看哪些书籍好,前端开发书籍大全_web前端开发自学书籍推荐这5本

1、HTML/HTML5基础:

《HTML5秘籍》

2、CSS

推荐书籍:

1、《图灵程序设计丛书:HTML5与CSS3设计模式》

2、《Web开发技术丛书:深入理解Bootstrap》

3、《高流量网站CSS开发技术》

4、《CSS设计彻底研究》这个一定要

5、《Web开发技术丛书:深入理解Bootstrap》

6、可以找一些闹搜专门讲SASS的书,但是我没找到

7、《CSS权威指南(第3版)》

3、深入学习JS

推荐书籍:

1、《单页Web应用:JavaScript从源弯册前端到后端》

2、《Web2.0界面设计模式》

3、《响应式Web设计:HTML5和CSS3实战》

5、工具

学会使用grunt进行JS、CSS、HTML压缩,特别是模块化js开发时候的压缩

会用PS进行切图、保存icon

入手sublime、webstorm

学会使用chrome调试面板,特别是:console、network、profile、element

进阶:

4、性能

推荐书籍:

1、《Web性能权威指南》

2、雅虎网雹宏站页面性能优化的34条黄金守则

5、HTTP及TCP协议族

推荐书籍:

1、《HTTP权威指南》

2、《TCP/IP详解》

3、《图解TCP/IP(第5版)》