压缩源代码和图片
  JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色、去掉一些PNG格式信息等。
 
选择合适的图片格式
  如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。
合并静态资源
  包括CSS、JavaScript和小图片,减少HTTP请求。
开启服务器端的Gzip压缩
  这对文本资源非常有效,对图片资源则没那么大的压缩比率。
使用CDN
  或者一些公开库使用第三方提供的静态资源地址(比如jQuery、normalize.css)。一方面增加并发下载量,另一方面能够和其他网站共享缓存。
延长静态资源缓存时间
  这样,频繁访问网站的访客就能够更快地访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。 把CSS放在页面头部,把JavaScript放在页面底部 这样就不会阻塞页面渲染,让页面出现长时间的空白。 每一个条目都可以进一步深层挖掘下去。
 
 

  Web性能优化分为服务器端和浏览器端两个方面。
  Web性能优化分为服务器端和浏览器端两个方面。
此外,由于中文的歧义性,Web性能优化这个词既可以解读成页面加载速度(Page Speed)的优化,也可以解读成页面渲染性能(Page Performance)的优化。或者是二者的集合。所以,应聘者如果能在这个问题上多做一些分析,会有很高的加分。但是A君在网络性能方面的研究只是浅 尝辄止,停留在压缩资源方面,这说明他还没有足够理解HTTP协议本身。
  关于网络性能和HTTP协议,作为大公司的前端工程师是非常看重的,因为每一个页面都会有亿万用户访问量,任何一点对服务器带宽压力都会积少成多,最终造成很大的成本。关于这方面的技术详解,我在后面会有一篇单独的文章来分析。
 

互联网:
  得益于全世界都在互联网上共享的资源,现在的学习者有了更多的选择,比如关于Web开发基础教学的W3CSchool,还有海量的技术博客。我个人喜欢订阅一些英文大站,比如Smashing Magazine、tuts+等。我在读大学的时候,Google Reader还没有永久关闭,那时候我很喜欢用RSS来关注这些站点的更新情况。Google Reader下线后,就基本上废弃了RSS阅读的习惯,转而用一些社交网站来追踪更新情况,但是有时还是会淹没在大量无用的信息里面。
 

关于WEB 性能优化 (摘抄)的更多相关文章

  1. Web性能优化-合并js与css,减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  2. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

  3. Web性能优化系列

    web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...

  4. 移动web性能优化笔记

    移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

  5. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  6. web性能优化之--合理使用http缓存和localStorage做资源缓存

    一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的ma ...

  7. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  8. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  9. Web 性能优化: 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

随机推荐

  1. ThinkPHP3.2设置404跳转页面

    在ThinkPHP3.2版本中当我们访问不存在的页面时会出现非常不友好错误提示页面,类如下图: 解决办法: 1.在ThinkPHP3.2详细的介绍了该框架下的ThinkPHP惯例配置文件convent ...

  2. Owin的URL编码怎么搞?以前都是HttpUtility.UrlEncode之类的,现在连system.web都没了,肿么办?

    Owin的URL编码怎么搞?以前都是HttpUtility.UrlEncode之类的,现在连system.web都没了,肿么办? 编码: Uri.EscapeDataString(name) 解码: ...

  3. WPF datagrid 加入图片

    <DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...

  4. php的基础

    js是前段脚本语言 php是后端脚本语言 一.所建的文件都要存在wap下的www里面 二.所有的文件名都不能包含中文 三.通过输入 localhost/www下的文件名称,可以浏览 四.在DW内新建站 ...

  5. Android调用Jni,非常简单的一个Demo

    step1:创建一个android项目       Project Name:jnitest       Build Target: Android 1.6       Application Nam ...

  6. linux自定义系统调用

    1 Linux3.10.21内核系统调用设置 以前看的内核版本时2.6.11的,里面的系统调用设置一目了然啊!在文件entry.S中直接定义了sys_call_table表,并在这个文件中用各个系统调 ...

  7. 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程

    使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...

  8. Oracle在线重定义DBMS_REDEFINITION 普通表—>分区表

    实验环境:RHEL 6.4 + Oracle 11.2.0.3实验:在线重定义 普通表 为 分区表,包括主键对应的索引都改造为分区索引. 1,构造普通表t_objects conn test1/tes ...

  9. DotNet程序集解析

    在.NET Framework框架中,程序集是重用.安全性以及版本控制的最小单元.程序集的定义为:程序集是一个或多个类型定义文件及资源文件的集合.程序集主要包含:PE/COFF,CLR头,元数据,清单 ...

  10. 【面试】输出"蛇形"矩阵

    一.题目描述 腾讯实习在线笔试的一道题目. 根据输入的数字(< 1000),输出这样的"蛇形"矩阵,如下.输入n,输出(n * n)阶矩阵,满足由外到内依次增大. 如: 输入 ...