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>