浏览器兼容与优化

来源：互联网发布：求一个矩阵的逆过程编辑：程序博客网时间：2024/06/16 15:50

一、浏览器兼容问题

1.IE条件注释
书写规则：

<!-- [if IE6]>Internet Expolore6<![end if] -->

在条件注释中间，可以写任意的代码块，代表在该浏览器环境下才会执行。如：

<!-- [if IE6]><link rel="stylesheet href="index.css" /><![end if] -->

if lt IE6：表示低于IE6版本,less than
if lte IE6：表示IE6及低于IE6版本，less than or equal
if gt IE6：表示高于IE6版本。 greater than
if gte IE6：表示IE6及高于IE6版本

二、浏览器优化

总结自麦子学院前端进阶指南

规则一：把css文件放在HTML的<head>标签中加载。
能让页面更早的开始渲染，避免闪屏；最好将关键渲染路径的样式直接写在页面中（如首屏的css样式）
规则二：把js文件放在<body>标签之后</body>标签之前加载。
因为js的加载会阻塞HTML的解析和css的渲染
规则三：不要使用css表达式。
因为css表达式存在兼容性问题；看似强大，实际上性能开销大。可能导致页面卡顿
规则四：用外链方式引用css 和 js。
这么做能有效减少HTML的体积，还能合理的利用浏览器的缓存
规则五：压缩js 和 css文件。
生产环境中，删除不必要的注释，空白；岁javascript的变量名进行压缩，混淆压缩等。
规则六：不要再页面中重复加载js文件
在IE中，会发起多个请求，不能发挥缓存优势；同时也意味着需要更长的js执行时间。
规则七：让ajax请求可缓存。
GZIP，内容压缩都可使用
规则八：用get方式发起ajax请求。
因为get方式可以缓存如果只是获取信息，get请求方式更加语义化。
规则九：组件延迟加载。
这么做是为了班长关键页面资源优先加载，因为浏览器对并发数都有一定的限制（现代浏览器允许的最大并发数为 6 ， IE下为 2）
延迟加载的方法有： lazyload
规则十：减少DOM节点数
DOM节点数越多，浏览器布局渲染时的计算量就越大
规则十一：避免使用iframe。
iframe会阻塞父文档的onload；即便是空白的<iframe>也是比较耗时的。
规则十二：减少cookie的体积。
因为cookie每次请求都回附带上全部的请求信息（如js文档、图片等）
规则十三：使用无cookie域名加载静态资源。
这么做事为了减少静态资源加载时的网络传输量，静态资源加载通常不需要cookie。
规则十四：减少js中的DOM访问
因为当节点数增加时，查找元素需要遍历更深。应该合理利用documentFragment（即在全部需要创建的节点创建完毕后，将它们放进一个DocumentFragment中）。
可以将查找到的元素缓存在一个变量中。
不应使用js频繁的修改样式，因为这样会导致浏览器的reflow，对性能损耗大。
规则十五：使用更智能的时间监听机制。
可以使用基于事件冒泡的位图机制，它能有效的减少绑定数量（将事件绑定在父元素中）
规则十六：使用常见的图片优化手段。
因为相对比其他资源文档，图片的体积更大，可以使用：PNGCrush、JPEGTRAN、PNGQUANT对图片资源进行优化。或者使用渐进式编码：JPG
规则十七：不要再HTML中缩放图片。
会徒增渲染开销，提供适当尺寸的图片即可。
规则十八：不要把图片的src置空
因为在IE、Chrome、Firefox中会引起额外的文档请求。
规则十九：任何资源尽量控制在25k以内。
在某些设备下无法读取大容量的资源

0 0