第12期课件50性能优化01瑞客_第1页
第12期课件50性能优化01瑞客_第2页
第12期课件50性能优化01瑞客_第3页
第12期课件50性能优化01瑞客_第4页
第12期课件50性能优化01瑞客_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

前端性能优课前准课堂课堂目知识从输入URL到页面加载完成，发生了什三次握httpCachememoryCacheServiceWorkerCachepushcache文件打优化本地服务端渲vue服务端nuxt.js服务端渲染框架体react服务端课堂代码少执缓之前给大家介绍过这个万能面试题，其实这个题的答案，包含着整个互联网运行的过程，我们站端的角度，来尝试回答一下这个问题，用户输浏览器通过DNS，把url解析为和IP地址建立TCP发送HTTP请服务器接收请求，查库，读文件等，拼接好返回的HTTP解析css为css-dom+css生成render-tree执行所谓性能优化，就是上面的步骤加一起，时间尽可能的短，所以基本也有两大少加载文少执行代本地没缓存，发起dns请求，向本地配置的DNS服务器发请求(递归优化：prefetch预获取，比如使用了cdnIPTCPHTTP的关IP负责找TCP负责数据完整性和有序型，三次握手，粘包Vs长连减少文件体js打包压压缩雪碧js，css缓存控懒加减少用户和服务器的距本你在我在携带无用的数据，比如 合理利用缓浏览器缓存通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器这会延迟浏览器获得和处理内容的时间，还会增加者的流量费用。因此，缓存并重复利用之前获取HttpServiceWorkerMemoryPushhttpExpiresCache-Control两个headerexpiresexpires:Wed,11Mar201916:12:18cache-controlmax- 1.1精准优先级 如果命中抢缓存，就不会和服务器如果强缓存失效了，需要执行协商IfIf-Modified-Since:Fri,27Oct201706:35:57服务器304not如果有etag类似文件的，这个优先级更高因为更准ETagETag:W/"2aaa-If-None-Match:W/"2aaa-memory内存缓存，短 比如常用数据存js里，浏览器也有自己的策略 base64，体积小的静态资ServiceWorkeron(){ 成功}).catch(err 失败pushhttp2的缓分析文件大npminstallnpminstalllodashechartsmoment-constconstyzerPlugin=ck- module.exports={ {plugins:new ]}}importmomentimportmomentfrom'moment'import_from'lodash'VductionTip=false或者执行vue打包后的大小从464kb(gzip之后143kb)下降删除冗余代码的tree-shaking，和去除无效代码，我们webapck通常是最占用流量的，PC端加载的平均大小时600K，简直比js打包后的文件还大了，所以针对的优化，也是收益不错的不同的场景，使用不同的文件里有损压体积小不支持透色彩线条更丰富，小图，比如logo，商品文本，体积小打包雪碧图减少http请求次数wck-spritesmithaccept-encoding:gzip开启HTTP压缩就是以缩小体积为目的，对HTTP内容进行重新编zpzp基本上来说，Gzip都是服务器干的活，比如localstroage，sessionStroage，indexDB最早，体积先定，性能浪 ，所有请求都带上所有当前的WebLocalStorageSession量大，不自动发给服务端，js运行在浏览器海南的哥们，开课吧，光电线就要那么远，肯定慢，所以我们可以吧静态资源，部署在分布式cdn上，海南的哥们，就近获取资源，比如广州机cdn单独的，浏览器并发获如果是SPA首屏SSR就是性能优化的重要一nuxtconstconstVue=创建一个express应constserver=提取出renderer实constrenderer=require('vue-server-server.get('*',(req,res)=>编写Vue实例（虚拟DOM节点constapp=newVue({data:url://编写模板HTML的内 te: 的URL是：urlrenderToString是把Vue实例转化为真实DOM的关键方renderer.renderToString(app,(err,html){if(err)res.status(500).end('InternalServerError')}把渲染出来的真实DOM字符串插入HTML模板<!DOCTYPE<html nuxt.js基于服务端宁渲路热加支持importimportexpressfrom'express'importReactfrom'react'import{renderToString}from'react-importAppfromconstapp=renderToString是把虚拟DOM转化为真实DOM的关键方constRDom=ren

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论