学习 WEB 需要的内容整理,包括前端思想、框架、css、js(框架)、http协议等等 ……
欢迎 fork
后贡献 PR
,一起努力打造更好的 web
学习资料~
- 理解HTTP/304响应 English version Understanding HTTP/304 Responses
什么是HTTPS? zh-wikipedia 超文本传输安全协议 (目前大陆已经被封需要翻墙才能阅读,可以阅读英文版en-wikipedia HTTPS)
HTTPS 连接的最初几秒都发生了什么 (The First Few Milliseconds of an HTTPS Connection) 中文翻译参考 InfoQ HTTPS 连接最初的若干毫秒
微博@BAIDU罗成的一篇文章 中国互联网全站HTTPS的时代已经到来对HTTPS的原理、遇到的问题、有哪些影响做出了介绍,比较容易理解。
百度在2015年3月份全站正式转入HTTPs,下面的几篇文章正是其运维团队的总结经验,很有阅读价值。
- 全站 https 时代的号角 : 大型网站的 https 实践系列
- 大型网站的 HTTPS 实践(一)—— HTTPS 协议和原理
- 大型网站的 HTTPS 实践(二)——HTTPS 对性能的影响
- 大型网站的 HTTPS 实践(三)——基于协议和配置的优化
- 大型网站的 HTTPS 实践(四)——协议层以外的实践
淘宝、天猫世界级的电子商务网站实现 HTTPS,这里面的分享相当有价值。
- 让用户数据更安全——淘宝、天猫全网HTTPS实践
- 淘宝全站 HTTPS 百万页面改造技术细节大起底 这篇文章只是大概的说了说背景,详细的干货参考:velocity 大会-淘宝全站HTTPS实践
- Stackoverflow.com: the road to SSL statckoverflow 的创始人解答,大型网站的转型需要众多依赖的组件、服务商都支持HTTPS,最关键的还是CA证书问题。
- 知乎-如何看待百度全站搜索进入 HTTPS 时代?
- HTTPS as a ranking signal 2014-08 google宣布全站HTTPS化,并且调整page rank 算法,搜索中支持搜索 HTTPS 的站点。
- 2015-03 月份百度全站 HTTPS 化,并且在2015-05-25日宣布百度开放收录https站点公告,从此百度也能搜索HTTPS的站点内容了。
- Home page for http/2 http/2 协议官网发布网站,内容更新均在此发布
- Http/2 wikipedia 维基百科 http/2 资料,很多参考连接
- http2 详解(中文), English version follow this http2 explained,详细讲述http/1.1 的各种不足以及http/2所有的各种优化等,值得一看。github地址为http2-explained-chinese
- Jerry Qu - http2 整理 几篇不错的文章
@qgy18在他的小站中写了三篇对比 HTTP1 和 HTTP2 性能优化的文章,对比两种协议里面为了共同的浏览体验、性能所做出的不同的优化,值得看一看。同时,他的小站已经全面支持 HTTPS,赞一个!
- 一个前端的自我修养 前端大神 @寒冬winter 执笔,值得放在第一条。
- 前端学习路线图 文章解释说明 Web前端开发大系概览 (前端开发技术栈)
- 前端技能汇总 Frontend Knowledge Structure --github 由阿里前端两位杰出的工程师维护的关于前端的知识图谱 @JacksonTian @jayli(拔赤)
- Web前端知识体系大全 cnblog 上的一哥们写的,挺全面的。
- Web 基本法则-现代 web 开发最佳实践 google 官方现代多设备 web 开发指南,特别是针对pc web、移动端的设计原则实践,值得每个web开发人员仔细阅读。
- 前端代码规范及最佳实践 Isobar公司的创意技术部(前端工程)开发web应用的规范,此连接为中文翻译版本,英文版本见 github-isobar-idev
- 前端开发-好习惯、用法 一些不错的建议,很多在前面的文章中也有描述。
- 比较全面的前端面试资料收集 主要是原理层面,知识点的理解。另外可以看一下面试官经常面试的一些点,star 2w+ 前端工作面试问题,包括常见问题、html、css、js以及测试等问题。
- Front-end-Web-Development-Interview-Question 包含笔试题、面试题以及简历的一些技巧。
- 如何挑选适合的前端框架? Angular Js、backbone等各种各样的前端MVVM框架层出不穷,移动端友好、SEO 友好,面临这些需求,有哪些原则、挑战,如何筛选?去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景,并针对不同规模的公司、项目给出了相应的前端技术选择方案。
- 浏览器缓存知识小结及应用 关于浏览器缓存,讲解的很清楚、细致。
- 跨域资源共享 CORS 详解 - 阮一峰 浏览器有个同源策略,对于不同源的站点之间的相互请求会做限制(跨域限制是浏览器行为,不是服务器行为),解决办法有常见的 JSONP、CORS 等,JSONP 只支持GET请求,CORS支持所有类型的HTTP请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
1.浏览器先根据同源策略对前端页面和后台交互地址做匹配,若同源,则直接发送数据请求;若不同源,则发送跨域请求。 2.服务器解析程序收到浏览器跨域请求后,根据自身配置返回对应文件头。若未配置过任何允许跨域,则文件头里不包含Access-Control-Allow-origin字段,若配置过域名,则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。 3.浏览器根据接受到的http文件头里的Access-Control-Allow-origin字段做匹配,若无该字段,说明不允许跨域;若有该字段,则对字段内容和当前域名做比对,如果同源,则说明可以跨域,浏览器发送该请求;若不同源,则说明该域名不可跨域,不发送请求 参考:浏览器和服务器实现跨域(CORS)判定的原理
- Chrome DevTools Overview 官方介绍
- Chrome开发者工具不完全指南 基础篇、进阶篇、性能篇、性能进阶篇、移动篇、插件篇 从头介绍如何使用 chrome 进行 web 开发中的调试工作,包括 source、console、性能、profile、移动端调试、常用插件等的介绍,适合想更全面的了解强大的chrome 工具的同学。
- Collection of links to assist you in web design and development 前端设计、框架工具、打包工具、团队协作等一些资料工具使用。
- Google Developers - PageSpeed Tools The PageSpeed tools analyze and optimize your site following web best practices.
- chrome 控制台使用指南 包含 JS 内存泄露排查、alert 弹窗、Dom 断点调试、Timeline 介绍等,很是方便。
- MDN javascript资料 firefox js 资料库
- ECMAScript 6 新一代的 javascript 标准,带来很多先进的理念和特性,查看阮一峰写的电子书《ECMAScript 6入门》进行学习,或者查看 mozilla 的系列文章《ES6 In Depth Articles》 中文翻译由CSDN极客头条探秘ES6。
- JavaScript Patterns Collection js 的开发规模式或者说推荐的写法。
- fettool 整理的一些 js 组件库 比较实用的 js 库推荐
- 极客学院-h5学习计划系列视频
- A list of everything that could go in the of your document 整理的 HEAD 标签里面的内容,很全面,赞 👍
- AdminLTE - 后台管理模板 star 1W+
- 书籍:高性能网站建设,高性能网站-Web开发者性能优化最佳实践
- 书籍:High Performance Browser Networking 全书以性能优化为主线,从TCP、UDP 和TLS 协议讲起,解释了如何针对这几种协议和基础设施来优化应用。然后深入探讨了无线和移动网络的工作机制。最后,揭示了HTTP 协议的底层细节,同时详细介绍了HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和DataChannel 等现代浏览器新增的具有革命性的新能力。(-豆瓣简介)
- Web性能优化:What? Why? How? 文章从
减少http请求
、页面内优化
、启用缓存
、减少下载量
、网络优化
等几个方面进行阐述如何让页面加载更快! - 毫秒必争,前端网页性能最佳实践法则 从网页内容、服务器端、图片、cookie、css、js等角度阐述优化的实践内容。
- Google - PageSpeed Insights规则
- Yahoo - Best Practices for Speeding Up Your Web Site , 中文翻译
- Web前端优化最佳实践及工具集锦 对上两条 google 和 yahoo 理论的实践文章,并提供一些调试优化的前端工具。
- 网页性能管理详解-阮一峰 详述页面加载的原理机制及优化场景。
- Postman- POST 接口调试终结者,异常强大的接口调试工具。
- PageSpeed Insights Google的工具很是方便,极力推荐。
- CanIuse - 前端必备,查看浏览器对各种新特性的兼容情况。"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers."
- chrome-浏览器插件 一些比较实用的 chrome 浏览器插件
- 阿里测 帮助分析排查页面的性能优化点
- 爱前端-前端测试服务 UI自动化测试、多浏览器检测(js\css脚本错误等)、页面坏死链检测等,方便在多浏览器的兼容性测试过程中快速发现定位问题,节约时间。或者这个也不错 前端测试服务
- BrowserStack 免费的很好用,通过截图来反馈多浏览器下的兼容性,免费的速度很快,强烈推荐使用这个。
- 阿里移动质量中心 安卓、ios、h5兼容性测试,可以很方便的适配多种安卓终端、ios的多个版本吧兼容性等,很是方便。
- JavaScript 堆内存分析新工具 OneHeap、OneProfile
- web以及移动端安全测试工具-HiTest 安全测试服务
- Bootstrap 中文网开源项目免费 CDN 服务 各种组件,很全面, 主要同步于 cdnjs 仓库,又拍云提供存储服务,你所使用的组件基本上都能在这里找到,强烈推荐。
- 七牛云存储开放静态文件CDN
- 百度静态资源公共库
360 网站卫士常用前端公共库 CDN 服务- CDNJS 国内依托又拍云的服务 CDNJS.cn 速度还可以。
- CDN公共库-插件库
- jQuery CDN
- 又拍云常用JavaScript库CDN服务
- Rest - Representational state transfer wikipedia 介绍,中文在此
- 理解 RESTFul 架构 或者简单的阅读阮一峰 - 理解RESTful架构
- 怎样向妻子解释 REST 架构 很生动形象,剪短的英文,比喻恰当。:+1:
- 撰写合格的REST API:设计准则 从RFC一致性、接口的安全性、丰富的接口文档、访问限制等方面进行阐述,通俗易懂,很是推荐阅读。
- Restful Api 安全设计参考
- Web 研发模式演变 - 为什么要进行前后端分离? @玉伯 前端模块化开发sea.js的维护者,推荐阅读。
- 基于NodeJS的前后端分离(Taobao UED) 淘宝 @常胤 整理的对前后端交互的问题进行说明和提出解决方法,值得推荐阅读。
- HTTP API design guide 这篇指南介绍描述了 HTTP+JSON API 的一种设计模式,一直试图找出一种良好的、一致的、显而易见的 API 设计方法,而并不是所谓的"最终/理想模式"。中文翻译版见HTTP API 设计指南(http-api-design-ZH_CN)