这是我参与更文挑战的第9天，活动详情查看： 更文挑战
前言?
学习这些知识，方便自己在优化方面扩展更多的方法。
主要内容?
- 页面内容
- 服务器
- cookies
- css
- javaScript
- 图片
- 移动端
页面内容考虑?
1.减少http的请求次数
1.获取相同的资源时可以将资源合并
// 使用cssScript将背景图片合并成一个文件
//使用雪碧图，利用css选择显示图片的位置,如果图片比较小，可以采用base64编码,例如在webpack中有配置，将本地图片转换成编码
2.减少DNS请求次数
// 维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析
// dns缓存 操作系统，浏览器，应用程序，ISP运营商
// DNS缓存Chrome的过期时间是1分钟
// ie 30min Firebox 1min
// 减少主机名，可以减少dns查找，但也减少并发下载，增加了响应时间
3.减少重定向
//一般http重定向一般通过http状态码301/302，location是重定向的地址
4.缓存Ajax请求
// 使用expires和cache-Control Http
Cache-Control
//public：所有内容都将被缓存（客户端和代理服务器都可缓存）
//private：所有内容只有客户端可以缓存，Cache-Control的默认取值
//no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
//no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
//max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
//from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。
//在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
协商缓存：
//Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高,Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)
//If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200
//Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
//if-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件
//强制缓存：当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
//强制缓存失效，则直接向服务器发起请求
//存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果
//存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存
5.延迟加载
//非页面初始加载必须的资源
//用户交互才会显示的页面
//非首屏渲染所需的数据，组件，样本，图片
//懒加载
6.预加载
// 在浏览器空闲时提前加载将要用到的文件资源
// 无条件预先加载
// 有条件预先加载
7.减少DOM元素数量
//document.getElementsByTagName('*').length（计算当前页面节点）
//web语义化代替更多的div
//尽量少用表格布局
//产生更多的重绘
8.划分内容到不同域名
//极客的每一个板块用的是不同的域名,基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，因此衍生出来了并发限制和HTTP/1.1的Keep alive。 所以，IE6/7在HTTP/1.1下的并发才2，但HTTP/1.0却是4。 而随着技术的发展，负载均衡和各类NoSQL的大量应用，基本已经足以应对C10K的问题。 但却并不是每个网站都懂得利用domain hash也就是多域名来加速访问。因此，新的浏览器加大了并发数的限制，但却仍控制在8以内
9.尽量减少iframe的使用
//优点:
//可以并行下载脚本
//可加载速度较慢的的第三方资源
//缺点:
//没有语义化，不利于seo
//阻碍页面的load
//加载代价昂贵
10.避免404错误
服务器?
11.使用CDN
//把一些静态资源部署到地理位置不同的服务器上，使用户快速拿到资源
//选择用来发送内容的服务器是基于网络距离衡量得到。例如：选跳数最少或者响应时间最短的服务器
12.添加expire或Cache-control
//静态内容可以设置将来很远的时间
//动态内容选择合适的时间
13.使用Gzip
//终端用户的带宽速度，网络服务商，对等交换点的距离
//Gzip压缩通常可以减少70%的响应大小，对某些文件更可能高达90%，比Deflate更高效。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持gzip解码。所以，应该对HTML、CSS、JS、XML、JSON等文本类型的内容启用压缩。
//注意!!! 图片和 PDF 文件不要使用 gzip。它们本身已经压缩过，再使用 gzip 压缩不仅浪费 CPU 资源，而且还可能增加文件体积。
14.配置Etag
15.Ajax请求使用GET方法
//浏览器执行XMLHttpRequest POST请求时分成两步，先发送Http Header，再发送data。而GET只使用一个TCP数据包（Http Header与data）发送数据，所以首选GET方法。
//根据HTTP规范，GET用于获取数据，POST则用于向服务器发送数据，所以Ajax请求数据时使用GET更符合规范
16.避免图片src为空
//虽然src属性为空字符串，但浏览器仍然会向服务器发起一个HTTP请求：
//IE 向页面所在的目录发送请求；
//Safari、Chrome、Firefox向页面本身发送请求；
//Opera不执行任何操作。
//空的href属性也存在类似问题。用户点击空链接时，浏览器也会向服务器发送HTTP请求，可以通过JavaScript阻止空链接的默认的行为。
cookies?
17.减少 Cookie 大小
//Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。
//去除不必要的 Cookie；
//尽量压缩 Cookie 大小；
//注意设置 Cookie 的 domain 级别，如无必要，不要影响到 sub-domain；
//设置合适的过期时间。
18.静态资源使用无Cookie域名
//静态资源一般无需使用Cookie，可以把它们放在使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度。
css?
19.把样式表放在中
//把样式表放在<head>中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。
//这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。
//如果把样式表放在页面底部，一些浏览器为减少重绘，会在 CSS 加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。
20.不要使用CSS表达式
//CSS表达式可以在CSS里执行JavaScript，仅IE5-IE7支持，IE8标准模式已经废弃。 CSS表达式超出预期的频繁执行，页面滚动、鼠标移动时都会不断执行，带来很大的性能损耗。
21.使用替代@import
对于IE某些版本，@import的行为和放在页面底部一样。所以，不要用它。
拓展 defer 与async,defer不阻止docoment渲染
22.不要使用 filter
//AlphaImageLoader为IE5.5-IE8专有的技术，和CSS表达式一样，放进博物馆吧。IE专有的AlphaImageLoader滤镜可以用来修复IE7之前的版本中半透明PNG图片的问题。在图片加载过程中，这个滤镜会阻塞渲染，卡住浏览器，还会增加内存消耗而且是被应用到每个元素的，而不是每个图片，所以会存在一大堆问题。
javaScript?
23.把脚本放在页面底部
//浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。
//一些特殊场景无法将脚本放到页面底部的，可以考虑<script>的以下属性：defer 属性；HTML5 新增的async属性。
24.使用外部JavaScript和CSS
//外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。
//当然，实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码，可以考虑内嵌在页面中，减少HTTP请求数。另外，可以在首页加载完成以后，预先加载子页面的资源。
25.压缩JavaScript和CSS
//压缩代码可以移除非功能性的字符（注释、空格、空行等），减少文件大小，提高载入速度。
26.移除重复脚本
//重复的脚本不仅产生不必要的HTTP请求，而且重复解析执行浪费时间和计算资源
27.减少DOM操作
//缓存已经访问过的元素；
//使用DocumentFragment暂存DOM，整理好以后再插入DOM树；
//操作className，而不是多次读写style；
//避免使用JavaScript修复布局
28.使用高效的事件处理
//减少绑定事件监听的节点，如通过事件委托；
拓展:https://www.cnblogs.com/keliguicang/p/10994548.html
//尽早处理事件，在DOMContentLoaded即可进行，不用等到load以后
图片?
29.优化图片
//尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）
30.优化CSS Sprite
//水平排列Sprite中的图片，垂直排列会增加图片大小；
//Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以适用PNG8格式；
//不要在Spirite的图像中间留有较大空隙。减少空隙虽然不太影响文件大小，但可以降低用户代理把图片解压为像素图的内存消耗，对移动设备更友好。
31.不要在HTML中缩放图片
//那么图片本身（mycat.jpg）应该是100x100px的，而不是去缩小500x500px的图片
//设置图片的宽和高，以免浏览器按照「猜」的宽高给图片保留的区域和实际宽高差异，产生重绘。
32.使用体积小、可缓存的favicon.ico
移动端?
33.保证所有组件都小于25K
//这个限制是因为iPhone不能缓存大于25K的组件，注意这里指的是未压缩的大小。这就是为什么缩减内容本身也很重要，因为单纯的gzip可能不够。
34.打包内容为分段（multipart）文档
//把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持。
关注作者雾灵?
个人博客 | github-雾灵
《百道JS小知识点》系列（1）快速学习⛹?♂️
《百道JS小知识点》系列（2）快速学习⛹?♂️
简单实现vue的几个流程
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！