转眼间2020年就要结束了，有些人已经成为前端界的大神，也有人还在学习的路上，曾经分享过很多关于前端知识的文章，从简单知识到复杂代码，不知道你们是否从中获得收获，如今前端开发工程师已经是企业中不可缺少的部分，前端的知识也需要我们不断总结学习，接下来介绍下前端性能优化总结。
 
 
1.原则
 
多使用内存，缓存或者其他方法
 
减少CPU计算，减少网络请求
 
减少IO操作（硬盘读写）
 
2.加载资源优化
 
静态资源的合并和压缩。
 
静态资源缓存（浏览器缓存策略）。
 
使用CDN让静态资源加载更快。
 
3.渲染优化
 
CSS放head中，JS放body后
 
图片懒加载
 
减少DOM操作，对DOM操作做缓存
 
减少DOM操作，多个操作尽量合并在一起执行
 
事件节流
 
尽早执行操作 DOMContentLoaded
 
4.示例
 
4.1 资源合并
 
a.js b.js c.js — abc.js
 
4.2 缓存
 
通过连接名称控制缓存
 
只有改变内容的时候，链接名称才会改变。
 
4.3 懒加载
 
 
4.4 缓存dom查询
 
 
4.5 合并dom插入
 
 
4.6 事件节流
 
监听文字改变事件，无操作100毫秒后执行操作，不用每次触发。
 
 
事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。
 
补充
 
异步加载
 
非核心代码异步加载 – 异步加载的方式 – 区别
 
1.动态脚本加载
 
用js创建
 
2.defer
 
3.async
 
 
关于 defer，我们还要记住的是它是按照加载顺序执行脚本的
 
标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
 
浏览器缓存
 
浏览器缓存 – 缓存的分类 – 缓存的原理
 
缓存就是html文件在本地存在的副本，
 
强缓存
 
发现有缓存直接用。
 
 
Expires: 绝对时间，判断客户端日期是否超过这个时间
 
Cache-Control：相对时间，判断访问间隔是否大于3600秒
 
//在设定时间之前不会和服务端进行通信了
 
//如果两个都下发以后者为准
 
协商缓存
 
询问服务器缓存是否可以用，在进行判断是否用。
 
Last-Modified/If-Modified-Since
 
第一次请求，respone的header加上Last-Modified（最后修改时间）
 
再次请求，在request的header上加上If-Modified-Since
 
和服务端的最后修改时间对比，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。
 
浏览器收到304的响应后，就会从缓存中加载资源
 
如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新
 
Etag/If-None-Match
 
这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，他可以精确到秒的更高级别。
 
最后
 
如何学好前端开发是关键：
 
前端技术每年都会不断更新，自学前端容易学不到最前沿的课程，学习前端开发建议大家还是要选择培训为好，推荐爱创课堂，是一家专门做前端教育的学校，爱创课堂是一家以就业为导向的前端培训学校，所学习的就是企业所需要的，培养企业最需要的前端工程师为企业理念，授课以实战课程为主，更多的学习大项目对以后工作有帮助，毕业后轻松就业！
 
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
那么如何系统的学习企业实用的web前端技术呢，视频教程、学习路线、
前端学习培训，可以添加威信：kaixin666haoyun 分享给大家前端学习资料。
相信从中会受到启发，找到学习的方向和目标。如大家对前端还有不了解的问题，可以持续关注我。
 
尽管有年月日的划分，但日子毕竟是连在一起过的，所以今年未完成的学习安排并不会在2021年到来的那一刻戛然而止。2021年，想必会是忙碌的一年。预祝大家2021年，加班少点，工资多点！

探讨web性能优化方法，一直是前端开发者不懈努力的事情，获得总结的方法也很多，看了几位大牛的总结，特此与大家共同分享一下。
 
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
 
1）用户角度：优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
 2）服务商角度：优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
 
1、减少http请求
 
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。
 
减少 HTTP请求数的主要途径包括：
 （1） 资源合并与压缩：合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
 （2）设置 HTTP缓存：缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。
 
2、请减少对DOM的操作
 
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
 网页中元素过多对网页的加载和脚本的执行都是沉重负担，500个元素和5000个元素在加载速度上会有很大差别。
 
解决办法：
 （1）修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
 
（2）减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
 
3、使用JSON格式来进行数据交换
 
基本原理：
 
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
 
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
 
4、精简Javascript和CSS，注意引用位置
 
精简就是将js和css中空格和注释全部去掉，统计表明，精简后的文件平均减少了21%。
 可使用常见的压缩工具对js，css文件压缩为min版本。
 
CSS制定，Js至底：
 css放在网页head中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已经下载的网页内容，这对内容多的网页很重要，用户不用一直等在一个白屏上，而是可以先看到已经下载的内容，如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器起在实现时都会努力避免重绘
 
5、使用CDN（内容分发网络）
 
减少网页下载的内容，提高下载速度可以通过内容分发网络-CDN来提升，CDN通过部署在不同地区的服务器来提升客户的下载速度，可以通过免费的CDN供应商来分发网页资源。
 
6、压缩图片和使用图片Sprite技术
 基本原理:
 
注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
 现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
 
1.缩小图片分辨率；
 
2.改变图片格式；
 
3.降低图片保存质量。
 
7、减小cookie大小
 cookie被用来做认证或个性化设置，其信息被包含在http报文当中，对于cookie我们要注意以下几点，来提高请求响应速度
 
1）将cookie大小减到最小
 2）注意cookie设置的domain级别，没有必要情况下不要影响到sub-domian
 3）注意设置合适的过期时间，比较长的过期时间可以提高响应速度
 
8、图片延迟加载
 延迟加载时提高网页首屏显示速度的有效办法，当图片元素进入窗口可视区域的时候，它就会改变图像的src属性，从服务端加载所需的图片，这也是一个异步的过程。
 对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
 
9、缓存ajax
 ajax可以帮助我们异步下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表，所以我们还是要注意应用一些规则提高ajax的响应速度。
 解决方法：
 1）添加Expires或Cache-Control报文头使回复可以被客户端缓存
 2）压缩回复内容
 3）减少DNS查询
 4）避免跳转
 5）配置Etags

Css优化总结
 
      对于css的优化可以从网络性能和css语法优化两方面来考虑。
 
Css性能优化方法如下：
 
1、css压缩
 
Css 压缩虽然不是高端的知识，但是很有用。其原理也很简单，就是把我们css代码中没有用的空白符等删除，达到缩减字符个数的目的。
 
 
 
压缩css代码的工具：
 
A、YUI compressor，可以在线压缩css和js代码。
 
B、gulp自动化构建工具，中的gulp-minify-css。
 
 
 
2、gzip压缩
 
Gzip是一种流行的文件压缩算法，现在应用的十分广泛，尤其实在Linux这个平台上，这个不止是对css，当应用Gzip压缩一个文本时，效果是非常明显的。大约可以减少70%以上的文件大小（这取决于文件中的内容）。
 
在没有 gzip压缩的情况下，web服务器直接把html页面、css脚本以及js脚本发送到浏览器，而支持gzip的浏览器在本地进行解压和解码，并显示原文件。这样我们传输的文件字节数减少了，自然可以达到网络性能优化的目的。Gzip压缩需要服务器的支持，所以需要在服务器端进行配置。
 
 
 
3、合写css（通过少些css属性来达到减少css字节吗的目的）
 
例子：
 
background:#000 url(image.jpg) top left no-repeat;
 
font:font-style   font-weight    font-size  font-familiy;
 
margin:5px 10px 20px 15px;
 
padding:5px;
 
border:2px 5px 10px 3px;
 
border-top:2px 5px 10px 3px;
 
 
 
4、利用继承
 
Css的继承机制可以帮我们在一定程度上缩减字节数，我们知道css很多属性可以继承，即在父容器设置了默认属性，子容器会默认也使用这些属性。
 
可继承的属性举例：
 
所有元素都可以继承的属性：visibility 、cursor
 
内联元素和块元素可以继承的属性：
 
Letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
 
块状元素可以继承的属性：
 
Text-indent、text-align；
 
列表元素可以继承的属性：
 
List-style、list-style-type、list-style-position、list-style-image
 
 
 
表格元素可以继承的属性：
 
Border-collapse
 
 
 
不可以继承的属性：
 
Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi
 
 
 
5、抽离、拆分css，不加载所有css
 
抽离原则：在很多时候，我们把页面通用的css写到了一个文件，这样加载一次后，就可以利用缓存，但这样做兵不适合所有的场景。所以抽离拆分的时候要考虑好。
 
 
 
6、css放在head中，减少repaint和reflow
 
Css方法在页面的顶部，有利于优化的原因？？？
 
当浏览器从上到下一遍下载html生成dom tree，一边根据浏览器默认以及现有css生成render tree来渲染页面。当遇到新的css的时候下载并结合现有css重新生成render tree。则刚才的渲染功能就全废了。当我们把所有css放在页面的顶部，就没有重新渲染的过程了。
 
 
 
脚本中应该尽量少用repaint和reflow：
 
Reflow：当dom元素出现隐藏/显示，尺寸变化。位置变化的时候，逗号让浏览器重新渲染页面，以前的渲染工作白费了。
 
Repaint：当元素的背景颜色，边框颜色变化的时候，不会引起reflow的变化，是会让浏览器重新渲染该元素。
 
 
 
7、避免使用通配符或隐式通配符：visible.
 
8、避免层级或过度限制css（css是从右向左解析的）
 
A、不要用标签或class来限制id。
 
#test .info   /div #test这都属于画蛇添足
 
Id已经可以唯一而且快速的定位到一个元素了。
 
 
 
B、不要用标签限制class
 
Div .info  不好
 
在css代码编写中，如果直接使用class不能达到目的，一般是class设计出现了问题，css需要重构。
 
C、尽量使用最具体的类别，避免使用后代选择器，在css选择器中，后代选择器非但没有加快css查找，反而后代选择器是css中耗费最贵的。
 
 
 
 
 
JavaScript优化总结
 
1、避免全局查找
 
在一个函数中尽量将全局对象存储为局部变量来查找，因为访问局部变量的数要更快一些。
 
function(){
 
alert(window.location.href+window.location.host);
 
}
 
修改为：
 
funciton(){
 
var location=window.location;
 
alert(location.href+location.host);
 
}
 
 
 
2、定时器
 
如果针对的是不断运行的代码，不应该使用setTimeout，而应该使用setInterval。因为setTimeout每一次都会初始化一个定时器。而setInterval只会在开始的时候初始化一个定时器。
 
var timeoutTimes=0;
 
function timeout(){
 
      timeoutTimes++;
 
      if(timeoutTimes<10){
 
           setTimeout(timeout,10);
 
      }
 
}
 
修改为：
 
var intervalTimes=0;
 
function interval(){
 
      intervalTimes++;
 
      if(intervalTimes>=10){
 
           clearInterval(interval)''
 
      }
 
}
 
var interval = setInterval(interval,10);
 
 
 
3、字符串连接
 
如果需要连接多个字符串，应该少使用+=：
 
如
 
s+=a;s+=b;s+=c;
 
修改为：
 
s+=a+b+c;
 
而如果是收集字符串，比如多次对同一个字符进行+=操作的话，最好使用一个缓存，使用js数组来收集，最后join方法连接起来。
 
var buf=[];
 
for(var i=0;i<100;i++){
 
      buf.push(i.toString());
 
}
 
var all=buf.join("");
 
 
 
4、避免with语句
 
和函数类似，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度。犹豫额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的低吗要慢，在能不使用with语句的时候，尽量不要使用with语句。
 
with(a,b,c,d){
 
      property1=1;
 
      property2=2;
 
}
 
修改为：
 
var obj=a.b.c.d;
 
obj.property1=1;
 
obj.property2=2;
 
 
 
5、数字转为字符串
 
一般用“”+1来将数字转为字符串，虽然看起来比较丑一点，但事实上这个效率最高。
 
（“”+1）>String()>.toString()>new String()
 
 
 
6、浮点数转化为整型
 
很多人喜欢使用pareseInt(),其实parseInt()是用于将字符串转为数字，而不是浮点数和整型之间的转换。我们应该使用的是Math.floor()或Math.round();
 
 
 
7、多个类型声明
 
所有变量可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间。
 
var   A=1,
 
       B=2,
 
       C=3;
 
 
 
8、使用直接量
 
var aTest=new Array();//var aTest=[]
 
var aTest=new Object();//var aTest={}
 
var reg=new RegExp();//var reg=/ /;
 
创建具有特殊性的一般对象，也可以使用字面量。
 
var oFruit=new O();
 
oFruit.color="red";
 
oFruit.name="apple";
 
应改为
 
varoFruit={color:"red",name:'apple'}
 
 
 
9、使用DocumentFragment优化多次的append
 
一旦需要跟新DOM，请考虑使用文档碎片来构建结构，然后再添加到现有的文档中。
 
for(var i=0;i<1000;i++){
 
      varel=document.createElement('p');
 
      el.innerHTML=i;
 
      document.body.append(el);
 
}
 
应该改为
 
varfrag=document.createDocumentFragment();
 
for(var i=0;i<1000,i++){
 
      varel=document.createElement('p');
 
      el.innerHTML=i;
 
      frag.append(el);
 
}
 
document.body.appendChild(frag);
 
 
 
10、使用一次innerHTML复制代替构建dom元素。
 
对于大的dom更改，使用innerHTML要比使用标准的dom方法创建同样的dom结构快的多。
 
varfrag=document.createDocumentFragment();
 
for(var i=0;i<1000;i++){
 
      varel=document.createElement('p');
 
      el.innerHTML=i;
 
      frag.appendChild(el);
 
}
 
document.body.appendChild(frag);
 
应该改为
 
var html=[];
 
for(var i=0;i<1000;i++){
 
      html.push('<p>'+i+"</p>");
 
}
 
document.body.innerHTML=html.join("");
 
 
 
11、使用firstChild和nextSibling代替childNodes遍历dom元素。
 
var nodes=element.childNodes;
 
for(var i=0,l=nodes.length;i<l;i++){
 
      varnode=nodes[i];
 
}
 
应该改为
 
var node=element.firstChild;
 
while(node){
 
      node.node.nextSibling;
 
}
 
 
 
12、删除dom节点
 
删除dom节点之前，一定要删除注册在该节点上的事件，不管是observe方式还是用attachEvent方式注册的事件。否则将会产生无法回收的内存。另外，removeChild和innerHTML=‘’两者之间尽量选择后者，因为在内存泄漏工具中监测的结果是用removeChild无法有效的释放dom节点。
 
 
 
13、简化终止条件
 
由于每次循环过程，都会计算终止条件。所以必须保证他尽可能的快。也就是避免属性查找或其他操作。最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象遍历的时候，提前将length保存到局部变量中，避免循环的每一步重复取值。
 
varlist=document.getElementsByTagName('p');
 
for(var i=0;i<list.length;i++){
 
 
 
}
 
应该改为
 
for(var i=0,l=list.length;i<l;i++){
 
      
 
}
 
 
 
14、使用后测试循环
 
在js中，我们使用for(;;),while(),for(in)三种循环。for(in)的效率极差。因为他需要查询散列键，只要可以，就应该尽量少用。
 
for(;;)和while循环，while优于for（；；）,可能for（；；）结构问题，需要经常的跳转。do..while更好。
 
 
 
15、尽量少用eval函数
 
使用eval函数相当于在运行时，再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用eval带来的安全性问题也是不容忽视的。
 
 
 
16、不要给setTimeout或setInterval传递字符串参数。
 
var num=0;
 
setTimeout(num++,10);
 
应该改为
 
var num=0;
 
function addNum(){
 
      num++;
 
}
 
setTimeout(addNum,10);
 
 
 
17、缩短否定检测
 
if(oTest!="#ff0000"){}
 
if(oTest!=null){}
 
if(oTest!=false){}
 
以上都不太好
 
if(!oTest){这个比较好}
 
 
 
18、可以用三目运算符替换条件分支，可以提高效率。
 
 
 
 
 
Web性能优化
 
1、避免坏请求
 
有时候页面中的html或css会向服务器请求一个不存在的资源，比如图片或者html文件，这会造成浏览器与服务器之间过多的往返请求。
 
类似于：
 
浏览器：“我需要这个图像”
 
服务器：“我没有这个图像”
 
浏览器：“你确定吗？这个文档说你有”
 
服务器：“真的没有”
 
这个降低页面加载速度。因此检查坏连接很有必要。可通过Google的PageSpeed工具，找到问题后，补充相当资源文件或者修改资源链接地址即可。
 
 
 
2、避免css@import
 
使用@import方法引用css文件可能会带来一些影响页面加载速度的问题。比如导致文件按顺序加载（一个加载完成后才会加载另一个），无法并行加载；
 
检查工具：css delivery
 
查到@import url(“style.css”)
 
就替换为：<link….>
 
 
 
3、避免使用document.write
 
在js中，可以使用document.write。在网页上显示内容或者调用外部资源，而通过此方法，浏览器采取一些多余的步骤（下载资源，读取资源）。运行js来了解需要做什么，调用其他资源时，需要重新在执行一次这个过程。由于浏览器之前不知道要显示什么，所以会降低页面加载的速度。
 
要知道，任何能够被document.write调用的资源，都可以通过html调用。这样速度会更快
 
document.write('<scriptsrc="another.js"></script>');
 
改为
 
<scriptsrc="another.js"></script>
 
 
 
4、合并多个外部css文件
 
网站中每使用一个css文件，都会让你的页面加载速度慢一点。可以css delivery工具，来检测页面代码中css文件。然后通过复制粘贴合并成一个。
 
 
 
5、合并多个外部js文件
 
可以用resource check来检测页面中所引用的js文件数，然后可以通过复制粘贴的方法将多个文件合并成一个。
 
 
 
6、通过css sprites来整合图像
 
若页面中有6个小图像，那么浏览器在显示时会分别下载，你可以通过css sprites将这些图像合并成为一个，可以减少页面加载所需要的时间。
 
Css sprites两个步骤：整合图像，定位图像
 
 
 
7、延迟js加载
 
浏览器在执行js代码时，会停止处理页面。当页面中很多js文件或者代码要加载时，将导致严重的延迟。尽管可以使用defer，异步或将js代码放自爱页面底部来延迟js的加载。但这些都不是一个好的解决方案。
 
好方法
 
<script>
 
function downloadJSAtOnload(){
 
      varelement=document.createElement("script");
 
      element.src="defer.js";
 
      document.body.appendChild(element);
 
}
 
if(window.addEventListener){
 
      window.addEventListener('load',downloadJSAtOnload,false);
 
}else if(window.attachEvent){
 
      window.attachEvent('onload',downloadJSAtOnload);
 
}else{
 
      window.οnlοad=downloadJSAtOnload;
 
}
 
</script>
 
 
 
8、启用压缩/Gzip
 
使用gzip对html和css文件进行压缩，通常可以大约节省50%到70%，这样加载页面只需要更少的带宽和更少的时间。
 
 
 
9、如果你的css和js较小，可以将css和js内嵌到html页面中，这样可以减少页面加载所需要的文件数，从而加快页面的加载。
 
 
 
10、用minify css压缩css代码
 
 
 
11、尽量减少dns查询次数
 
当浏览器和服务器建立链接时，它需要进行dns解析，将域名解析为ip地址，然而，一旦客户端需要执行dns lookup时，等待时间将会取决于域名服务器的有效响应速度。
 
虽然所有的isp的dns服务器都能缓存域名和ip地址映射表。但如果缓存的dns记录过期了而需要更新，则可能需要遍历多个dns节点，有时候需要通过全球范围内来找到可信任的域名服务器，一旦域名服务器工作繁忙，请求解析时，就需要排队则进一步延时等待时间。
 
所有减少dns查询次数很重要，页面加载就尽量避免额外耗时，为了减少dns查询次数，最好的解决方法就是在页面中减少不同的域名请求的机会、
 
可通过request checker工具来检测页面中存在多少请求后，进行优化。
 
 
 
12、尽量减少重定向
 
有时候为了特定需求，需要在网页中使用重定向。重定向的意思是，用户的原始请求（如请求A）被重定向到其他的请求（如请求B）；
 
网页中使用重定向会造成网站性能和速度下降，因为浏览器访问网址是一连串的过程，如果访问到一半，而跳转到新的地址，就会重复发起一连串的过程，这将浪费很多时间。所有我们尽量避免重定向。Google建议
 
A、       不要链接到一个包含重定向的页面
 
B、       不要请求包含重定向的资源
 
 
 
13、优化样式表和脚步顺序
 
Style标签和样式表调用代码应该放置在js代码的前面，这样可以使页面的加载速度加快。
 
 
 
14、避免js阻塞渲染
 
浏览器在遇到一个引入外部js文件的<script>标签时，会停下所有工作下载并解析执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。这是页面加载就会停止。
 
谷歌建议删除干扰页面第一屏内容加载 的js，第一屏指的是用户在屏幕中最初看到的页面，无论桌面浏览器，还是手机
 
 
 
15、指定图像尺寸
 
当浏览器加载页面的html时，有时候需要在图片下载完成前，对页面布局进行定位。如果hmtl里的图片没有指定尺寸，或者代码描述的尺寸和实际的图片尺寸不符合时，浏览器需要在图片下载完成后在回溯到该图片，并重新显示，这将消耗额外的时间。
 
最好的页面中每一张图片都指定尺寸，不管在html里的img中，还是在css中。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

https://blog.csdn.net/persistencegoing/article/details/84376427
 
 
 
Web性能优化分为服务器端和浏览器端两个方面。

 一、浏览器端，关于浏览器端优化，分很多个方面
 1、压缩源码和图片
 JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

 2、选择合适的图片格式
 如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

 3、合并静态资源
 包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

 4、开启服务器端的Gzip压缩
 这对文本资源非常有效，对图片资源则没那么大的压缩比率。

 5、使用CDN
 或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

 6、延长静态资源缓存时间
 这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

 7、把CSS放在页面头部，把JavaScript放在页面底部
 这样就不会阻塞页面渲染，让页面出现长时间的空白。



 另，其他具体详解：
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_content.html
1、Web 前端优化最佳实践之 内容篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server.html
2、Web 前端优化最佳实践之 Server 篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_cookie.html
3、Web 前端优化最佳实践之 Cookie 篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html
4、Web 前端优化最佳实践之 CSS 篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_javascript.html
5、Web 前端优化最佳实践之 JavaScript 篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_image.html
6、Web 前端优化最佳实践之 图象篇
 
http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html
7、Web 前端优化最佳实践之 Mobile(iPhone) 篇
 
http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html
如何提高网页效率的14条建议
 
http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html
如何提高网页的效率（下篇）——Use YSlow to know why your web Slow


 二、服务器端优化
 这里就不详解了，直接看专栏吧Web项目开发性能优化解决方案——服务端https://blog.csdn.net/fuyifang/column/info/webxingneng
 
 
 
 
 
希望大家关注我一波,防止以后迷路,有需要的可以加群讨论互相学习java ,学习路线探讨,经验分享与java求职      群号:721515304