前端技术的逐渐成熟,还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。

  1. 按照普通设计,当网站cookie信息有1 KB、网站首页共150个资源时,用户在请求过程中需要发送150 KB的cookie信息,在512 Kbps的常见上行带宽下,需要长达3秒左右才能全部发送完毕。 尽管这个过程可以和页面下载不同资源的时间并发,但毕竟对速度造成了影响。 而且这些信息在js/css/images/flash等静态资源上,几乎是没有任何必要的。 解决方案是启用和主站不同的域名来放置静态资源,也就是cookie free。
  2. 将css放置在页面最上方应该是很自然的习惯,但第一个css内引入的图片下载是有可能堵塞后续的其他js的下载的。而在目前普遍过百的整页请求数的前提下,浏览器提供的仅仅数个并发,对于进行了良好优化甚至是前面有CDN的系统而言,是极大的性能瓶颈。 这也就衍生了domain hash技术来使用多个域名加大并发量(因为浏览器是基于domain的并发控制,而不是page),不过过多的散布会导致DNS解析上付出额外的代价,所以一般也是控制在2-4之间。 这里常见的一个性能小坑是没有机制去确保URL的哈希一致性(即同一个静态资源应该被哈希到同一个域名下),而导致资源被多次下载。
  3. 再怎么提速,页面上过百的总资源数也仍然是很可观的,如果能将其中一些很多页面都用到的元素如常用元素如按钮、导航、Tab等的背景图,指示图标等等合并为一张大图,并利用css background的定位来使多个样式引用同一张图片,那也就可以大大的减少总请求数了,这就是css sprites的由来。
  4. 全站的js/css原本并不多,其合并技术的产生却是有着和图片不同的考虑。 由于cs/js通常可能对dom布局甚至是内容造成影响,在浏览器解析上,不连贯的载入是会造成多次重新渲染的。因此,在网站变大需要保持模块化来提高可维护性的前提下,js/css combine也就自然衍生了,同时也是minify、compress等对内容进行多余空格、空行、注释的整理和压缩的技术出现的原因。
  5. 随着cookie free和domain hash的引入,网站整体的打开速度将会大大的上一个台阶。 这时我们通常看到的问题是大量的请求由于全站公有header/footer/nav等关系,其对应文件早已在本地缓存里存在了,但为了确保这个内容没有发生修改,浏览器还是需要请求一次服务器,拿到一个304 Not Modified才能放心。 一些比较大型的网站在建立了比较规范的发布制度后,会将大部分静态资源的有效期设置为最长,也就是Cache-Control max-age为10年。 这样设置后,浏览器就再也不会在有缓存的前提下去确认文件是否有修改了。 超长的有效期可以让用户在访问曾访问过的网站或网页时,获得最佳的体验。 带来的复杂性则体现在每次对静态资源进行更新时,必须发布为不同的URL来确保用户重新加载变动的资源。
  6. 即使是这样做完,仍然还存在着一个很大的优化空间,那就是很多页面浏览量很大,但其实用户直接很大比例直接就跳走了,第一屏以下的内容用户根本就不感兴趣。 对于超大流量的网站如淘宝、新浪等,这个问题尤其重要。 这个时候一般是通过将图片的src标签设置为一个loading或空白的样式,在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了,只是对一些散布不合理,或第一页底部的资源会有一定的帮助。 主要意图还是降低带宽费用。

总的来说,各类技术都是为了能让用户更快的看到页面进行下一步操作,但却不必将宝贵的资源浪费在没有必要的重复请求、不看的内容上。

转载于:https://www.cnblogs.com/littlehb/p/4141923.html

前端代码优化的基本原则相关推荐

  1. code-review之前端代码优化汇总

    点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 所谓无规矩不成方圆,前端时间在团队 code-review 中发现,推荐大家可以大致过一遍,形成自己的编码习惯 原文地址:juejin.c ...

  2. html排行榜代码手机版,移动端前端代码优化丨排名VS体验

    移动端优化排名,成为现搜索引擎营销的新势头,手机网站参与移动端排名,成为获取流量一重量级选手,参与排名比不可少的因素是响应速度,很明显,相对于PC来说,移动端用户的耐性相对更低,手机版网站的加载速度成 ...

  3. 前端代码优化(持续更新中)

    优化 1.if语句优化 1.初学 returnWeekday() {let string = '今天是星期'const date = new Date().getDay()if (date === 0 ...

  4. 前端面试宝典 html css js ajax es6

    面试宝典 一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...

  5. 前端面试宝典(内容很多,也有很多重复)

    文章转自:http://blog.csdn.net/liuwengai/article/details/52751565?locationNum=1&fps=1 二.JS基础 1.javasc ...

  6. 2015年3月-前端开发月刊

    1. 创业 2. 职业|项目管理 3. git 4. 知乎(zhihu) 5. 其它 6. Angular 7. 看书学习 8. 移动开发 9. Html5 10. CSS3 11. Javascri ...

  7. 前端性能优化实践 | 百度APP个人主页优化

    性能是每个前端工程师都应该关注的话题,通用的优化手段已有许多文章和实践,就不再赘述,本篇以百度 App 个人主页为例,聊聊针对业务特点进行的一些性能优化实践.适用于:传统意义的优化手段能用的都用了:打 ...

  8. WEB前端面试2014阿里旺旺

    NO1.下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等.请使用css3中的功能实现它们的布局. 已知HTML结构是: <div clas ...

  9. 前端资料整理--持续更新中

    前端网站 1.http://www.wufangbo.com/   前端开发-武方博   包含有前端相关的各种文章.资源.开发工具等 2.http://www.w3cfuns.com/   前端网-云 ...

最新文章

  1. 谱减法降噪的matlab代码实现
  2. pycharm自带python.exe_Pycharm自带Git实现版本管理的方法步骤
  3. shell脚本报错:-bash: xxx: /bin/sh^M: bad interpreter: No such file or directory
  4. python爬新闻并保存csv_用python爬取内容怎么存入 csv 文件中
  5. 轻松搭建基于Serverless的Go应用(Gin、Beego 举例)
  6. MS SQL入门基础:删除数据库
  7. filter过滤器_Java过滤器Filter讲解(Java基础)
  8. C# 直接选择排序(史上最清晰,最通俗)
  9. 前端安全——XSS攻击与防御原理详解
  10. Android 如何修改factory mode下FM的默认测试频点及阀值
  11. android正确释放webview,解决Android WebView内存释放
  12. 软件测试的7个基本原则
  13. Verdi调整字体大小
  14. Debian配置国内源
  15. 【入门】1536- 前端 Flutter 入门指南
  16. 圣诞节儿童什么礼物好呢?精选实用型的圣诞护眼小台灯
  17. 如何快速实现邮箱注册(项目案例)
  18. 信号数据shannon entropy计算
  19. GaRy-Liang的linux成长日记3-自动化安装
  20. 苹果电脑错误代码43_苹果最臭名昭著的代码错误

热门文章

  1. win10安装oracle11g 服务端及配置详解
  2. 帆软实现单元格可编辑内容并保存
  3. matplotlib图表显示中文三种办法
  4. python图像跟踪代码_python如何实现图像外边界跟踪 python实现图像外边界跟踪代码示例...
  5. bax在计算机英语的意思,BaX(X=S,Se,Te)的电子结构计算
  6. log4j2 mysql_[简单]log4jdbc-log4j2配置简记
  7. Junit使用方法总结
  8. PyTorch 学习笔记(一):让PyTorch读取你的数据集
  9. Java 实验5 T2 二进制数转换为十六进制数
  10. matplotlib 绘图代码库(自用)