页面优化的方法有哪些
页面优化的方法有哪些
页面优化是网站如何非常重要的一个环节,网站是由一个一个页面组成的,页面优化的好与坏直接关系到网站优化整体效果。
页面优化的方法有哪些呢?网站的优化过程中我们需要从哪些方面对网站的页面进行优化呢?
一、减少页面的操作量,加快页面的加载速度
1. 尽量减少 HTTP 请求
合并文件，比如把多个 CSS 文件合成一个； CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；
2. 不要在HTML中使用缩放图片
缩放图片并没有减少图片的容量，只是控制了图片的大小。
3. 对要加载的页面Image进行压缩
使用工具对图片进行压缩，保证质量的同时减少了图片的大小。
4. 减少页面对DOM的操作
减少对DOM的操作，减少页面的重绘。
二、提前做加载操作
1. 对域名进行预解析
例如京东的做法
<link rel="dns-prefetch" href="//misc.360buyimg.com" />
为什么对域名进行预解析
当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS 的解析,减少用户等待时间,提高用户体验。
其中Chrome和Firefox3.5+内置了DNS Prefetching技术并对DNS预解析做了相应优化设置。
使用: dns-Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。
具体使用方法如下： <link rel=”dns-prefetch” href=”url地址”>
例: <link rel="dns-prefetch" href="//cdn.www.sojson.com">
其中: //开始是为了适配https和http,就是当前请求链接是https,那么这个//前面自动补充https,反则补充http 也可以直接添加https等
在HTTPS环境下进行DNS预解析 a标签的自动域名解析,在HTTPS上失效
<meta http-equiv="x-dns-prefetch-control" content="on" /> 就可以让a标签在HTTPS环境下进行DNS预解析。
禁止隐式的域名解析: <meta http-equiv="x-dns-prefetch-control" content="off">
2. 预载入组件或延迟载入组件
把 CSS 放到代码页上端
3. CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
4. 使用 new Image对象，对图片进行缓存
三、提升并行加载
切分组件到多个域 ，提升服务器的响应能力
四、JavaScript和CSS优化
1. 从页面中剥离 JavaScript 与 CSS
剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。
2. 精简 JavaScript 与 CSS
使用工具压缩JavaScript和CSS文件
3. 脚本放到 HTML 代码页底部
减少对页面的阻塞。
五、异步加载
使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。
点击展开全部↓↓↓↓
页面优化的方法有哪些网址： http://www.fsdpjq.com/wzyh/686.html