雅虎前端优化法则

时间 2019-11-09

标签雅虎前端优化法则繁體版

原文原文链接

雅虎前端优化法则

一、尽可能减小HTTP请求次数
　　网页加载中大部分时间都在下载js，css，flash，图片
　　一、合并文件 css，js，图片（css sprite）
　　二、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，由于他能够在客户端进行缓存

二、减小DNS查找次数即减小页面中的主机名（css,js, img，flash等）
　　dns解析时浏览器处于等待状态大部分浏览器有本身的缓存不会受系统的缓存的影响
　　一、减小主机名数量，则减小了dns查询，但同时减小了页面中并行下载的数量
　　把页面中的主机名分红2~4个，两者可兼得php

三、避免跳转
　　下降了用户体验
　　url自己最后应该有/若是不带则用户访问时会发生一次301跳转
　　能够在服务器中进行设置来避免它

四、可缓存的ajax
　　可将请求的地址设置为永不过时，而后请求的地址中带上文件的最后修改时间css

五、推迟加载内容（不是马上要用的）
　　用onload把页面分红两部分折叠的，隐藏的，js效果能够后加剧
　　img，css。js 根据需求进行加剧 html

六、预加载
　　在用户空闲时加载之后要用到的 img，css，js，这些均可以缓存
　　在这个页面加载下个页面要用到的页面组件
　　一样能够把这些要加载的放到 onload 里面

七、减小DOM元素数量
　　页面元素越多JavaScript遍历DOM的效率越慢
　　YUI CSS utilities
　　document.getElementsByTagName('*').length 计算页面所有的元素个数前端

八、根据域名划分页面内容
　　能够并行下载考虑到dns查询时间2到三个最好

九、使iframe的数量最小
　　优势
　　　　解决加载缓慢的第三方内容如图标和广告等的加载问题
　　　　Security sandbox
　　　　并行加载脚本

　　缺点：
　　即时内容为空，加载也须要时间
　　会阻止页面加载
　　没有语意

十、避免404web

十一、使用内容分发网络 ajax

十二、为文件头指定Expires或Cache-Control 浏览器

1三、Gzip压缩文件内容缓存

1四、配置ETag
　　web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制

1五、尽早刷新输出缓冲
　　最好放到head和body之间 <?php flush(); ?>服务器

1六、使用GET来完成AJAX请求
　　POST方法是一个“两步走”的过程：首先发送文件头，而后才发送数据网络

1七、把样式表置于顶部
　　把样式表放到<head />内会使页面有步骤的加载显示,以便于及时给用户反馈（显示的页面），改善了用户体验

1八、避免使用CSS表达式（Expression）
　　它们的计算频率要比咱们想象的多，在页面缩放，滚动，或者即便是鼠标移动时都会计算

1九、使用外部JavaScript和CSS
　　能够被缓存

20、削减JavaScript和CSS
　　减小请求的大小

2一、用<link>代替@import

2二、避免使用滤镜
　　彻底避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替

2三、把脚本置于页面底部
　　阻止了页面的平行下载
　　HTTP/1.1 规范建议，浏览器每一个主机名的并行下载内容不超过两个
　　脚本加载时会阻止页面上全部的元素进行加载，即便是不一样域名

2四、剔除重复脚本

2五、减小DOM访问
　　缓存已经访问过的有关元素
　　线下更新完节点以后再将它们添加到文档树中
　　避免使用JavaScript来修改页面布局

2六、开发智能事件处理程序
　　delegate 方法绑定

2七、减少Cookie体积

2八、对于页面内容使用无coockie域名

2九、优化图像

30、优化CSS Spirite
　　水平排列图片会比垂直要小
　　颜色相近的摆放在一块儿
　　空隙不宜过大

3一、不要在HTML中缩放图像

3二、favicon.ico要小并且可缓存

3三、保持单个内容小于25K

3四、打包组件成复合文本