#页面优化

Cs231n课堂内容记录-Lecture 3 最优化

Lecture4最优化课程内容记录:(上)https://zhuanlan.zhihu.com/p/21360434?refer=intelligentunit(下)https://zhuanlan.zhihu.com/p/21387326?refer=intelligentunit1.代码注释:numpy.rando...

前端性能优化10个方面

1.加载优化1.压缩合并2.代码分割(codespliting),可以基于路由或动态加载3.第三方模块放在CDN4.大模块异步加载,例如:Echarts,可以使用require.ensure,在加载成功后,在显示对应图表5.小模块适度合并,将一些零散的小模块合并一起加载,速度较快6.可以使用pefetch预加载,在分步...

webpack长缓存优化

1.文件不随编译变化文件hash不使用[hash],而使用[chunkhash],使得文件只随着内容变化,不随着编译变化,[hash]是每次编译都变化一次 2.css文件不受js模块变化影响css文件hash使用contenthash,这样不受js模块变化影响 3.提取vendor公共库不受业务模块...
代码星球 ·2020-06-29

React router 4 获取路由参数,跨页面参数

1.match通过路径<Routepath="/path/:name"component={example}/>路由组件内获取参数使用this.props.match.params.name2.queryString通过search//mirrorx中使用push的参数search,link中使用与此类似a...

webpack优化总结

1.分包将不需要变动的第三方包分离出去,主要方法有:(1).externals(2).DllPlugin(autodll-webpack-plugin可简化配置)(3).expose-loader(4).ProviderPlugin(4).IgnorePlugin  忽略不必要的内容,例如momen...
代码星球 ·2020-06-29

前端性能优化

除了雅虎军规35条,这里再强调几条1.首屏加载1.首屏尽量使用服务端渲染2.首屏尽量使用懒加载此懒加载并非图片的懒加载,而是指这个文档内容的懒加载。可以先服务端渲染用户可见的部分内容(实际要大于此,因为用户可能会滚动屏幕),剩余的部分用js去加载和渲染,这样可以尽快的显示首屏,又不影响用户的浏览。2.DNS预读取DNS...
代码星球 ·2020-06-29

性能优化-FSL(Force Synchronous Layout)强制同步布局

通过chrome的Perfermance工具记录程序性能,切换到帧模式,点开其中一帧,看详情,中间为紫色的区块代表Layout,右上角带有红色三角的为警告,是chrome告知的强制同步布局,即FSL。点击这个区块,可以看到下面的面板中有详细信息,有函数调用栈,可以看到哪一行触发了FSL,点击其中的链接,可以直接跳转到该...

性能优化-使用 RAIL 模型评估性能

RAIL是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面,且这些方面以不同的方式影响着性能: TL;DR以用户为中心;最终目标不是让您的网站在任何特定设备上都能运行很快,而是使用户满意。立即响应用户;在100毫秒以内确认用户输入。设置动画或滚动时,在10毫秒以内生成帧(一帧只有1...

webpack配置优化

1.使用alias简化路径alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src')}2.overlay界面弹出编译错误devServer:{overlay:{errors:true,warnings:true}}3.import语句指定chunkNamewebpack...
代码星球 ·2020-06-28

性能优化-合成层

1.提升移动或渐变元素的绘制层绘制并非总是在内存中的单层画面里完成的。实际上,浏览器在必要时将会把一帧画面绘制成多层画面,然后将这若干层画面合并成一张图片显示到屏幕上。通过渲染层提升可以减小绘制区域,我们可以用调试工具查看到绘制层:在页面中新建一个渲染层最好的方式就是使用will-change属性,同时再与transf...
代码星球 ·2020-06-28

秒杀系统前端优化

在秒杀系统中,前端能进行的优化点:1.限流,点击提交按钮后按钮置灰,显示为正在排队中,能处理结束或若干秒后,才允许用户点击2.页面静态化,将页面做成静态页面,不经过webserver的处理,直接返回3.CDN分流,将页面放在CDN上,用户刷新页面直接返回,不必惊动服务器4.商品数量显示,使用倒计时,倒计时结束后,使用动...
代码星球 ·2020-06-28

DOM解析和优化

DOM解析1.css不会阻塞DOM解析(DOMTree),但会阻塞DOM渲染(cssTree+DOMTree->renderTree)2.JS阻塞DOM解析,但浏览器会预解析DOM,提前下载相关资源,img,script等DOM优化DOM操作会导致repaint和reflow,减少repaint和reflow可以...
代码星球 ·2020-06-28

微信小程序页面跳转传参

1.传递参数方法 使用navigatior组件<navigatorurl="/pages/pull/pull?title=lalla&name=cc"hover-class="navigator-hover">跳转到新页面</navigator>使用跳转APIwx.naviga...

前端性能优化术语

技术类1.首屏时间(加载到第一屏的功能点,所消耗的时间)2.白屏时间(从进入页面到head解析的时间)3.可操时间(与模块相关,主要是测试核心模块的使用率,以及用户感知)3.连通率(多为视频站点。时间为纵轴,主要是对应时间用户看到的视频或者听到声音的比例)产品类1.PV(pageview),页面浏览量或点击量,衡量用户...
代码星球 ·2020-06-28

从输入url到页面呈现的过程

从输入url到页面呈现的过程包括两个基本过程:网络通信和页面渲染网络通信主要过程是域名解析->TCP连接->HTTP请求->服务端响应,返回HTML页面渲染的主要过程是  下面是详细的过程1.域名解析a.先从本地hosts文件中解析域名对应的IPb.若上步中没有,则从远程DNS服务...
首页上一页...7576777879...下一页尾页