博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端常见性能优化方法
阅读量:6604 次
发布时间:2019-06-24

本文共 1192 字,大约阅读时间需要 3 分钟。

1.内容优化

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

(2)减少DNS查找
(3)避免重定向(302.303)
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件
(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
(7)最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
(8)避免404:HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。

2.Cookie优化

(1)减小Cookie大小

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

3.css优化

(1)将CSS代码放在HTML页面的顶部(在文档<head/>内加载你的样式表,这样做的好处是:提高网页渲染性能,避免网页出现白屏或者是没有样式的内容)

(2)避免使用CSS表达式
(3)使用<link>来代替@import
(4)避免使用Filters

4.js优化

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

(2)将JavaScript和CSS作为外部文件来引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问:使用JavaScript访问DOM元素比较慢。
(6) 减少作用域链查找
(7) 在 Javascript中使用”+”号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。

5.图片优化

(1)合理控制图片大小

(2)通过CSS Sprites优化图片 (这是减少图像请求的有效方法,把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分;合并后的图片会比分离的图片总和要小,这是因为它降低了图片自身的开销)
(3)不要在HTML中使用缩放图片
(4)图标尽量使用矢量图标

转载于:https://www.cnblogs.com/wz-1204/p/8854777.html

你可能感兴趣的文章
Java Swing3-MyDialog的基本实现
查看>>
生成器读取大文件应用
查看>>
垃圾回收监视和分析
查看>>
sublime安装sftp和ctags插件
查看>>
使用 openssl 生成证书
查看>>
如何在CI中写工具类,在哪个目录写
查看>>
SQLAlchemy的使用---增删改查
查看>>
C#和JavaScript交互(asp.net前台和后台互调)总结 (转)
查看>>
(转载)身份证验证
查看>>
Access数据库大数据量的相关测试分析
查看>>
ios中调用友盟分享时qq可以分享但是微信失败,只显示文字,网页链接没有出现...
查看>>
HDU 3954 Level up(多颗线段树+lazy操作)
查看>>
hdu Stars(树状数组)
查看>>
jquery中ajax方法load get post与脚本文件如php脚本连接时,脚本怎样接受数据?
查看>>
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
查看>>
python的对象的属性(即对象的成员)是动态的
查看>>
南邮CTF--SQL注入题
查看>>
三种数据库访问——Spring3.2 + Hibernate4.2
查看>>
datasg中的数据的存储结
查看>>
iOS 多线程 之 GCD(大中枢派发)(一)
查看>>