常用web前端优化方法

前提：今天被问了一个问题 一时语塞没答上来 之后下来网上查阅资料 做了一些整理 特此做个记录并学习下

首先谈下为什么需要优化？

从用户的角度来说 优化能提升用户体验度，比如打开页面变快了，请求变快了，操作响应速度变快了，这样给用户的体验就会好一些
从服务商的角度来说呢，优化可以节省资源，比如减少用户请求，对带宽的占用就会少一些

但是怎么优化呢？ 从哪些方面可以优化呢？

常见方法：减少http请求，减少dom的数量和对dom的操作，浏览器缓存，合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。

以下从几个方面具体分析下优化方案

页面内容的优化

1.减少http的请求数
这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，
接收数据这样一个消耗时间成本和资源成本的复杂的过程。
2.减少页面跳转，避免重定向
3.延迟加载资源（一般在图片比较多的页面 按需加载 滚动到才去加载），延迟加载组件，预加载组件
4.减少DOM的数量（页面中存在大量的dom元素 会导致javascript遍历dom的效率变慢）
5.减少iframe的数量
iframe提供了一个简单的方式把一个网站的内容嵌入到另一个网站中，但是它的创建速度比其他包括javascript和css的元素的创建 慢了1-2个数量级的）
6.避免出现404 http请求时间消耗是很大的，因此使用http请求一个没有用处的响应（比如404找不到页面或者资源），是没必要的，这样会降低用户体验
7.使用ajax缓存
8.减少DNS的查询次数

css优化

1.将样式表置顶（将css放在HEAD标签中，防止浏览器有可能还未下载和解析到css就开始渲染页面）
2.避免css表达式
3.用link代替@import
4.避免使用filters
5.css文件压缩合并

js代码优化

1.将脚本置底（将脚本内容在页面信息内容加载完成之后再加载）
2.使用外部js和css文件
在实际使用中使用外部文件可以提高页面速度，因为javascript文件和css文件都能在浏览器中产生缓存
3.去掉重复脚本，避免重复请求
4.减少DOM的访问（因为修改和访问DOM元素会造成页面元素的重绘和重排，循环对DOM操作更是会减慢页面的加载速度）
5.js文件压缩合并
6.开发智能的数据处理程序【考验开发者能力】
7.javascript代码使用注意： 谨慎使用with，尽量不用eval，减少作用域链的查找

图片的优化

1.优化图片大小
2.使用CSS Sprite优化图片（精灵图也叫雪碧图）
3.不要在html中缩放图片
4.使用小且可缓存的favirote.ico

减少cookie的传输

1.cookis包含在每次的请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据要写入cookie要慎重 尽量减少cookie的传输量
2.针对web组件 使用域名无关的cookie

浏览器端使用缓存

css、js、logo、图标这些静态文件资源更新的频率较低，而这些又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器端， 可以很好的改善性能
用法：通过设置http的头部的Cache-Controlhe Expries属性，可设定浏览器的缓存，缓存时间可以自定义

服务器端压缩

1.在服务器端对文件进行压缩，在浏览器上对文件解压缩，可有效减少通信传输的数据量，文本文件的压缩率可达80%以上， 因此，HTML,CSS ,JavaScript文件 启用gzip压缩，可达到比较好的效果，但是压缩会对服务器和浏览器产生一定的压力，在通信宽带良好，而服务器资源不足的情况下要权衡考虑
2.使用内容分发网络（CDN）：网网站内容分散到多个。处于不同地域的服务器上可以加快下载速度
3.提前刷新缓冲区
4.对ajax请求 使用GET方法
5.避免空的src
6.设置ETag：ETags(Entity tags，实体标签) 是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中原始内容是否匹配的一种机制

以上 就是总结整理的常用的web前端优化的一些方案，个人觉得不需要能够答出全部的方法 能知道一部分 并搞清楚原因就行

内容全部来源于网络，若有侵权请联系删除