美文网首页
前端性能优化方法(2)

前端性能优化方法(2)

作者: 西瓜w | 来源:发表于2017-09-29 18:55 被阅读0次

6. 使用CDN加速(内容分发网络)

基本原理:

CDN的全称是Content Delivery Network,即内容分发网络。

"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

不足之处:

实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

7. 将CSS和JS放到外部文件中引用,CSS放头,JS放尾

JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。

因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

8. 精简CSS和JS文件

基本原理:

有一条非常重要的准则一直没有提到,就是CSS和JavaScript的压缩,直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。

9. 压缩图片和使用图片Sprite技术

基本原理:

注:其实压缩图片和图片精灵是两个方面的技术,可是既然都是关于图片的优化还是放到一块吧。

现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:

1.缩小图片分辨率;

2.改变图片格式;

3.降低图片保存质量。

关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite)。图片精灵就是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

10. 注意控制Cookie大小和污染

基本原理和使用方法:

有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。

因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响;

Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

相关文章

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化方法(2)

    6. 使用CDN加速(内容分发网络) 基本原理: CDN的全称是Content Delivery Network,...

  • Java基础-优化

    网站性能优化 前端性能优化 应用服务器性能优化 解决线程安全的方法: 将对象设计成无状态对象,如Servlet 使...

  • 前端性能优化

    前端性能优化的方法?content方面1,减少HTTP请求:合并文件、CSS精灵、inline Image2,减少...

  • 前端面试2021年5月11号

    前端优化性能方面:答:一、页面/文件级优化1、减少HTTP请求数 解决方法:1)设置缓存2)css、js、img等...

  • 前端工程师面试题(性能优化)

    1. 性能优化1 1.1 页面重构怎么操作? 1.2 什么叫优雅降级和渐进增强? 1.3 前端性能优化的方法? (...

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

网友评论

      本文标题:前端性能优化方法(2)

      本文链接:https://www.haomeiwen.com/subject/ucaiextx.html