前言：
此刻大家对“ajaxdata混合型参数”大致比较看重，你们都想要知道一些“ajaxdata混合型参数”的相关知识。那么小编同时在网上汇集了一些对于“ajaxdata混合型参数””的相关内容，希望看官们能喜欢，大家一起来了解一下吧！为什么需要优化
现在PC的性能绝大多数情况是没问题的，但移动端性能就比较乱了，各种兼容性能的问题，因此对移动端 H5 页面进行性能优化是非常重要的。
移动端的页面本身渲染性能差于混合型开发的APP，不关注性能优化，将极大的影响网页的体验。
用户的感受
当用户能够在1-2秒内打开H5页面，看到页面的展示，或者开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许有一部分用户会退出重新进入，但更多的用户会直接放弃使用。
优化方案
首屏加载
当页面资源较多时，用户从点击开始加载页面，用户第一感觉是什么时候「加载完成」？正常情况下，应该是在能看到屏幕范围内，页面内容完全展示，如果在网络状态不好的情况下，会出现资源加载进度条，这样避免页面没有加载完，展示不全的页面，影响用户体验，因此「首屏加载」时间是一个重要的优化点。
在加载时间较长的时候，务必要让用户明确感知到加载完成的提示，通常是在加载过程中显示Loading的进度条，加载完成的时候隐藏它。从心理上，这会让用户有一种“期待”感，而不至于太过枯燥。
对于一些重量级的移动WEB应用，例如「游戏H5」、「场景式H5」，开始前需要加载很多资源，为了让后面的游戏过程更为流畅，一个带百分比的进度条就显得格外重要。
按需加载
按需加载能够提升首屏加载速度，但尽可能避免对低性能的移动设备的影响，按需加载可能带来更多的重绘，从而降低了渲染性能，出现卡顿死机现象。
资源懒加载 Lazyload
懒加载已经有很多成熟方案，PC端常用的优化点，同样适用于移动端。
用户主动触发时的交互内容（如：滚屏加载¹，一种常见的无刷新动态加载数据的方案）首屏未使用到的资源
①.滚屏加载是一种常见的无刷新动态加载数据的方案，通常用在列表形式数据展示中。一方面，数据不是通过翻页进行加载，这样就避免了再一次请求和渲染整个页面；另一方面，数据显示的数量是受限的，例如第一次只请求了10条数据，也就只需要渲染这10条数据，下拉滚屏的时候，再去获得下面10条数据。
资源预加载 Preload
预先加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。
无条件预先加载：页面加载完成（load）后，马上获取其他资源。以 google.com 为例，首页加载完成后会立即下载一个 Sprite 图片，此图首页不需要，但是搜索结果页要用到。有条件预先加载：根据用户行为预判用户去向，预载相关资源。以 google.com 为例，开始输入时会有相关关键词提示，产生额外资源加载。「被」预先加载：页面即将上线新版前预先加载新版内容。网站改版后由于缓存、使用习惯等原因，会有旧版的网站更快更流畅的反馈。 为缓解这一问题，在新版上线之前，旧版可以利用空闲提前加载一些新版的资源缓存到客户端，以便新版正式上线后更快的载入。如「6.18」、「双十一」这类重大促销节之前，可以预先下载一些相关资源到客户端（浏览器、App 等），有效利用浏览器缓存和本地存储，降低活动当日请求压力，提高用户体验。
第三方资源异步加载
第三方资源有的时候不可控，例如埋点统计、地图显示、分享组件等，诸如此类第三方资源使用时需慎重，充分考察它们对于性能的影响，使用异步加载的方式进行，防止第三方资源挂掉影响到页面本身的功能。
减少HTTP请求数
Web 前端页面大量的响应时间花在下载图片、样式、脚本等资源上。而浏览器对每个域名的连接数是有限制的（参考：浏览器允许的并发请求资源数是什么意思？），减少请求次数是缩短响应时间的关键。
图片资源CSS Sprite¹base64:URL （内联资源，有兼容问题，不会被缓存）²SVG Sprite（未来趋势，国外大量网站在使用）Icon Font对于少量图片压缩，推荐用腾讯智图利用CSS3技术绘制简单iconJavascript、CSS、HTML等合并文件（Node.js工具流Webpark）并压缩（Node.js工具流Gulp）安排JS/CSS放到合理的部分尽量使用CSS3动画代替JS/Flash动画避免空标签，避免空src避免内联样式touchstart，touchend，click分情况使用使用<!DOCTYPE html>使用UTF-8字符集使用引入CSS ，避免使用@import尽量使用外链JS和CSS资源尽量将脚本放入页面底部不要去兼容IE6了，好吗？服务端、域名等部署服务端启用Gzip技术CDN自动合并技术利用CDN加速静态资源资源分域存放，分域请求（如：img.360buyimg.com存放图片）设置合理资源缓存时间减少Cookie配置Etag文件版本标识，高效利用缓存，避免重复下载服务端接口合并避免与服务端接口不必要的数据传输合理选用GET、POST请求方式³
①.通过简洁的设计减少页面所需资源，进而减少 HTTP 请求，比如我的博客就很简洁，但是在商业公司开发项目往往并不能做到简洁，为了提升用户感知和视觉体验，往往会加载很多点缀的小图片，这时候CSS Sprite就发挥作用了。②.某些图片特立独行，它们很尺寸很小，在网站中很少更新，且在网站群大量使用，这个时候 base64:URL 就发挥大作用了。③.根据 HTTP 规范，GET 用于获取数据，POST 则用于向服务器发送数据，所以 Ajax 请求数据时使用 GET 更符合规范（GET 和 POST 对比）。
减少DNS查询
确认 URL 以后，浏览器首先要查询域名（hostname）对应服务器的 IP 地址，一般需要耗费 20-120 毫秒 时间，浏览器缓存 –> 本地Hosts查询 –> DNS服务器。DNS 查询完成之前，浏览器无法识别服务器IP，因此不下载任何数据。
基于性能考虑，ISP运营商、局域网路由、操作系统、客户端（浏览器）均会有相应的DNS缓存机制。
IE 缓存 30 分钟，可以通过注册表中 DnsCacheTimeout 项设置；Firefox 混存 1 分钟，通过 network.dnsCacheExpiration 配置；Chrome - > 设置 - > 选项 - > 高级选项 - > 去勾 “用预提取 DNS 提高网页载入速度”
避免出现资源访问失败
开发过程中，发现很多开发者没有设置图标icon，然而服务端根目录也没有存放默认的Favicon.ico，从而导致请求404出现，通常我们在APP里的webview打开，不会去加载这个Favicon.ico，但是很多页面能够分享出去，如果用户在浏览器打开，就会调取失败，一般尽量保证该图标默认存在，文件尽可能的小，并设置一个较长的缓存过期时间。
另外应及时清理过期导致出现请求失败的资源。
标签： #ajaxdata混合型参数
