高级12-性能优化

pc端考虑点:
文件小
网速快
请求次数少

移动端考虑点：
网速慢
耗电
流量贵
网络不稳定

js及css对网页渲染的影响

js会阻塞渲染

//html结构

  
  
  

当浏览器遇到，浏览器会下载a.js然后执行，执行完毕后才会读下面的内容，js根本不往下看直接下载后执行，执行的时候回阻塞页面后续的内容（包括渲染，其他资源下载）因为js会改变文档的内容，js放上面一个body都看不到，假如写10个js页面一直白屏，js放下面，用户可以先看到正常的页面，后再去点击页面，此时js可能正好下载完。而且此时js可以访问到上面所有的节点

css可能会阻塞渲染，但是不阻塞下载

  
  
  
  
  
  


  
123

此时css不会渲染下面的div，看到css文件会看看还有没有其他css文件要下载，浏览器认为css没有下载完没有必要渲染下面的div。如果css放在下面，先是没有样式的页面后是有样式的页面，用户体验会差很多

dns可以知道每个ip对应的域名，是一个给它一个域名返回一个ip的服务
浏览器运行原理
dns查询
发起http请求
处理http响应
下载内容、解析内容、绘制图像

优化方法：

1.减少http请求数，每发起一个域名请求就会重复上述操作

• 压缩合并js文件
• 压缩合并css文件
• 图片压缩（主要）

2.css放在head中 ，js放在body最后

3.图片懒加载，数据懒加载（点击查看更多），功能懒加载

4.使用CDN（Content Delivery Network）
简单的静态资源服务器
把文件放在离用户更近的地方，一般会部署很多个地方，通过减少物理距离来加快下载速度，cdn都有单独的域名，一般把不经常变的内容放在cdn

5.dom操作优化
使用JavaScript访问DOM元素比较慢，因此为了获得更多的页面应做到以下几点：
缓存已访问过的有关元素
线下更新完后再将其添加到文档树中
避免使用JavaScript来修改页面布局

6.若js中涉及大量的运算，尽量少使用嵌套循环，优化查找算法、排序算法

7.添加Cacher -control头
响应中可以添加这个Cacher -control:max-age=300，单位是秒,下次再请求完全一样的url，不要再请求了，会返回上一次前请求过的内容，此时是操作按回车，如果你按刷新就会重新请求

8.根据域名划分页面内容，提高下载速度

9.减少dns查找次数
减少主机名的数量还可以减少页面中并行下载的数量，减少dns查找次数可以节约响应时间，但是减少并行下载却会增加响应时间，此时需要我们在减少dns查找次数和保持较高程度并行下载两者之间权衡了

10.不要在html中缩放图像
不要为了在html中设置长宽而使用比实际需要大的图片，如果需要

就应该使用100x100像素的图片而不是500x500

11.避免使用滤镜

12.使用iframe的数量最小
iframe元素可以在父文档中插入新HTML文档。
优点：解决加载缓慢的第三方内容，如图标广告等加载问题；Security sanbox ；并行加载脚本
缺点：即使内容为空加载也需要时间；也会阻塞页面加载

13.不要出现404错误，因为404会导致页面卡住一直等待没有用处的响应