每日阅读记录 - 20170913

Posted 2020-10-06

A. Responsive_Navigation_Patterns(响应式导航模式)

https://developer.mozilla.org/zh-CN/Apps/Design/Responsive_Navigation_Patterns

1. Top toggle menu

   • Pros(优势):
   • one button in header maximizes space for content on a small screen
   • important items stay visiblein most screen sizes and you decide the item priorities
   • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don’t fit
   • Cons(缺点):
   • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
   • users may not notice the button contains a navigation menu in the smallest screen size
   • one more step is needed to access the hidden navigation items

2. Expandable bottom menu

   • Pros(优势):
   • expandable menu is easy to discover
   • important items are always visible and you decide the item priorities
   • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don’t fit
   • Cons(缺点):
   • one more step is needed to access the navigation items that are hidden
   • navigation items might be less discoverable because some items are hidden
   • less space for content in the smallest screen size

3. Left hidden menuLeft hidden menu

   • Pros(优势):
   • potentially displays more navigation items in a left navigation compared to a top navigation
   • most items are always visible except in the smallest screen size
   • one button in header maximizes space for content on a small screen
   • Cons(缺点):
   • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
   • users may not notice the button contains a navigation menu in the smallest screen size
   • one more step is needed to access the navigation items that are hidden

B. 布局模式

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode

1. 块布局：用来布置文件。块布局包含以文档为中心的功能，例如浮动元素或将其放置在多列上的功能。

2. 行内布局：用来布置文本。

3. 表格布局：用来布置表格。

4. 定位布局：用来对那些与其他元素无交互的定位元素进行布置 。

5. 弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。 
   

   • column-*属性对弹性项目无效。
   • float和clear无效。
   • vertical-align对弹性元素无效。

6. 网格布局：用来布置那些与一个固定网格相关的元素。 
   

   • https://weui.io/#grid
   • https://codepen.io/airen/pen/hliqe

C. 雅虎前端优化策略

https://developer.yahoo.com/performance/rules.html

1. Content ·「网页内容相关 

   • Make Fewer HTTP Requests [减少http请求次数]
   • Reduce DNS Lookups [减少DNS查询次数]
   • Avoid Redirects [避免页面跳转]
   • Make Ajax Cacheable [缓存Ajax]
   • Postload Components [延迟加载]
   • Preload Components [提前加载]
   • Reduce the Number of DOM Elements [减少Dom元素数量]
   • Split Components Across Domains [根据域名划分内容]
   • Minimize Number of iframes [减少iframes数量]
   • Avoid 404s [避免404]

2. Server ·「服务器相关 

   • Use a Content Delivery Network (CDN) [使用CDN]
   • Add Expires or Cache-Control Header ×[添加Cache-Control控制头]
   • Gzip Components [压缩传输文件]
   • Configure ETags [配置ETags]
   • Flush Buffer Early [尽早flush输出]
   • Use GET for Ajax Requests [使用get请求]
   • Avoid Empty Image src[避免空的图片src]

3. Cookie ·「缓存 
   

   • Reduce Cookie Size [减少Cookie大小]
   • Use Cookie-Free Domains for Components [页面内容使用无cookie域名]

4. CSS ·「CSS 
   

   • Put Stylesheets at Top [样式置顶]
   • Avoid CSS Expressions [避免CSS表达式]
   • Choose Over @import [选择link而不是import]
   • Avoid Filters [避免使用Filters]

5. javascript ·「JavaScript 
   

   • Put Scripts at Bottom [脚本置底]
   • Make JavaScript and CSS External [使用外部的JavaScript和CSS3]
   • Minify JavaScript and CSS [简化的Js和css]
   • Remove Duplicate Scripts [脚本去重]
   • Minimize DOM Access [减少Dom访问]
   • Develop Smart Event Handlers [使用智能事件处理]

6. Images ·「图片 
   

   • Optimize Images [优化图片]
   • Optimize CSS Sprites [优化雪碧图]
   • Do Not Scale Images in HTML [不要在html中缩放图片]
   • Make favicon.ico Small and Cacheable [使用小且可缓存的favicon.ico]

7. Mobile ·「移动客户端 
   

   • Keep Components Under 25 KB [保持单个内容小于25KB]
   • Pack Components Into a Multipart Document [打包组建成复合文档]