关于性能优化的一些方法

页面优化有哪些方法？

一、减少操作量

1. 尽量减少 HTTP 请求

• 合并文件，比如把多个 CSS 文件合成一个；
• CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；

2. 不要在 HTML 中使用缩放图片

• 缩放图片并没有减少图片的容量，只是控制了图片的大小。

3. Image压缩

• 使用工具对图片进行压缩，保证质量的同时减少了图片的大小。

4. 减少对DOM的操作

• 减少对DOM的操作，减少页面的重绘。

二、提前做加载操作

• 对域名进行预解析
  例如京东的做法

    <link rel="dns-prefetch" href="//misc.360buyimg.com" />  
  

• 预载入组件或延迟载入组件

• 把 CSS 放到代码页上端

• CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

• 使用 new Image对象，对图片进行缓存

三、提升并行加载

切分组件到多个域 ，提升服务器的响应能力

四、JavaScript和CSS优化

1. 从页面中剥离 JavaScript 与 CSS
2. 剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。
3. 精简 JavaScript 与 CSS 
4. 使用工具压缩JavaScript和CSS文件
5. 脚本放到 HTML 代码页底部
6. 减少对页面的阻塞。

五、异步加载

• 使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。

前端项目中你如何优化自己的代码？

1、HTML结构要清晰，尽可能使用语义化标签

2、减少外部HTTP请求

3、 压缩 CSS, JS 和 HTML

4、使用 CDN 和缓存提高速度

5、尽量使用使用轻量级框架

6、使用异步加载，延迟加载依赖

7、尽可能使用CSS3动画，相比JavaScript驱动的动画效率更高

8、使用事件委托，防止绑定不必要的大量事件

9、公用的css和js尽量写成公共样式/函数来条调用

10、控制DOM大小，清除多余的DOM节点

11、链接CSS，避免使用@import,避免CSS表达式

12、CSS Sprites雪碧图、icon图标，base64图片

13、尽量合并样式表和js，减少请求次数

14、Html标签、css类名、js变量命名尽量规范，见名知意。

15、将样式表放在头部,脚本放在底部