认识达内从这里开始

优化问题是程序员需要长期关注的问题之一，而今天我们就通过案例分析来了解一下，web前端开发常都包含了哪些优化类型。

1、内容优化

(1)减少HTTP请求数:这条策略是重要有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSSSprites整合图像，InlineImages(使用data：URLscheme在实际的页面嵌入图像数据)，合理设置HTTP缓存等。

(2)减少DNS查找

(3)避免重定向

(4)使用Ajax缓存

(5)延迟加载组件,预加载组件

(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。

(7)小化iframe的数量：iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的，它只会降低用户体验而不会有一点好处。

2、服务器优化

(1)使用内容分发网络(CDN)：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。

(2)GZIP压缩

(3)设置ETag：ETags(Entitytags，实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

(4)提前刷新缓冲区

(5)对Ajax请求使用GET方法

(6)避免空的图像src

3、Cookie优化

(1)减小Cookie大小

(2)针对Web组件使用域名无关的Cookie

4、CSS优化

(1)将CSS代码放在HTML页面的顶部

(2)避免使用CSS表达式

(3)使用<link>来代替@import

(4)避免使用Filters

5、javascript优化

(1)将JavaScript脚本放在页面的底部。

(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

(3)缩小JavaScript和CSS

(4)删除重复的脚本

(5)小化DOM的访问：使用JavaScript访问DOM元素比较慢。

(6)开发智能的事件处理程序

(7)javascript代码注意：谨慎使用with,避免使用evalFunction函数,减少作用域链查找。

6、图像优化

(1)优化图片大小

(2)通过CSSSprites优化图片

(3)不要在HTML中使用缩放图片

(4)favicon.ico要小而且可缓存

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。