版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
——江西应用技术职业学院web前后端数据交互技术网页的优化师——页面性能优化第六章教学内容页面性能优化的五种方法：资源压缩减少HTTP请求次数、静态资源与动态资源分离、非核心代码异步加载、浏览器缓存、DNS预解析。主要目标素养目标●掌握页面资源压缩的方法●掌握静态资源与动态资源分离原理●掌握核心代码异步加载方式●提升分析问题、团队协作的能力，自主分析能力●培养认真、仔细的职业工匠精神●浏览器缓存使用方法●DNS预解析的实现方法教学重点HTML、JS、CSS的资源压缩方法、动态资源与静态资源的区别和分离方式、非核心代码异步加载中defer和async的使用方法、浏览器缓存的应用规则、DNS预解析的实现方式一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术资源压缩减少HTTP请求6.1资源合并资源压缩HTTP请求的概要目录CONTENTS12301HTTP请求的概要6.1资源压缩减少HTTP请求HTTP请求的概要http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理，增大开销。减少http请求数量：可以资源的合并减少http请求大小：可以资源的压缩02资源压缩6.1资源压缩减少HTTP请求资源压缩html压缩HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。资源压缩Html未压缩案例：<!--[publishedat****-**-**20:06:00]--><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>新浪首页</title> <metaname="keywords"content="新浪,新浪网,SINA,sina,,新浪首页,门户,资讯"/> <metaname="description"content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。"/> <metacontent="always"name="referrer"><linkrel="mask-icon"sizes="any"href="///favicon.svg"color="red"> <metaname="stencil"content="PGLS000022"/> <metaname="publishid"content="30,131,1"/> <metaname="verify-v1"content="6HtwmypggdgP1NLw7NOuQBI2TW8+CfkYCoyeB8IDbn8="/> <metaname="application-name"content="新浪首页"/> <metaname="msapplication-TileImage"content="///dy/deco/2013/0312/logo.png"/> <metaname="msapplication-TileColor"content="#ffbf27"/><linkrel="apple-touch-icon"href="///home/2013/0331/U586P30DT20130331093840.png"/>资源压缩Html经过压缩案例：<!DOCTYPEhtml><!--STATUSOK--><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metacontent="always"name="referrer"><metaname="theme-color"content="#2932e1"><metaname="description"content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。"><linkrel="shortcuticon"href="/favicon.ico"type="image/x-icon"/><linkrel="search"type="application/opensearchdescription+xml"href="/content-search.xml"title="百度搜索"/><linkrel="icon"sizes="any"maskhref="///img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><title>百度一下，你就知道</title>资源压缩使用在线网站进行压缩nodejs提供了html-minifier工具后端模板引擎渲染压缩HTML压缩方式：资源压缩CSS压缩案例<linkrel="icon"sizes="any"maskhref="///img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><linkrel="dns-prefetch"href="//"/><title>百度一下，你就知道</title><styleindex="newi"type="text/css">#form.bdsug{top:39px}.bdsug{display:none;position:absolute;width:535px;background:#fff;border:1pxsolid#ccc!important;_overflow:hidden;box-shadow:1px1px3px#ededed;-webkit-box-shadow:1px1px3px#ededed;-moz-box-shadow:1px1px3px#ededed;-o-box-shadow:1px1px3px#ededed}.bdsugli{width:519px;color:#000;font:14pxarial;line-height:25px;padding:08px;position:relative;cursor:default}.bdsugli.bdsug-s{background:#f0f0f0}.bdsug-storespan,.bdsug-storeb{color:#7A77C8}.bdsug-store-del{font-size:12px;color:#666;text-decoration:underline;position:absolute;right:8px;top:0;cursor:pointer;display:none}.bdsug-s.bdsug-store-del{display:inline-block}.bdsug-ala{display:inline-block;border-bottom:1pxsolid#e6e6e6}.bdsug-alah3{line-height:14px;background:url(///img/sug_bd.png?v=09816787.png)no-repeatleftcenter;margin:6px04px;font-size:12px;font-weight:400;color:#7B7B7B;padding-left:20px}.bdsug-alap{font-size:14px;font-weight:700;padding-left:20px}#m.bdsug.bdsug-directp{color:#00c;font-weight:700;line-height:34px;padding:08px;margin-top:0;cursor:pointer;white-space:nowrap;overflow:hidden}#m.bdsug.bdsug-directpimg{width:16px;height:16px;margin:7px6px9px0;vertical-align:middle}#m.bdsug.bdsug-directp资源压缩使用在线网站进行压缩使用html-minifier对html中的css进行压缩使用clean-css对css进行压缩CSS压缩方式：资源压缩JS压缩案例</script><script>F._setMod("superman");F._fileMap({"/js/sbase-0948aa26f1.js":["lib/event.ts","plugin/browser","plugin/strpx","plugin/url","plugin/ajax","plugin/load_file","plugin/string","plugin/stringify","plugin/localstorage","plugin/fn","plugin/easing","plugin/mousewheel","plugin/cookie","lib/base","lib/sbase","lib/class","lib/mod_evt","lib/log","lib/thunder","lib/utils.js","common/user_attr","common/select","common/bottom_layer"],"js/polyfill-ie8-30f98ab294.js":["polyfill/object-define-property","polyfill/object-keys"],"/js/min_super-23a390f813.js":["common/result_page","common/image_lazy_load","log/webb.min","log/super_all","lib/carditem_log","ps/log","ps/sindex","ps/sug","ps/fpid","start/super_start","page/info","page/scroll"],"/js/super_ext-898c90316c.js":["plugin/mousewheel","weather/setting_refresh","weather/setting_ctrl","weather/setting_view","weather/weather_city"],"/js/super_load-6ecf1aedb1.js":["weather/weather_tpl","weather/weather_ctrl","weather/weather_autorefresh","start/skin_start","skin/skin_rewrite","mngr/top_layer","mngr/top_menunav","mngr/top_menu","mngr/menu_user","mngr/menu_common","mngr/quit_dialog","mngr/top_menunav_new","common/guide_tip","page/page_exp"],"/js/skin_layer-8bef845f00.js":["skin/skin_init_new","skin/skin_cut_img","skin/skin_model","skin/skin_nav","skin/skin_page","skin/skin_tools","skin/skin_img","skin/skin_control_new","skin/skin_view","skin/skin_new_upload","skin/skin_setting","skin/skin_preview","skin/skin_defined",资源压缩使用在线网站进行压缩使用html-minifier对html中的js进行压缩使用uglifyjs2对js进行压缩JS压缩方式：03资源合并6.1资源压缩减少HTTP请求资源合并为什么要资源合并？资源合并资源合并的方法：将这些十几K、几K的小图标合并在一张图片里，然后用CSS的background-image和background-position属性来定位要显示的部分。谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术静态资源与动态资源分离6.2动静分离实现方法什么是动静分离动态与静态资源简介目录CONTENTS12301动态与静态资源简介6.2静态资源与动态资源分离动态与静态资源简介静态资源当用户多次访问这个资源，资源的源代码永远不会改变的资源。静态资源特点1.
静态资源内容相对稳定
2.
静态资源没有数据库的支持3.
静态资源的交互性较差动态与静态资源简介动态资源当用户多次访问这个资源，资源的源代码可能会发送改变。动态与静态资源简介动态资源特点：1.
交互性2.
自动更新3.
因时因人而变动态与静态资源简介02什么是动静分离6.2静态资源与动态资源分离什么是动静分离动态资源与静态资源分离：动态文件与静态文件的分离。03动静分离实现方法6.2静态资源与动态资源分离动静分离实现方法动提高用户访问静态代码的速度降低对后台应用访问动静分离优点：动静分离实现方法动静分离实现方法：静态资源放到nginx中动态资源转发到tomcat服务器中谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术
非核心代码异步加载6.3async应用defer应用动态脚本加载目录CONTENTS12301动态脚本的加载6.3非核心代码异步加载动态脚本加载1、直接document.write2、动态改变已有script的src属性3、动态创建script元素动态脚本加载1、直接document.write<scriptlanguage="javascript">document.write("<scriptsrc='test.js'><\/script>");</script>动态脚本加载2、动态改变已有script的src属性<scriptsrc=''id="s1"></script><scriptlanguage="javascript">s1.src="test.js"</script>动态脚本加载<script>varoHead=document.getElementsByTagName('HEAD').item(0);varoScript=document.createElement("script");oScript.type="text/javascript";oScript.src="test.js";oHead.appendChild(oScript);</script>3、动态创建script元素02defer应用6.3非核心代码异步加载
defer应用defer属性规定是否对脚本执行进行延迟，直到页面加载为止。defer定义：defer应用为什么需要deferfuncf(){r:=getResource()//0，获取资源
if...{r.release()//1，释放资源return}
if...{r.release()//2，释放资源return}
if...{r.release()//3，释放资源return}
r.release()//4，释放资源returndefer应用funcf(){r:=getResource()//0，获取资源
deferr.release()//1，注册延迟调用函数，f()函数返回时才会调用r.release函数释放资源
if...{return}
if...{return}
if...{return}
return}为什么需要deferdefer应用Defer语法及语义deferxxx(arg0,arg1,arg2,)defer应用defer
使用要点延迟对函数进行调用；即时对函数的参数进行求值；根据defer顺序反序调用；defer应用案例：defer
函数延迟调用funcf(){deferfmt.Println("defer")fmt.Println("begin")fmt.Println("end")return}beginenddefer输出结果：defer应用案例：defer
函数参数即时求值funcg(iint){fmt.Println("gi:",i)}funcf(){i:=100deferg(i)//1fmt.Println("begini:",i)i=200fmt.Println("endi:",i)return}begini:100endi:200gi:100输出结果：defer应用案例：反序调用funcf(){deferfmt.Println("defer01")fmt.Println("begin")deferfmt.Println("defer02")fmt.Println("")deferfmt.Println("defer03")fmt.Println("end")return}begin
end
defer03
defer02
defer01输出结果：03async应用6.3非核心代码异步加载async应用async属性规定一旦脚本可用，则会异步执行。async定义：async应用案例：async实现：varfs=require('fs');varreadFile=function(fileName){returnnewPromise(function(resolve,reject){fs.readFile(fileName,function(error,data){if(error)reject(error);resolve(data);});});};vargen=function*(){varf1=yieldreadFile('/etc/fstab');varf2=yieldreadFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};varasyncReadFile=asyncfunction(){varf1=awaitreadFile('/etc/fstab');varf2=awaitreadFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术浏览器缓存介绍6.4浏览器端的缓存规则为什么使用缓存浏览器缓存介绍目录CONTENTS123浏览器缓存的分类401什么是浏览器缓存6.4浏览器缓存什么是浏览器缓存浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。02为什么使用缓存6.4浏览器缓存为什么使用缓存为什么使用缓存：（1）减少网络带宽消耗（2）降低服务器压力（3）减少网络延迟，加快页面打开速度03浏览器端的缓存规则6
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 酒店卫生评比奖惩制度
- 近效期药品催销奖惩制度
- 统计局保密工作奖惩制度
- 幼儿园全体人员奖惩制度
- 电缆公司车间奖惩制度
- 车间生产指标奖惩制度
- 小学一年级孩子奖惩制度
- 产科科室奖惩制度范本
- 小学生家规奖惩制度细则
- 超市员工日常奖惩制度
- 移植血管内瘘的护理
- GJB9001C-2017国军标标准培训讲义
- 人教版数学一年级下册第一单元《十几减9》真题同步测试3（含解析）
- 校园网网络工程分析需求报告
- 《杀死一只知更鸟》读书分享PPT
- 级自制书119本13黑今天穿什么
- Premiere 认证题库（整理版）
- 01厨房组织人员管理篇
- 考研考博-英语-华东理工大学考试押题卷含答案详解1
- 胆囊切除术 胆总管切开取石术
- 灭火器消防栓检查维护记录表
评论
0/150
提交评论