zoukankan      html  css  js  c++  java
  • 对于Web性能优化, 了解和经验

    我们在发布项目之前压缩CSS和JavaScript源代码,这样文件体积就变小了,用户加载必要资源所花的时间也就更短了。

    压缩源码和图片

    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性能优化这个词既可以解读成页面加载速度(Page Speed)的优化,也可以解读成页面渲染性能(Page Performance)的优化。或者是二者的集合。所以,应聘者如果能在这个问题上多做一些分析,会有很高的加分。但是A君在网络性能方面的研究只是浅 尝辄止,停留在压缩资源方面,这说明他还没有足够理解HTTP协议本身。

    关于网络性能和HTTP协议,作为大公司的前端工程师是非常看重的,因为每一个页面都会有亿万用户访问量,任何一点对服务器带宽压力都会积少成多,最终造成很大的成本。关于这方面的技术详解,我在后面会有一篇单独的文章来分析。

  • 相关阅读:
    PAT (Advanced Level) Practise:1008. Elevator
    练习题-二维数组中的查找
    PAT (Basic Level) Practise:1028. 人口普查
    PAT (Basic Level) Practise:1014. 福尔摩斯的约会
    PAT (Basic Level) Practise:1019. 数字黑洞
    c++ 二进制文件读写
    c/c++ linux/windows 读取目录下的所有文件名
    C 语言实现 Linux touch 命令
    c++读写csv
    linux nohup【转】
  • 原文地址:https://www.cnblogs.com/it1042290135/p/7833171.html
Copyright © 2011-2022 走看看