网络加载类减少 HTTP 资源请求次数
减小 HTTP 请求大小
将 css 或 JavaScript 放到外部文件中,避免使用 <style> 或 <script> 标签直接引入
避免页面中空的 href 和 src
// 不推荐 <img src="" alt="photo"> <a href="">点击链接</a> 为 html 指定 Cache-Control 或 Expires
<meta http-equiv="Cache-Control" content="max-age=7200" /> <meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" /> 合理设置 Etag 和 Last-Modified
<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 17:45:57 GMT" /> 减少页面重定向
使用静态资源分域存放来增加下载并行数
使用静态资源 CDN 来存储文件
使用 CDN Combo 下载传输内容
例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载: <script src="//cdn.domain.com/path/a.js,b.js,c.js"></script> 使用可缓存的 AJAX
$.ajax({ url: url, type: 'get', cache: true, // 推荐使用缓存 data: {}, success() { // .... }, error() { // ... } }); 使用 GET 来完成 AJAX 请求
$.ajax({ url: url, type: 'get', // 推荐使用 get 完成请求 data: {}, success() { // .... }, error() { // ... } }); 减少 Cookie 的大小并进行 Cookie 隔离
缩小 favicon.ico 并缓存
推荐使用异步 JavaScript 资源
例如: <script src="main.js" defer></script> <script src="main.js" async></script>
消除阻塞渲染的 css 及 JavaScript
避免使用 css import 引用加载 css
页面渲染类把 CSS 资源引用放到 html 文件顶部
JavaScript 资源引用放到 html 文件底部
不要在 html 中直接缩放图片
减少 DOM 元素数量和深度
资源网站大全 https:// 设计导航https://www./favorites/sjdh 尽量避免使用 <table>、<iframe> 等慢元素
避免运行耗时的 JavaScript
避免使用 CSS 表达式或 CSS 滤镜
.opacity { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } |
|
来自: 昵称65038308 > 《前端技术CSS/html》