高性能实现方案页面优化

　　资源压缩与合并
　　目的是为了减少网络流量，让页面资源尽快传送到客户端。降低对服务器的访问频率，减轻服务器的负荷。
　　压缩
　　删除HTML、CSS、JS中不显示的字符，包括空格，制表符，换行符，注释等。JS中还可通过混淆，减少JS中变量长度来降低文件大小。CSS和JS的压缩和混乱比HTML缩收益要大得多，通过CSS和JS压缩带来流量的减少，会非常明显。如果有些图片比较大的情况下，可以对图片进行减肥，使图片在不失真的情况下，体积尽量的小。
　　合并
　　图片合并，比如常用的一些ICON图标文件要合并成一个图片文件进行调用。CSS和JS文件也可以进行合并。文件合并的好处可以减少客户端对服务器的访问次数，但可能带新的问题，比如首屏渲染和缓存失效问题。异步加载方式
　　默认情况下javascript是同步加载的，后面的元素要等待javascript加载完毕后才能再次进行加载，对于一些不重要的javascript，如果放在head中会导致网页加载速度变慢。
　　async方式async属性是HTML5新增属性，需要Chrome、FireFox、IE9浏览器支持async属性规定一旦脚本可用，则会异步执行async属性仅适用于外部脚本如果是多个脚本，该方法不能保证脚本按顺序执行
　　defer方式兼容所有浏览器defer属性规定是否对脚本执行进行延迟，直到页面加载为止如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度defer和async的区别
　　defer和async的区别defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。页面静态化
　　页面静态化是指把动态页面渲染为为静态HTML文件存储在服务器上。用户访问时直接去静态服务器访问处理好的静态html文件。这样做的好处是减少数据库查询次数，加快页面的响应速度。
　　页面静态化要注意的方面
　　用户相关数据不能静态化，比如用户名、头像等个人信息。动态变化的数据不能静态化，比如排行榜、新品推荐、分页排序数据等。浏览器显示页面后，在页面中向后端发送Ajax请求获取的数据也不能静态化。浏览器缓存
　　浏览器缓存，是网页性能优化里面静态资源优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题。在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。
　　浏览器在加载资源时，先根据这个资源的一些httpheader判断它是否命中强缓存。强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。
　　当强缓存没有命中的时候，浏览器会发送一个请求到服务器，通过服务器端依据资源的另外一些httpheader验证这个资源是否命中协商缓存。如果协商缓存命中，服务器会返回请求告诉客户端可以直接从缓存中加载这个资源，于是浏览器就就去缓存中加载这个资源；
　　强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。
　　当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。CDN
　　内容分发网络（ContentDeliveryNetwork），简单的理解也算是一种缓存机制。将静态资源（例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上。用户在访问时，指定用户最近的CDN节点返回数据。提升用户的访问速度，节省服务器的带宽消耗，降低负载。
　　缓存刷新：提交缓存刷新请求后，CDN节点的缓存内容将会被强制过期。当用户向CDN节点请求资源时，CDN会直接回源站拉取对应的资源返回给用户，并将其缓存。
　　缓存预热：提交缓存预热请求后，源站将会主动将对应的资源缓存到CDN节点。当用户首次请求时，就能直接从CDN节点缓存中获取到最新的请求资源，无需再回源站拉取。DNS预解析
　　DNS（DomainNameSystem，域名系统），是域名和IP地址相互映射的一个分布式数据库。当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP（运营商）DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址。这个过程可能在几毫秒到几秒之间。
　　DNS预解析（DNSPrefetch），是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。对国际化的站点优化效果比较明显。
　　每天一个小知识，每天进步一点点！〔加油〕〔加油〕〔加油〕