性能优化

pakolagij 发布于2019-08-22 15:58 / 2137人阅读

摘要：性能优化如何进行网站性能优化方面减少请求合并文件精灵减少查询查询完成之前浏览器不能从这个主机下载任何任何文件。

性能优化

如何进行网站性能优化

content方面

减少HTTP请求：合并文件、CSS精灵、inline Image

减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询

避免重定向：多余的中间访问

使Ajax可缓存

非必须组件延迟加载

未来所需组件预加载

减少DOM元素数量

将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量

减少iframe数量

不要404

Server方面

使用CDN

添加Expires或者Cache-Control响应头

对组件使用Gzip压缩

配置ETag

Flush Buffer Early

Ajax使用GET进行请求

避免空src的img标签

Cookie方面

减小cookie大小

引入资源的域名不要包含cookie

css方面

将样式表放到页面顶部

不使用CSS表达式

不使用IE的Filter

Javascript方面

将脚本放到页面底部

将javascript和css从外部引入

压缩javascript和css

删除不需要的脚本

减少DOM访问

合理设计事件监听器

图片方面

优化图片：根据实际颜色需要选择色深、压缩

优化css精灵

不要在HTML中拉伸图片

保证favicon.ico小并且可缓存

移动方面

保证组件小于25k

Pack Components into a Multipart Document

你有用过哪些前端性能优化的方法？

减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

当需要设置的样式很多时设置className而不是直接操作style

少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)

图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳

避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

谈谈性能优化问题

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载

请求带宽：压缩文件，开启GZIP

代码层面的优化

用hash-table来优化查找

少用全局变量

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

用setTimeout来避免页面失去响应

缓存DOM节点查找的结果

避免使用CSS Expression

避免全局查询

避免使用with(with会创建自己的作用域，会增加作用域链长度)

多个变量声明合并

避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率

尽量避免写在HTML标签中写Style属性

前端性能优化最佳实践？

性能评级工具（PageSpeed 或 YSlow）

合理设置 HTTP 缓存：Expires 与 Cache-control

静态资源打包，开启 Gzip 压缩（节省响应流量）

CSS3 模拟图像，图标base64（降低请求数）

模块延迟(defer)加载/异步(async)加载

Cookie 隔离（节省请求流量）

localStorage（本地存储）

使用 CDN 加速（访问最近服务器）

启用 HTTP/2（多路复用，并行加载）

前端自动化（gulp/webpack）

混合云服务器托管性能优化优化系统性能网站性能优化页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93915.html

前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
Android 性能优化之工具和优化点总结

摘要：查找内存泄露可以用等工具，具体怎么解决，有哪些泄露点，以后有时间也写篇总结。替换矢量图尽管矢量图有诸多优点，但矢量图的绘制是消耗性能的。因此想要做好性能优化，强化基本功不可少。Android性能优化学习最近公司主抓性能优化工作，借此春风也学习到了许多Android性能优化方面的知识。由于组内队友的给力，优化的成果也是比较喜人。同时也学习和实践了不少知识，特此记录。 1.性能优化分析工具...

CoyPan 2019-04-23 17:14 评论0 收藏0
[译]GC专家系列5－Java应用性能优化的原则

摘要：在本文中我将会介绍应用性能优化的一般原则。性能优化的流程图摘取自和合著的性能，描述了应用性能优化的处理流程。例如，对每台服务器，你面临着为单个分配堆内存和运行个并为每个分配堆内存的选择。不过位能使用堆内存最大理论值只有。原文链接：http://www.cubrid.org/blog/dev-platform/the-principles-of-java-application-per...

lufficc 2019-08-14 15:11 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
Android性能优化问题总结

摘要：性能优化第七篇严苛模式检测耗时与内存问题意思为严格模式，是用来检测程序中违例情况的开发者工具。但是用来评测一个应用是否真的卡顿存在两个问题，我们可以使用帧率检测。　　性能优化这块，分为UI性能优化、内存优化、数据库优化、网络优化、耗电优化等等。可以从1.如何发现问题，2.怎么解决问题，3.解决效果对比，这几个方面去描述。举个简单例子——UI优化，可以从 UI出现什么问题(卡顿不流畅)，怎么查...

yibinnn 2019-04-23 17:18 评论0 收藏0