iframe会阻塞主页Onload事件；搜索引擎的搜索程序不能解释这个页面，不利于SEO；

iframe与主页共享连接池，浏览器对同一域的连接有限制，会影响页面的并行加载；

使用iframe这两个缺点之前需要考虑。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值可以绕过以上两个问题。

1. 伪元素可以使用，阴影实现的内容不能使用DOM实现，如去除浮动、实现风格等；
2. 按需加载，减少不必要的渲染；
3. 合理的结构，语义标签，减少代码；

1.缓存dom对象：首先，无论在什么场景下。Dom一般先去访问Dom ,特别是像循环遍历这样的时间复杂度可能相对较高的操作。然后，主节点可以在循环前不循环Dom先获取节点，然后可以在循环中直接引用，而无需重新查询

// 不好的做法 for (let i = 0; i < 10; i ) { 
           document.getElementById("temp").innerHTML = ""   document.getElementById("temp").innerHTML  = "
temp
"; }   // 改进的做法 let temp = document.getElementById(temp); for (let i = 0; i < 10; i ) { 
           temp.innerHTML = "";   temp.innerHTML  = "
temp
"; }   //再改进 let temp = document.getElementById
       
        (
        "temp"
        )
        ; 
        let fragments 
        = 
        "" 
        for 
        (
        let i 
        = 
        0
        ; i 
        < 
        10
        ; i
        ++
        ) 
        { 
          fragments 
        += 
        "
temp
"
        ; 
        } temp
        .innerHTML 
        = 
        ""
        ; temp
        .innerHTML 
        = fragments
        ; 
       

2.文档片段: 利用document.createDocumentFragment()方法创建文档碎片节点,创建的是一个虚拟的节点对象。向这个节点添加dom节点,修改dom节点并不会影响到真实的dom结构。我们可以利用这一点先将我们需要修改的dom一并修改完，保存至文档碎片中,然后用文档碎片一次性的替换真实的dom节点。与虚拟dom类似,同样达到了不频繁修改dom而导致的重排跟重绘的过程。

//创建10个段落，常规的方式
for (let i = 0; i < 10; i++) { 
        
  let p = document.createElement("p");
  let oTxt = document.createTextNode("段落" + i);
  p.appendChild(oTxt);
  document.body.appendChild(p);
}
 
//使用了createDocumentFragment()的程序
let pFragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) { 
        
  let p = document.createElement("p");
  let oTxt = document.createTextNode("段落" + i);
  p.appendChild(oTxt);
  pFragment.appendChild(p);
}
document.body.appendChild(pFragment);

3.用innerhtml代替高频的appendChild

4.虚拟dom

1.拖拽释放(Drag and drop) API

2.语义化更好的内容标签( header,nav,footer,aside,article,section，main )

3.音频、视频API(audio,video)

4.画布(Canvas) API

5.地理(Gealocation) API

6.本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;

7.sessionStorage的数据在浏览器关闭后自动删除

8.表单控件, calendar、date、 time、 email、url、search

9.新的技术webworker, websocket, Geolocation

1.文档类型声明

DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN" "http://mw.w3.org/TR/xhtn11/DTD/xhtml transitional.dtd"> 



DOCTYPE html>

2.结构语义

Html:没有体现结构语义化的标签,通常都是这样来命名的

Html5:在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、 footer、header、nav、 section , 这些通俗易懂

1.突出重要内容

合理的设计title 、description 和keywords