网页优化方式(网页优化方式汇总、JavaScript优化、网页内容优化、Cookie优化、CSS优化、图片优化)

目录

网页优化方式汇总

javaScript方面

将脚本置底

使用外部JavaScript和CSS文件

合并JS和CSS文件

代码优化

减少DOM的重排(回流)和重绘

网页内容方面

Cookie、CSS和图片方面 


网页优化方式汇总

 以下2张图,只为大致汇总,具体会有添加

03224810_vO1Z.jpg

javaScript方优化

将脚本置底

把脚本置底,这样可以让网页渲染所需要的内容尽快加载显示给用户。通过defer关键字指定不太重要的脚本在文档加载后执行(async关键字可以让脚本异步执行)。

使用外部JavaScript和CSS文件

使用外部Javascript和CSS文件可以使这些文件被浏览器缓存,从而在不同的请求内容之间重用。

同时将Javascript和CSS从inline变为external也减小了网页内容的大小。

使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率,如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面,那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面,例如microsoft.com首页,那inline的javascript和css相对来说可以提供更高的效率。

合并JS和CSS文件

减少HTTP请求

代码优化

https://blog.csdn.net/AIWWY/article/details/119898609

减少DOM的重排(回流)和重绘

https://blog.csdn.net/AIWWY/article/details/120393303

网页内容优化

https://blog.csdn.net/AIWWY/article/details/120398322

CSS和图片优化

https://blog.csdn.net/AIWWY/article/details/120398388

Cookie和服务端优化

https://blog.csdn.net/AIWWY/article/details/120399382

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值