前端资源(前端资源预加载方法)

前端资源

前端很火，想自学前端的人也多。作为过来人，知道自学的辛苦。制造这份学习路线图的初心，便是让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。于是，在为时将近两个月的整理之后，就有了这份全面的前端学习资源大礼包！不管你是刚入门的小白，仍是现已工作的前端开发者都能从中获取到你想要的材料！
一、前端学习路线图—流程篇：
二、前端学习路线图—视频篇：
前端视频篇第一阶段-准备篇
本阶段前端课程算计5个知识点，5个免费视频包括
1、周期与方针：
学习周期：15天
学完后方针：
1、了解媒体查询和呼应式规划，使得规划有适配不同的移动;
2、了解根底CSS的格局和CSS盒形式;
3、了解网页间是怎么链接的、怎么规划多列布局，可以处理表单字段和媒体元素;
4、了解怎么创立和阅读一个根本的网页。
2、知识点:
1）开发工具的安装配置的介绍
sublime、webstorm、VisualStudioCode
2）HTML
了解怎么阅读和创立网页、根本的语法规范、常用标签及特点、网页之间的链接与跳转、标签节点层级节点
3）CSS
根本语法和三种书写方位、选择器和格局化排版、盒模型的高档用法、常用布局模型
4）JavaScript入门
根底语法和变量、数据类型和数据类型转换、条件判断、循环语句、函数、数组等内置方针
5）京东主页实战
CSS代码笼统与复用、起浮的盒子布局、padding和margin运用、层级的运用、定位特性的各种运用场景
教程下载：
前端与移动开发根底：http://pan.baidu.com/s/1jIcd84e（此教程对应知识点1235知识点）
2、CSS梅兰商城项目实战视频教程http://pan.baidu.com/s/1pLlRwDl
Javascript教程：
JavaScript根底视频教程：http://pan.baidu.com/s/1skMeNvB
JavaScript根底加强：http://pan.baidu.com/s/1skDXr6t
（此教程对应4知识点）
前端视频篇第二阶段-根底篇
本阶段前端课程算计4个知识点，算计1个免费配套视频包括
1、周期与方针：
学习周期：20天
学完后方针：
1、可以根据jQuery完成炫酷效果和复杂的功用模块；
2、能创造或增加自定义效果到网页上；
3、能娴熟增加标准的动画效果到网页上；
4、娴熟操作DOM模型。
2、知识点：
1）JavaScript根底
JS语言的根本构成、变量、数据类型、表达式、选择结构、循环结构、短路语句、函数根底
2）DOM+BOM
DOM根本结构、节点方针的操作、事情特性及运用、常见的内置DOM方针、常见的BOM功用
3）网页特效与进阶
在网页特效中常用的编程接口、动画编程、事情方针和冒泡、缓动结构封装和旋转木马案例、正则表达式及应用
4）Jquery
选择器、根本操作API、动画API、事情API、插件机制、原理分析、项目实战
引荐教程
JavaScript根底加强：http://pan.baidu.com/s/1skDXr6t（对应知识点1）
前端视频篇第三阶段——核心篇
本阶段前端课程算计5个知识点，算计3个免费视频包括
1、周期与方针：
学习周期：20天
学完后方针：
1、可以根据jQueryMobile/Zepto等结构进行移动端js功用开发；2、可以娴熟运用html5/css3/canvas进行移动端页面和功用效果开发，而且可以根据原生和结构进行呼应式效果开发；3、可以根据jQuery、bootstrap等结构完成炫酷效果和复杂的功用模块；4、可以独立制造电商类，企业类网站，以及常见js动态效果。
2、知识点：
1）HTML5+CSS3
语义化结构、多媒体、本地存储、其他常见API、CSS3选择器、CSS3边框、背景、阴影、CSS3过渡和动画、CSS3弹性布局、Canvas
2）服务端编程
端的概念、Web服务器的概念、服务器建立、XML与JSON
3）PHP
PHP根底语法、PHP服务端编程根底
4）AJAX
根本编程接口、异步数据交互、模板引擎的运用、跨域的完成方案、增量加载
5）移动Web开发
呼应式布局、Bootstrap结构深度运用、Zepto.js库、预编译CSS
引荐视频：
最新H5+CSS3教程视频：http://pan.baidu.com/s/1eSJtHiM（此免费视频对应上述1知识点）
《年最新AJAX教程：http://pan.baidu.com/s/1qXWqpDa（此免费视频对应上述4知识点）
《传智前端工作班视频共享：移动web开发课程》http://pan.baidu.com/s/1cuztnw（此免费视频对应上述5知识点）
前端视频篇第四阶段——进阶篇
本阶段前端课程算计4个知识点，算计2个免费视频包括
1、周期与方针：
学习周期：15天
学完后方针：
1、娴熟运用闭包、高档函数、当即履行函数(匿名函数)等；2、娴熟运用元编程，处理Callback等；
3、了解JavaScript根本语法。
2、知识点：
1）面向方针在JS中的体现与实践
面向方针理论、方针的根本概念、方针的特点和办法、通过字面量创立方针
2）开发过程中常用的形式与思维
开闭原则、MVC思维、高内聚低耦合、工厂形式
3）JavaScript高档特性
通过结构函数创立方针、原型方针、承继的多种完成方式、原型链、函数的本质以及Function结构函数、效果域链、闭包、沙箱形式
4）封装一个自己结构
选择器结构、CSS操作封装、特点操作封装、其他DOM操作的封装、事情结构的封装
视频教程引荐：
JavaScript-高档面向方针视频教程：http://pan.baidu.com/s/1o8POXKm

前端资源预加载方法

提到前端功能优化时，咱们首先会联想到文件的兼并、紧缩，文件缓存和敞开服务器端的gzip紧缩等，这使得页面加载更快，用户能够赶快运用咱们的Web使用来到达他们的方针。
资源预加载：是另一个功能优化技能，咱们能够运用该技能来预先奉告浏览器某些资源或许在将来会被运用到。
引用PatrickHamann的解释：
预加载是浏览器对将来或许被运用资源的一种暗示，一些资源能够在当前页面运用到，一些或许在将来的某些页面中被运用。作为开发人员，咱们比浏览器愈加了解咱们的使用，所以咱们能够对咱们的中心资源运用该技能。
这种做法从前被称为prebrowsing，但这并不是一项单一的技能，能够细分为几个不同的技能：DNS-prefetch、subresource和标准的prefetch、preconnect、prerender。
DNS预解析DNS-Prefetch
通过DNS预解析来奉告浏览器未来咱们或许从某个特定的URL获取资源，当浏览器真实运用到该域中的某个资源时就能够赶快地完结DNS解析。例如，咱们将来或许从example.com获取图片或音频资源，那么能够在文档顶部的标签中参加以下内容：
“dns-prefetch”href=”//example.com”>
当咱们从该URL请求一个资源时，就不再需求等候DNS的解析过程。该技能对运用第三方资源特别有用。
在HarryRoberts的文章中提到：
通过简略的一行代码就能够奉告那些兼容的浏览器进行DNS预解析，这意味着当浏览器真实请求该域中的某个资源时，DNS的解析就现已完结了。
这似乎是一个十分微小的功能优化，显得也并非那么重要，但现实并非如此–Chrome一直都做了相似的优化。当在浏览器的地址栏中输入URL的一小段时，Chrome就主动完结了DNS预解析（乃至页面预烘托），从而为每个请求节省了至关重要的时刻。
预衔接Preconnect
与DNS预解析相似，preconnect不只完结DNS预解析，一起还将进行TCP握手和树立传输层协议。能够这样运用：
“preconnect”href=”http://example.com”>
在IlyaGrigorik的文章中有更具体的介绍：
现代浏览器都试着猜测网站将来需求哪些衔接，然后预先树立socket衔接，从而消除昂贵的DNS查找、TCP握手和TLS往返开支。然而，
浏览器还不够聪明，并不能精确猜测每个网站的一切预链接方针。好在，在Firefox39和Chrome46中咱们能够运用preconnect奉告浏览器咱们需求进行哪些预衔接。
预获取Prefetching
假如咱们确认某个资源将来必定会被运用到，咱们能够让浏览器预先请求该资源并放入浏览器缓存中。例如，一个图片和脚本或任何能够被浏览器缓存的资源：
“prefetch”href=”image.png”>
与DNS预解析不同，预获取真实请求并下载了资源，并储存在缓存中。但预获取还依赖于一些条件，某些预获取或许会被浏览器疏忽，例如从一个十分缓慢的网络中获取一个巨大的字体文件。并且，Firefox只会在浏览器搁置时进行资源预获取。
在BramStein的帖子中提到，这对webfonts功能提高十分显着。目前，字体文件有必要比及DOM和CSS构建完结之后才开始下载，运用预获取就能够轻松绕过该瓶颈。
留意：要测验资源的预获取有点困难，但在Chrome和Firefox的网络面板中都有资源预获取的记载。还需求记住，预获取的资源没有同源战略的约束。
Subresources
这是另一个预获取方法，这种方法指定的预获取资源具有最高的优先级，在一切prefetch项之前进行：
“subresource”href=”styles.css”>
根据Chrome文档：
rel=prefetch为将来的页面供给了一种低优先级的资源预加载方法，而
rel=subresource为当前页面供给了一种高优先级的资源预加载。
所以，假如资源是当前页面有必要的，或许资源需求赶快可用，那么最好运用subresource而不是prefetch。
预烘托Prerender
这是一个核武器，由于prerender能够预先加载文档的一切资源：
“prerender”href=”http://example.com”>
SteveSouders在他的一篇文章中写到：
这相似于在一个躲藏的tab页中打开了某个链接–将下载一切资源、创建DOM结构、完结页面布局、使用CSS款式和执行JavaScript脚本等。
当用户真实拜访该链接时，躲藏的页面就切换为可见，使页面看起来便是瞬间加载完结一样。Google查找在其即时查找页面中现已使用该技能多年了，
微软也宣称将在IE11中支持该特性。
需求留意的是不要滥用该特性，当你知道用户必定会点击某个链接时才能够进行预烘托，否则浏览器将无条件地下载一切预烘托需求的资源。
更多相关评论：
一切预加载技能都存在一个潜在的危险：对资源猜测过错，而预加载的开支（抢占CPU资源，耗费电池，浪费带宽等）是高昂的，所以有必要慎重行事。尽管很难确认用户下一步将拜访哪些资源，但高可信的场景的确存在：
假如用户完结一个带有显着结果的查找，那么结果页面很或许会被加载
假如用户进入到登陆页面，那么登陆成功的页面很或许会被加载
假如用户阅览一个多页的文章或拜访一个分页的结果集，那么下一页很或许会被加载
最后，运用PageVisibilityAPI能够避免页面真实可见前被执行。
Preload
preload是一个新标准，与prefetch不同（或许被疏忽）的是，浏览器必定会预加载该资源：
“preload”href=”image.png”>?
尽管该标准还没有被一切浏览器兼容，但其背面的思想仍是十分有意思的。
总结
猜测用户下一步将拜访哪些资源是困难的，需求进行大量的测验，可是这带来的功能提高是显着的。假如咱们愿意测验这些预获取技能，必定会明显提高用户的体会。