从html，css，js，服务器部分四个维度说一下如何优化页面

HTML,CSS,JS，服务器部分优化

HTML部分

1. 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发，在没有css样式的时候，页面依然显示清晰的结构，有利于搜索引擎的爬虫抓取页面，利于移动端页面的加载。

2. 减少DOM节点（下方详细介绍）：加速页面渲染；

3. 一、减少dom数量的方法
   可以使用伪元素，阴影实现的内容尽量不使用DOM实现，如清除浮动、样式实现等；
   按需加载，减少不必要的渲染；
   结构合理，语义化标签
   二、大量DOM时的优化
   当对Dom元素进行一系列操作时，对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能，所以关于操作Dom，应该从以下几点出发：

   1. 缓存Dom对象

   首先不管在什么场景下。操作Dom一般首先会去访问Dom，尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点，不必循环的Dom节点先获取到，那么在循环里就可以世界引用，而不必去重新查询。

   let rootElem = document.querySelector（'#app'）;
   
   let childList = rootElem.child; //假设全是dom节点
   
   for(let i =0; i<childList.lenght; i++){
   
          /**
   
          *根据条件对应操作
   
      }

   2.文档片段

   利用 document.cerateDocumentFragment() 方法创建文档碎片节点，创建的是一个虚拟的节点对象。向这个节点添加dom节点，修改dom节点并不会影响到真实的dom结构。

   我们可以利用这一点先将我们需要修改的dom一并修改完，保存至文档碎片中，然后用文档碎片一次性的替换真实的dom节点。与虚拟dom类似，同样达到了不频繁修改dom而导致的重排更重绘的过程。

   let fragment = document.certaeDocumentFragment();
   
   const operationDomHandle = (fragment) =>{
   
        //操作
   
   }
   
   operationDomHandle(fragment);
   
   //然后最后再替换
   
   rootElem.replaceChild(fragment,oldDom);
   

   这样旧址会触发一次回流，效率会得到很大的提升。如果需要对元素进行复杂的操作（删减，添加子节点），那么我们应当先将元素从页面中移除，然后再对其进行操作，或者将其复制一个（cloneNode()），在内存中进行操作后再替换原来的节点。

   var clone = old.cloneNode(true);
   
   operationDomHandle(clone);
   
   rootElem.repalceChild（clone，oldDom）

   3.用innerHtml 代替高频的appendChilde

   4.最优的layout方案

   批量读，一次性写。先对一个不在render tree上的节点进行操作，再把这个节点添加回 render tree。这样只会触发一次DOM操作。使用 requestAnimationFrame()，把任何导致重绘的操作放入 requestAnimationFrame

   5.虚拟Dom
   js模似DOM树并对DOM树操作的一种技术。virtual DOM是一个纯js对象（字符串对象），所以对他操作会高效。

   利用virtual dom，将dom抽象为虚拟dom，在dom发生变化的时候县对虚拟dom进行操作，通过dom diff算法将虚拟dom和原虚拟dom的结构做对比，最终批量的去修该真实的dom结构，尽可能的避免了频繁修改dom而导致的频繁的重排和重绘。

4. 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；

5. 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；

6. 正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div></div>的过程；

7. 链接为目录或首页的地址后面加”/”，如http://www.qq.com/；

8. 用LINK而不用@import方式导入样式；

9. 样式放在页头，JS放在页尾；

10. 写html结构时需要注意：

• 减少标签嵌套的层级

• 块级元素可以嵌套块级和行内元素，但是行内元素不可以嵌套块级元素，但是只有a标签可以嵌套块级元素

• ul里面最好放li,ol li 都是一起出现的

下面我们来详细介绍下
列表标签 ul ol li
定义列表 dl dt dd
超链接 a
一段文字 p
图片 img
无意义 div span
斜体 i em
粗体 b strong
网站的标题、logo：h1 网页中最重要的内容

注意：
p标签不可以嵌套块级元素

<p>
    <div></div>
</p>
以上结构，在浏览器解析为
<p></p>
<div></div>
<p></p> 
这是错误的写法  div可以嵌套p标签  但是p标签绝不可以嵌套div标签
能用p标签就不用div标签

1. 尽量不用em、strong 这种加强语气的标签，用i、b代替

2. 缩小favicon.ico并缓存。

CSS部分

1. 避免使用 CSS Expressions(CSS表达式)：如

2. 避免使用 CSS Filter（CSS滤镜）；

3. 提高选择器的精确程度；几种书写高效率的CSS选择器的方法，下面一些规则做参考：
   . 避免普遍规则
   . 不要在ID选择器前加标签名或类名
   . 不要在类名选择器前加标签名
   . 尽可能使用具体的类别
   . 避免使用后代选择器
   . 标签分类规则中不应该包含一个子选择器
   . 子选择器的问题
   . 借助相关继承关系
   . 使用范围内的样式表

4. 多使用精灵图(下面有详细介绍)；

5. 精灵图
   精灵图由来：
   一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
   因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

   核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

   使用精灵图核心：

   精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
   这个大图片也称为 sprites 精灵图 或者 雪碧图
   移动背景图片位置， 此时可以使用 background-position 。
   移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
   因为一般情况下都是往上往左移动，所以数值是负值。
   使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
   使用精灵图核心总结：

   精灵图主要针对于小的背景图片使用。
   主要借助于背景位置来实现—background-position 。
   一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
   优势：减少服务器接收和发送请求的次数，提高页面的加载速度（当网页中的图像过多时）
   缺点：图片文件比较大，放大缩小可能失真、修改困难——采用字体图标

6. 多使用css做的动画就不要用js；

7. 尽量使用内部样式表，即style写在html中的hearder中；

8. 使用CSS缩写，减少代码量；

9. 通过CSSSprites把同类图片合成一张，减少图片请求；

10. 减少查询层级：如.header .logo要好过.header .top .logo；

11. 减少查询范围：如.header>li要好过.header li；

12. 避免TAG标签与CLASS或ID并存：如a.top、button#submit；

13. 删除重复的CSS；

Javscript部分

1. 尽量少用全局变量；

2. 使用事件代理绑定事件，如将事件绑定在body上进行代理；

3. 避免频繁操作DOM节点；

4. 不使用EVAL；

5. 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

6. 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

7. 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；

8. 删除重复的JS；

9. 多用switch，少用if，else嵌套，减少for循环的嵌套

10. 逻辑事件把大概率的事件放在左边，进行少判断

服务器部分

1. 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；

2. 压缩CSS、JS文件，缩短文件传输时间；

3. 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；

4. 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；

5. 使用CDN加速，使用户从离自己最近的服务器下载文件；

6. 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

7. 为文件头指定Expires，使内容具有缓存性；

8. 使用gzip压缩内容；