机能优化
怎样举行网站机能优化
content方面
- 削减HTTP要求:兼并文件、CSS精灵、inline Image
- 削减DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。要领:DNS缓存、将资本散布到适当数量的主机名,均衡并行下载和DNS查询
- 防止重定向:过剩的中心接见
- 使Ajax可缓存
- 非必需组件耽误加载
- 将来所需组件预加载
- 削减DOM元素数量
- 将资本放到差别的域下:浏览器同时从一个域下载资本的数量有限,增添域能够进步并行下载量
- 削减iframe数量
- 不要404
Server方面
- 运用CDN
- 增加Expires或许Cache-Control相应头
- 对组件运用Gzip紧缩
- 设置ETag
- Flush Buffer Early
- Ajax运用GET举行要求
- 防止空src的img标签
Cookie方面
- 减小cookie大小
- 引入资本的域名不要包括cookie
css方面
- 将款式表放到页面顶部
- 不运用CSS表达式
- 不运用IE的Filter
Javascript方面
- 将剧本放到页面底部
- 将javascript和css从外部引入
- 紧缩javascript和css
- 删除不须要的剧本
- 削减DOM接见
- 合理设想事宜监听器
图片方面
- 优化图片:依据现实色彩须要挑选色深、紧缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小而且可缓存
挪动方面
- 保证组件小于25k
Pack Components into a Multipart Document
你有用过哪些前端机能优化的要领?
- 削减http要求次数:CSS Sprites, JS、CSS源码紧缩、图片大小掌握适宜;网页Gzip,CDN托管,data缓存 ,图片服务器。
- 前端模板 JS+数据,削减因为HTML标签致使的带宽糟蹋,前端用变量保留AJAX要求效果,每次操纵当地变量,不必要求,削减要求次数
- 用innerHTML替代DOM操纵,削减DOM操纵次数,优化javascript机能。
- 当须要设置的款式很多时设置className而不是直接操纵style
- 罕用全局变量、缓存DOM节点查找的效果。削减IO读取操纵
- 防止运用CSS Expression(css表达式)又称Dynamic properties(动态属性)
- 图片预加载,将款式表放在顶部,将剧本放在底部 加上时候戳
- 防止在页面的主体规划中运用table,table要等个中的内容完整下载以后才会显现出来,显现比div+css规划慢
谈谈机能优化题目
- 代码层面:防止运用css表达式,防止运用高等挑选器,通配挑选器
- 缓存应用:缓存Ajax,运用CDN,运用外部js和css文件以便缓存,增加Expires头,服务端设置Etag,削减DNS查找等
- 要求数量:兼并款式和剧本,运用css图片精灵,初始首屏以外的图片资本按需加载,静态资本耽误加载
- 要求带宽:紧缩文件,开启GZIP
代码层面的优化
- 用hash-table来优化查找
- 罕用全局变量
- 用innerHTML替代DOM操纵,削减DOM操纵次数,优化javascript机能
- 用setTimeout来防止页面落空相应
- 缓存DOM节点查找的效果
- 防止运用CSS Expression
- 防止全局查询
- 防止运用with(with会建立本身的作用域,会增添作用域链长度)
- 多个变量声明兼并
- 防止图片和iFrame等的空Src。空Src会从新加载当前页面,影响速率和效力
- 只管防止写在HTML标签中写Style属性
前端机能优化最好实践?
- 机能评级东西(PageSpeed 或 YSlow)
- 合理设置 HTTP 缓存:Expires 与 Cache-control
- 静态资本打包,开启 Gzip 紧缩(节约相应流量)
- CSS3 模仿图象,图标base64(下降要求数)
- 模块耽误(defer)加载/异步(async)加载
- Cookie 断绝(节约要求流量)
- localStorage(当地存储)
- 运用 CDN 加快(接见近来服务器)
- 启用 HTTP/2(多路复用,并行加载)
- 前端自动化(gulp/webpack)