web前端页面优化方法

概述

• 在用户使用我们的网站时，网站的加载速度对是否能留住用户有着致命的影响，因此本文主要介绍部分优化页面的方法

正文

1. 尽量减少 HTTP 请求

作为第一条，可能也是最重要的一条。根据数据分析表明，有很大一部分用户访问会因为这一条而获得更好的访问体验。常见的减少 HTTP 请求的方法：

1) 合并文件，比如把多个 CSS 文件合成一个；Gulp,Grunt 构建工具: 合并CSS, 合并JS, CSS&JS压缩；

2) CSS Sprites 雪碧图。利用 CSS background 相关元素进行背景图绝对定位；

3) 图片用base64 与 延迟加载；

2 减少 DNS 查找：

1）. 使用本地资源 ；

2）.使用加速器CDN；

3. 避免重定向；

不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。

4 .Ajax可缓存：

尽量让Ajax可缓存，响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。

5. 延迟载入组件：

lazyload.js；

6. 预载入组件：

require.js；

7. 减少 DOM 元素数量；

8. 最小化iframe的数量：

iframe 是 网站SEO 的大忌。所以针对前端优化来说 iframe 有其好处，也有其弊端，谨慎使用吧。

9. 杜绝 http 404 错误

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，也能提升用户体验：

1）. 杜绝所有网站现有的链接的404，死链接；

2）.自定义404页面，提醒用户，访问的页面不存在，并自动跳转至有效页面。

    如： https://www.btluo.com/404.html；

10.防止页面阻塞：

css文件在头部引入，js在也页面尾部，防止页面阻塞；