前端性能优化

        1、减少HTTP请求。

        一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。请求数多了,占用的带宽也多(每个请求都需要携带数据),请求速度会变慢,影响用户体验。

      (1)合理设置 HTTP缓存。(2)CSS Sprites或使用字体图标代替(3)图片懒加载(先加载第一屏内容)

        2、css放在head,js放在后面。

        3、实现按需加载。适用于框架的时候,例如react+antd框架,首先加载框架的实现需要核心内容,然后什么组件就加载什么组件的功能。YUI也是使用的这种方法。

        4、资源合并与压缩。css、js、image都可以用相应的工具进行压缩。

      二、代码端 

        . 减少DOM操作

        .  减少作用域链查找。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。

        . 字符串拼接。在 Javascript中使用"+" 号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法,即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。

        . css选择符(id选择器(#myid)> 类选择器(.myclassname)> 标签选择器(div,h1,p)> 相邻选择器(h1+p)> 子选择器(ul > li)> 后代选择器(li a)> 通配符选择器(*)> 属性选择器(a[rel="external"])> 伪类选择器(a:hover,li:nth-child))

        . html语义化

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值