用HTML/CSS怎么优化项目性能？

用HTML/CSS怎么优化项目性能？

能使用HTML/CSS解决的问题就不要使用JS，为什么？

善于使用浏览器提供的便利进行开发，能够简化代码，提高编程效率；有些交互不用JS就能完成，如果用户JS控制，在脚本加载好之前，当前页面还不可以交互，或者还没有什么效果。

那都有哪些案例可以体现和优化

1. 导航高亮

   导航在菜单里面高亮和hover时高亮。可以用JS控制，同时用一点CSS就可以达到，而不需要使用JS。

   /* 在正常状态时 */
   nav li{ opacity: 0.5; }
   

   /* 在hover时 */
   nav li{ opacity: 1; }
   

2. 鼠标悬浮时显示

   当鼠标hover到某个菜单时，它的子菜单就显示出来。这类场景的实践，一般要把隐藏的对象如子菜单、信息框作为hover目标的子元素或者相邻元素，才方便CSS控制。

   <li class="user">用户<li>
   <li class="menu">
       <ul>
           <li>我的主页</li>
           <li>我的足迹</li>
       </ul>
   <li>
   

   /* menu默认隐藏 */
   .menu{ display: none; }
   /* hover时把相邻的menu显示出来 */
   .user:hover + .menu{ display: list-item; }
   /* 同时menu本身hover的时候也要显示 */
   .menu:hover{ display: list-item; }
   

3. 自定义radio/checkbox的样式

4. 多列等高

   第一种：每列来一个很大的padding，再来一个很大的负margin值矫正回去。

   <style>
       .list-content{
           float: left:
           padding-bottom: 900px;
           margin-bottom: -880px;
       }
   </style>
   <div class="list-content">
       <div>content 1</div>
       <div>content 2</div>
       <div>content 3</div>
       <div>content 4</div>   
   </div>
   

   第二种：借助table的自适应特性，每个div都是一个td，td肯定是等高的。

   .list-content{ display: table; }
   

5. 需要根据个数显示不同样式

   <style>
       li{ width:100%; }
       li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) ~ li{
           width:50%;
       }
       li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li{
           width:33%;
       }    
   </style>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>    
   </ul>
   

6. 使用表单提交

   <form action="/search" >
       <input type="search" name="keyword" />
   </form>
   

7. 自动监听回车事件

   把表单写在一个form里面，当按回车时会自动触发submit事件。

8. 巧用CSS3伪类

   CSS3提供了状态切换特性，例如focus、invalid等。

   <style>
       /* 正常状态为浅灰色 */
       .icon-search{ color:#ccc; }
       /* input focus时为深灰色 */    
       input[type=search]:focus + .icon-search{ color:#111; }
       /* input invalid时半透明 */    
       input[type=search]:focus + .icon-search{ opacity:.5; }
   </style>
   <input type="search">
   <span class="icon-search"></span>
   

9. 选用合适的标签

   （1）文字：如果是一段文字用P标签；如果是标题用h1~h6标签。

   （2）表单：可以实现自动表单提交

   （3）HTML5的input：使用不同的input会弹出不同的键盘

10. 使用HTML5语义化

    • div：作为一个普通的容器使用
    • section：作为一个普通的章节
    • article：适用于独立性较强的内容
    • nav：适用于导航内容
    • aside：可用作和页面主题相关的容器