前端性能优化
文章平均质量分 87
前端体系化的性能优化
render-ydb
日常分享一些有趣、有用的前端知识。前端界一个普通的码农,目前就职于阿里巴巴。
展开
-
前端性能前沿的优化解决方案
合理选择移动端图标图标Icon是网页开发中常用的资源,特别是在移动端。总所周知移动端由于一些列原因(硬件,网络等等),导致访问网页总体性能会比PC端性能低,所以如何在移动端开发的时候合理选择图标Icon是性能优化的一个关键。使用IconFont之前我们介绍过可以使用PNG格式的图片作为图标使用,但是PNG图片一般体积较大,请求资源变大。此时可以考虑使用字体图标(IconFont)来代替之前的PNG图片格式的Icon。字体图标好处如下:多个图标:一套字体,减少获取时的请求数量和体积矢量图形,可伸缩原创 2021-11-15 21:49:41 · 1218 阅读 · 0 评论 -
前端传输加载优化
传输加载优化之前的章节都是把资源加载到本地以后作出的相关优化,现在来看看传输过程中,我们可以做那些优化。章节所介绍的不同的服务器需要不同的配置,但是知道做法即可,如果你没有服务器相关的知识,到时候善意的提醒一下相关的后台开发人员即可。最好的还是自己要掌握,如果你要进阶这些东西都是必不可少的。启用Gzip压缩当客户端向服务器获取资源的时候,服务器可以开启Gzip压缩,来减少请求资源的体积。可以看到实际大小为1.6M的资源经过压缩以后,变成了181B,如果你使用的是webpack,那么可以开发webp原创 2021-11-14 21:55:20 · 1860 阅读 · 0 评论 -
6.前端资源优化
资源优化为了是我们的网页丰富多彩,避免不了加载许多资源,除了常见的HTML,CSS,JavaScript资源,还有图片,字体等其他类型资源。对于这些资源通用的优化手段那就是压缩和合并,对这些资源进行压缩和合并后有如下好处:减少http请求数量减少请求资源的大小HTML,CSS和JavaScript优化对于这三类资源的压缩和合并,在这里不做过多介绍,因为我相信现在开发都是工程化的,在构建阶段可以使用各种构建工具(例如webpack)得到很好的解决。即使存在少数项目没有使用构建工具,网上也有一大原创 2021-10-19 00:12:43 · 242 阅读 · 0 评论 -
5.JavaScript代码优化
代码优化我们的网页由结构层,表现层和行为层三部分组成,而每一层对应的实现代码分别为HTML(负责描绘出内容的结构),CSS(负责“如何显示有关内容”),JavaScript(负责“内容应如何对事件做出反应”)。针对每一层就行代码优化,可以提升我们的网页性能。HTML优化针对HTML的优化,大致围绕以下几点:1.减少iframes的使用在日常开发中我们应当避免使用或者极大程度上减少iframes的使用。因为iframes所加载的文档会阻塞主文档的加载(可以改为延迟加载iframe),此外通过给ifr原创 2021-10-18 00:35:13 · 322 阅读 · 0 评论 -
4.网页渲染优化
渲染优化不管我们是写的Css样式代码还是JavaScript脚本代码,最后都是靠浏览器渲染出来的,要想浏览器渲染的更快更稳点,针对渲染优化是必不可少的。浏览器如何渲染页面浏览器将域名通过网络通信从服务器拿到html文件后,将会执行以下操作:构建DOM树及CSSOM树根据html文件构建DOM树和CSSOM树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。构建DOM树HTML 文档中的所有内容皆是节点,各节点之间拥原创 2021-10-10 17:17:51 · 190 阅读 · 0 评论 -
3.Web标准APIS
Web标准APIS可以利用Web标准APIS,来得出一些数据上报网站性能,从而分析网站的性能。关键时间节点(Navigation Timing,Resource Timing)window.addEventListener('load', (event) => { let timing = performance.getEntriesByType('navigation')[0]; console.log(timing); let domInteractive = ti原创 2021-10-08 22:51:16 · 66 阅读 · 0 评论 -
2.常见的性能测试工具
测量工具为了向RAIL标准靠齐,我们需要借助各种测量工具来帮我们发现网站中可以进行性能优化的地方,从而针对这些问题进行性能的优化。Chrome Devtools (开发调试,性能评测)大多时候,我们使用Chrome Devtools工具只是用来调试我们的程序,比如查看console的输出,DOM结构,Css样式,最多使用Network面板对网络请求进行简单的查看(问问你自己,是不是这样子)。其实该工具内部还集成了很多性能分析功能。下面就用pc端访问京东首页为例,来看看该工具其他功能的使用。NetWo原创 2021-10-02 16:59:24 · 6373 阅读 · 0 评论 -
1.性能的标准
1 行业标准熟悉行业标准,才能知道开发的网站性能还是好。1.1行业标准RAIL代表Web应用程序生命周期的四个不同方面:响应,动画,空闲和加载。RAIL是一个以用户为中心的性能模型,它提供了一种考虑性能的结构。该模型将用户的体验分解为关键操作(例如,点击,滚动,加载),并帮助您定义每个操作的性能目标。1.1.1 Response响应目标:在100毫秒内完成由用户输入启动的过渡,因此用户感觉交互是即时的。指导方针:为确保在100毫秒内可见响应,请在50毫秒内处理用户输入事件。这适用于大多数输入原创 2021-09-30 22:45:38 · 365 阅读 · 0 评论 -
x.避免使用eval(...)和with
eval(…)eval(…)函数可以接受一个字符串作为参数,从而执行字符串参数组成的JavaScript代码。eval("alert('Hello world!')")上面代码运行会在浏览器窗口弹出"Hello world!"。eval(…)函数通常被用来执行动态创建的代码,比如程序中逻辑生成或者从服务端获取的动态字符串JavaScript代码,这看上起很酷,但是不到万不得已不要使用它。eval(…)函数坏处如下:会对所处的词法作用域作出修改可能会执行恶意JavaScript代码带来的好原创 2021-08-16 00:04:22 · 241 阅读 · 0 评论