html性能优化

css 外联 
<link rel="stylesheet" type="text/css" href="test.css">
css 内嵌
<style>
  div {}
</style>
js 外联
<script src="test.js" />
js 内嵌
<script>
    function(){}
</script>
图片
<img src="test.jgp" />

  • 定律一:资源是否下载依赖 JS 执行结果。
  • 定律二:JS 执行依赖 CSS 最新渲染。
  • 定律三:现代浏览器存在 prefetch 优化。

如何优化web页面:
1. 内嵌js 放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源的下载
2. 如果嵌入js放在head中,请把嵌入js放在css头部
3.使用defer, 将js 推迟执行, setTime 异步回调
4. 页面的减肥
1).删除页面不必要的空格,注释
2).js 进行压缩
3). js,css 能合并的合并,减少http链接数量
4). 减少域名查询,减少对外部,js,css 图片的引用
5. 避免似使用嵌套 table,化大table 为小table
6. 减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容

$(document).ready() 和 window.onload() 区别:
1.执行时间  
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 
2.编写个数不同  
         window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
         $(document).ready()可以同时编写多个,并且都可以得到执行 
3.简化写法  
         window.onload没有简化写法 
         $(document).ready(function(){})可以简写成$(function(){});

defer 用法:
<script  defer="defer">
alert("页面加载完我才执行的")
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值