网站优化
网站优化
新手前端王老四
一个正在前端路上跌跌撞撞的新手小白。
展开
-
前端优化之减少作用域链上的查找
为什么要减少作用域链上的查找次数? 因为js代码在执行的时候,如果需要访问一个变量或者一个函数的时候,它需要遍历当前执行环境的作用域链,而遍历是从这个作用域链的前端一级一级的向后遍历,直到全局执行环境,所以这里往往会出现一个情况,那就是如果我们需要经常访问全局环境的变量对象的时候,我们每次都必须在当前作用域链上一级一级的遍历,这显然是比较耗时的。优化方法: 使用局部变量来缓存全局变量,来...原创 2019-11-07 16:58:14 · 230 阅读 · 0 评论 -
前端优化之资源加载
资源加载的位置 通过优化资源加载位置,更改资源加载时机,使尽可能快地展示出页面内容,尽可能快地使功能可用。1、CSS文件放在head中,先外联css,后内联css;2、JS文件放在body底部,先外联css,后内联js;3、处理页面、处理页面布局的JS文件放在head中;4、body中间尽量不写style标签和script标签。资源加载的时期1、异步script标签: defe...原创 2019-11-07 16:45:04 · 444 阅读 · 0 评论 -
前端优化之减少HTTP请求
浏览器只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。HTTP请求从建立到关闭的步骤: 1)客户端连接到Web服务器; 2)发送HTTP请求; 3)服务器接受请求并返回HTTP响应; 4)释放连接TCP链接。 这些步骤都是需要花...原创 2019-11-07 13:39:10 · 1784 阅读 · 0 评论 -
前端优化之缓存
为什么要使用缓存?因为它能让某些时候,性能表面上变得更加,这个就是今天要讨论的问题。 昨天在做ajax数据动态生成的下拉列表时,发现了一个问题,就是加载渲染的速度巨缓慢(ps:才一百多条数据),在实际的应用场景中,用户等你一个下拉列表加载十秒、二十秒你觉得可能吗,这很明显严重影响到了用户体验。 分析了一下问题,在之前的页面里已经获取了一次所有的数据,于是我想到了缓存。 优化:使用lo...原创 2019-11-07 10:49:03 · 237 阅读 · 0 评论 -
前端优化之for循环
for循环是前端常用的语句,在满足功能的同时,更重要的是注意性能。接下来讲讲该如何对for循环进行优化。1.使用break或continue跳出循环: break 语句可跳出当前循环,继续执行该循环之后的代码。 continue语句中断当前循环中的当前迭代,继续循环中的下一个迭代。 遍历查找替换某些属性的时候,一定要记得跳出一下,避免不必要的操作。for (i=0;i<10;...原创 2019-11-07 10:28:30 · 3819 阅读 · 0 评论 -
前端优化之if...else判断
在前端,我们大多习惯使用if…else if…else来进行判断,但是这样做代码不美观,而且可读性低且性能差,于是写了这么一篇博客。关于if…else的优化:优化前的代码:function daxiao(number) { var n =Math.floor(Math.random()*100); if (number == n) { return "值相等"...原创 2019-11-06 16:24:27 · 3427 阅读 · 0 评论 -
前端优化之回流/重排和重绘
什么是回流?什么是重绘?如果是像我一样的前端小白,那可能对回流和重绘的理解没有那么深入。在认识回流和重绘之前,我们先认识一下一个页面加载的时候,会发生什么?页面加载时,生成一个DOM树,DOM Tree里包含了构成页面所有的标签。Style Sheets(CSS样式表)会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree,对于Rende...原创 2019-10-29 10:55:47 · 745 阅读 · 0 评论