移动前端代码优化丨排名与经验

　　优化移动设备上的排名，成为搜索引擎营销的新动力，行动网站参与行动排名，成为获得流量的重量级玩家，参与排名的必不可少的因素是响应速度。很明显，与PC相比，移动用户的耐心相对较低，网站的移动版本的加载速度已成为SEO更加关注的问题。

　　这是关于如何优化移动网站。从HTML的角度来看，适当减少DOM元素的使用，将的CSS文件放在头部，JavaScript必须放在body标签的前面，为什么？我相信许多SEO无法理解，成都市特科网搜索引擎优化详细解释了原因。

　　解析样式时，某些浏览器（FF）会阻止脚本运行，当脚本访问样式属性时，某些（Webkit）将停止脚本运行，但可能会受到卸载的样式的影响

　　可以在脚本解析中请求样式，如果尚未解析样式， 将会发生错误

　　脚本执行将暂停文档解析和资源下载

　　样式表不参与DOM修改，因此，它不会停止文档解析来解析样式

　　浏览器应避免重绘，没有获取所有样式将无法开始渲染

　　因此，将两者放在正确的位置，可以大大提高渲染效率。

　　延迟脚本加载

　　您可以将defer和async属性添加到脚本。这两个属性的共同点是脚本加载和文档解析是同步执行的，区别在于：异步加载后，立即停止文档分析并执行脚本； defer在执行之前等待文档解析完成。

　　合理使用内联

　　脚本和样式，内联或外部链接应根据需要选择。对于访问量很少且样式和脚本重复使用较少的页面，考虑使用内联样式来减少HTTP请求。但是如果经常访问该页面，样式脚本通常在多个页面上重复使用，使用外部链接是最佳选择。

　　无论如何，需要避免使用@import导入样式。

　　图像是一样的进阶浏览器支援src属性中图片资料的直接base64编码，如有需要， 图像数据可以直接以HTML格式输出。

　　减少iframe

　　iframe本身有很多优点，例如， 您可以并行下载脚本，适用于缓慢加载内容（例如广告），与此同时， 浏览器可以安全地对其进行控制。

　　减少使用iframe的主要考虑因素是：iframe会阻碍页面加载。也没有语义。

　　CSS

　　选择器

　　选择器效率排名如下：

　　ID选择器

　　类选择器

　　标签选择器

　　相邻选择器

　　子选择器

　　后代选择器

　　通配符选择器

　　属性选择器

　　伪类选择器

　　效率和优先级不相等，高优先级不一定有效。如#id。类组合的优先级高于单个#id。但是效率比价值慢。

　　选择器的写作建议是：

　　避免使用通配符

　　不要使用标签名称或类名称来修改ID规则：如果规则使用ID选择器作为键选择器，不要将标签名称添加到规则中。由于ID本身是唯一的，添加标签名称将不必要地降低匹配效率

　　不要使用标签名称来修改类：与标签相比，班级更独特

　　尝试选择最具体的方法：效率低下最简单，最无礼的原因是在标签上使用太多规则。向元素添加类可以更快地细分为类，可以减少规则匹配标签的时间

　　关于后代选择器和子选择器：避免使用后代选择器，如果您必须使用它， 建议使用子选择器代替。但子选择器也应谨慎使用，标签规则不应包含子选择器

　　利用继承：无需在常规内容上声明样式