代码优化这部分只优化代码本身,不考虑性能,关于代码部分的性能优化在页面渲染部分的代码优化中,HTML+CSS符合XHTML规范:小写,正确嵌套,必须关闭;双引号,合理缩进,utf-8编码;语义标签,易于维护;合理的注释,比如divclosed表示配对div;HTML、CSS、JS分离,易于维护;避免使用iframe,否则会阻塞父文档的onload;风格继承,不重复;不要乱用href和onclick,它们有本质区别,href偏向资源加载,而onclick只是点击;其次,点击事件在href之前执行;css伪类选择器不宜过多,防止选择器过载;不要让覆盖样式变得困难,少用!重要的;善于使用样式继承(注意继承和级联是不同的概念);不要保留过时的浏览器前缀和兼容性写法;JavaScript标识符简短明了,用1和0代替true和false,合理写注释,提高代码可读性;定义变量一定要写var,以免污染整个世界,同时newFunction()和eval()也会污染整个世界;长字符串使用字符String链接写法,不能跨行。在兼容的情况下,在ES6中最好使用多行字符串;不要在if和for中定义函数,介词无意义,分支会被破坏;后者容易出现循环参数拖尾;此方法有效在字段开头声明变量以提高可读性;var名称=函数名称(){};它有利于堆栈跟踪(注意变量名的一致性);位运算不应超过32位;不要随意改写已有的原型,可以使用实例化对象来代替,实现实例继承;尝试为链调用返回它;将函数放入同名文件夹,定义noConflict方法导出之前的版本并返回原始版本;设计封装(类、闭包、模块),尽量使用严格模式;省略内容为js的script标签和内容为css的link标签的type属性和lang属性;注意不要对系统全局变量(方法)等变量名使用保留字;以下行为污染全局:setTimeout和setInterval的第一个参数以字符串形式传递;评估()函数;新的函数()构造函数。性能优化页面渲染减少页面回流通过修改className可以修改元素的多种样式,可以减少多次回流为一次回流;修改多个样式的元素可以分为三个步骤:先隐藏(显示:无),再修改,最后显示。这样,多次回流可以减少为两次回流;添加页面内容可以通过将所有内容写入文档片段元素然后一次附加到页面来完成;添加页面内容可以通过将所有内容组合成一个长字符串来完成,并再次编辑innerHTML到页面;css(style标签和link标签)放在head中,这样浏览器加载数据时可以直接通过css树生成render树,减少不必要的重新渲染;在不影响视觉效果的情况下,尽量降低js动画的精度;div布局优于表格布局,因为后者中元素的任何属性重命名都会重排整个表格;优化用户体验,采用延迟加载技术,保证首屏先加载;使用异步步骤,不阻塞主页面的渲染;先渲染界面,在不影响首屏的情况下,使用js脚本动态加载后续数据;放置不影响渲染的脚本(body之后),优先渲染;添加自定义错误页面(如404未找到页面);使用GPU加速;代码优化图片img标签的src不能为空,以免产生冗余请求;对于href、url()和src中的链接,使用//代替http://,/content/a.jpg替换content/a.jpg,被替换的后者会多发一个http请求;合理优化外链css和JS,充分利用缓存;将资源控制在25kB以内,否则移动端可能无法缓存;减少不必要的DOM节点;十六进制颜色优于rgb/hsl函数,图形转换优于动画,css动画优于js动画,少用hack写法;尽量避免使用css表达式;不要重复加载相同的代码;使用事件委托来减少事件定义;使用变量保存多次使用的DOM查询结果,减少重复搜索;如果可以使用!==或===,则不要使用!=或==以减少不必要的隐式类型转换;尝试使用现有的一些函数方法,比如数组所有元素求和,直接使用reduce方法,然后考虑map方法,再考虑forEach方法,再for...in,最后for;使用{}或[]来定义对象或数组,比newObject()或newArray()效率更高;避免String类型的隐式装箱(隐式调用newString());使用switch而不是太多if,并按照判断条件的可能性进行排序,以便尽快结束判断;[].join()动态生成字符串优于字符串链接(+)性能;nextSibling()性能优于children;cloneNode()比createElement()效率高;考虑在页面渲染后动态加载辅助的外部js脚本;网络通信减少了通信链接的数量css精神将多个请求变成了一个请求;设置http头的属性:connection:keep-alive,使链接成为长连接,减少频繁的握手和挥手过程;设置合适的http头属性:expires、cache-control和max-age,合理利用浏览器的本地缓存和路由缓存,使一些数据不需要从服务器获取;删除不必要的重定向;合并cssjs脚本等文件;保存(缓存)必要的Ajax请求数据;减少数据传输距离和压缩代码的数据大小;使用内容分发网络(cdn),如Akamai、Limelight等;使用Gzip压缩;使用新的图像格式或矢量图形,例如.apng、.webp和.svg;如有必要,减少cookie以减少http请求中的数据量;尝试使用缩写的css样式;合理利用服务器缓存、cdn缓存;尽量少用或不用ETag,一般有Expires头即可;合理利用服务器资源使用负载均衡技术,如硬件技术:Alteon、F5,软件技术:Nginx、LVS;减少DNS查找时间(控制在20ms~100ms以内);设置图像服务器;增加TTL时间,建议为24小时(引用自SteveSouders的《High Performance Web Sites》)SEO完美meta标签,描述简洁明了,关键词清晰;重要内容不要用js或后端语言加载;合理使用h标签,尤其是h1标签,权重高;在图片上写一个合理的alt值;将URI控制在256KB以内;不要使用iframe;使用语义标签;全面优化使用多域名存储网站资源(减少cookies,节省主域名连接数,突破浏览器并发限制,优化cdn缓存)使用base64编码图片,减少链接数和传输大小
