史上最全的前端资源汇总（下）

原创

爱吃猫的菜菜 2023-08-01 10:29:17 ©著作权

文章标签 javascript 开发语言 ecmascript html github 文章分类 办公效率

©著作权归作者所有：来自51CTO博客作者爱吃猫的菜菜的原创作品，请联系作者获取转载授权，否则将追究法律责任

56. 表格 Grid

表格 Grid	地址
facebook表格	http://facebook.github.io/fixed-data-table
类似于Excel编辑表格-handsontable	http://handsontable.com
bootstrap-table插件	http://bootstrap-table.wenzhixin.net.cn
datatables	https://www.datatables.net

57. 在线演示

在线演示	地址
js 在线编辑 - runjs	http://runjs.cn
js 在线编辑 - jsbin	http://jsbin.com
js 在线编辑 - codepen	http://codepen.io
js 在线编辑 - jsfiddle	http://jsfiddle.net
java 在线编辑 - runjs	http://ideone.com
js 在线编辑 - hcharts	http://code.hcharts.cn
js 在线编辑 - jsdm	http://jsdm.com
sql 在线编辑 - sqlfiddle	http://sqlfiddle.com
mozilla 在线编辑器	https://thimble.mozilla.org

58. 播放器

播放器	地址
Html5 VideoPlayer	https://github.com/zmmbreeze/DeadSimpleVideoPlayer

59. 粒子动画

粒子动画	地址
Proton 烟花	http://a-jie.github.io/Proton/#example

60. Nodejs

Nodejs	地址
nodejs 篇幅比较巨大	http://liuqing.pw
Node.js 包教不包会	https://github.com/alsotang/node-lessons
篇幅比较少	http://www.rainweb.cn/article/category/Nodejs
node express 入门教程	http://www.w3cfuns.com/article-5598538-1-1.html
nodejs定时任务
一个nodejs博客	http://60sky.com
【NodeJS 学习笔记04】新闻发布系统
过年7天乐，学nodejs 也快乐
七天学会NodeJS	https://github.com/nqdeng/7-days-nodejs
Nodejs学习笔记（二）--- 事件模块
nodejs入门
angularjs nodejs	https://github.com/zensh/jsgen
从零开始nodejs系列文章	http://blog.fens.me/series-nodejs
理解nodejs	http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs事件轮询	http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
node入门	http://www.nodebeginner.org/index-zh-cn.html
nodejs cms	http://ourjs.com/detail/53e1f281c5910a9806000001
Node初学者入门，一本全面的NodeJS教程	http://ourjs.com/detail/529ca5950cb6498814000005
NodeJS的代码调试和性能调优	http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

61. 性能优化

61.1 常规优化

常规优化	地址
Javascript高性能动画与页面渲染
移动H5前端性能优化指南	http://isux.tencent.com/h5-performance.html
5173首页前端性能优化实践	http://ued.5173.com/?p=1731
给网页设计师和前端开发者看的前端性能优化	http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers
复杂应用的 CSS 性能分析和优化建议	http://www.orzpoint.com/profiling-css-and-optimization-notes
张鑫旭——前端性能	http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD
前端性能监控总结	http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html
网站性能优化之CSS无图片技术	http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF
web前端性能优化进阶路	http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html
前端技术：网站性能优化之CSS无图片技术	http://my.eoe.cn/tuwandou/archive/4544.html
浏览器的加载与页面性能优化	http://www.baiduux.com/blog/2011/02/15/browser-loading
页面加载中的图片性能优化	http://www.w3ctech.com/p/1503
Hey——前端性能	http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD
html优化	http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2
99css——性能	http://www.99css.com/tag/%e6%80%a7%e8%83%bd
Yslow——性能优化	http://www.yslow.net/category.php?cid=20
YSLOW中文介绍
转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化	http://www.360ito.com/article/40.html
Yahoo!团队实践分享：网站性能	http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml
网站性能优化指南：什么使我们的网站变慢？	http://blog.jiasule.com/i/153
网站性能优化实践，减少加载时间，提高用户体验	http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html
浅谈网站性能优化前端篇	http://www.umtry.com/archives/747.html
前端重构实践之如何对网站性能优化？	http://www.adinnet.cn/blog/designview/2012-7-12/678.html
前端性能优化：使用媒体查询加载指定大小的背景图片	http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9
网站性能系列博文	http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html
加载，不只是少一点点	http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml
前端性能的测试与优化	http://mzhou.me/article/95310
分享网页加载速度优化的一些技巧？	http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading
页面加载中的图片性能优化	http://www.f2es.com/images-bytes-opt
web前端优化(基于Yslow	http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html
网站性能优化工具大全	https://www.qianduan.net/website-performance-optimization-tool.html
【高性能前端1】高性能HTML	http://www.alloyteam.com/2012/10/high-performance-html
【高性能前端2】高性能CSS	http://www.alloyteam.com/2012/10/high-performance-css
由12306谈谈网站前端性能和后端性能优化	http://coolshell.cn/articles/6470.html
AlloyTeam——前端优化	http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96
毫秒必争，前端网页性能最佳实践
网站性能工具Yslow的使用方法	http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html
前端工程与性能优化（上）：静态资源版本更新与缓存
前端工程与性能优化（下）：静态资源管理与模板框架
HTTPS连接的前几毫秒发生了什么	http://blog.jobbole.com/48369
Yslow	http://uicss.cn/yslow/#more-12319
Essential Web Performance Metrics — A Primer, Part 1	http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1
Essential Web Performance Metrics — Part 2	http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2
YUISlide,针对移动设备的动画性能优化	http://jayli.github.io/blog/data/2011/12/23/yuislide.html
Improving Site Performance	http://joelglovier.com/improving-site-performance
让网站提速的最佳前端实践
Why Website Speed is Important	http://sixrevisions.com/web-development/why-website-speed-is-important
Need for Speed – How to Improve your Website Performance	https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance
阿里无线前端性能优化指南 (Pt.1 加载期优化	https://github.com/amfe/article/issues/1

61.2 优化工具

优化工具	地址
JavaScript 性能分析新工具 OneProfile	http://www.html-js.com/article/3083
JavaScript 堆内存分析新工具 OneHeap	http://www.html-js.com/article/3091

61.3 在线工具

在线工具	地址
google在线工具	https://developers.google.com/speed/pagespeed/insights
阿里测	http://www.alibench.com
阿里-免费测试服务	http://itest.aliyun.com
阿里-F2etest多浏览器兼容性测试解决方案	https://github.com/alibaba/f2etest
js性能测试	http://jsperf.com

62. 前端架构

前端架构	地址
技术架构	http://www.zhihu.com/topic/19612641
前端架构	http://saito.im/note/The-Architecture-of-F2E
如何成为前端架构师	http://www.zhihu.com/question/24092572
关于前端架构-张克军	http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html
百度腾讯offer比较（腾讯游戏VS百度基础架构）	http://www.zhihu.com/question/25583350

63. 推荐作品

推荐作品	地址
winter代码片段需要翻墙	https://gist.github.com/wintercn
fgm	http://www.fgm.cc/learn
岑安作品集	https://github.com/hongru/hongru.github.com
当耐特demo集合	http://kmdjs.github.io
米空格 js作品	http://www.laoshu133.com/Lab
myFocus	http://koen301.github.io
SeaJS组件库	http://panxuepeng.github.io/seajslib
颜海镜作品	http://yanhaijing.com/myProject
脚儿网作品	http://jo2.org/category/myworks
javascript个人作品	http://www.cnitblog.com/yemoo/category/3107.html
妙味的雷东升游戏作品	http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790
javascript作品集
云五笔，灰度产生生成工具	https://github.com/TooBug/works
项目主页	http://koen301.github.io
个性的作品主页	http://zaole.net
播放器	http://static.tingall.com/v2/player
ucren js demos 集	http://ucren.com/blog/demos
智能社	http://www.zhinengshe.com/works_list.html
实例陈列架	http://demos.shizuwu.cn
zoye demo	http://zoye.sinaapp.com/demo
王员外	http://lab.yuanwai.wang
平凡	http://pingfan1990.sinaapp.com
jyg 游戏案例	http://www.lovewebgames.com
很多jquery插件	http://www.helloweba.com/list.html
不羁虫 - soJs 作品系列	http://www.bujichong.com/sojs/api/index.html
frozenui	http://frozenui.github.io/case.html
黑白棋	http://js-game.github.io/othello
fromone	http://yansm.github.io/fromone/index.html

64. 群员作品

群员作品	地址
MDialog 合肥-M.J]	http://demo.webjyh.com
轮播图上海－冷静]	http://sandbox.runjs.cn/show/do6zlrrk
[广州—坚壳]	http://www.replace5.com
[成都 - 无痕]　感恩节专题	http://www.seejs.com/demos
[球霸天]	http://hacke2.github.io/works
[北京-小数]
[ptf] Magix 工具	http://thx.github.io/magix
[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用	http://thx.github.io/magix
[上海-剧中人]-实验室	http://bh-lay.com/labs
[上海-豪情 ] 作品集合	http://jikeytang.github.io
[成都-feeling]	http://guoshan.sinaapp.com
[上海-angela]
[海南-hank]作品	http://hcjp.github.io/work/demo
[上海-张力]博客	https://github.com/yibuyisheng/blogs/issues
[上海-zenki]作品	http://zkske121.github.io
移动端图案解锁	http://01google.sinaapp.com/locker.html
[合肥-M.J] - MPreview 移动端图片预览组	https://github.com/webjyh/MPreview.mobile
[合肥-M.J] - Mexam 移动端在线做题组	https://github.com/webjyh/Mexam
[北京-苏瑞] - dancer小人	http://letyougo.github.io/dancer
[上海-玄沐]- 个人网站	http://k.swao.cn/js
[厦门-二哲]- 个人博客	http://www.meckodo.com

65. 国外大牛精品

国外大牛精品	地址
pazguille	http://pazguille.me

66. 简历模板

简历模板	地址
不错的个人简历	http://learnshare.github.io/about/index.html
简历	http://hcy2367.github.io/resume
张伦	http://ncuey.sinaapp.com/CrispElite/
简历	https://github.com/hacke2/ResumeSample
翁天信	http://blog.dandyweng.com/2013/07/how-my-website-was-created
动画方式的简历	http://www.webhek.com/misc/interactive-resume
组件丰富简历	http://www.linqing07.com/resume.html
简历池	http://www.mojianli.com/resume/view
haorooms博客	http://www.haorooms.com/about
Justin Young	http://cv.youngdze.com

67. 面试题

面试题	地址
那几个月在找工作（百度，网易游戏）	http://www.nowcoder.com/discuss/3196
2014最新面试题	http://www.html-js.com/article/1743
阿里前端面试题	http://www.w3cfuns.com/thread-5598563-2-1.html
2016校招内推 -- 阿里巴巴前端 -- 三面面试经历
腾讯面试题	http://www.w3cfuns.com/article-5599657-1-1.html
年后跳槽那点事：乐视+金山+360面试之行
阿里前端面试题上线	http://fatesinger.com/2722.html
拉勾网js面试题
前端面试
Web开发笔试面试题大全	http://mianshiti.diandian.com
前端开发面试题
2014最新前端面试题	https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
百度面试	https://github.com/fex-team/interview-questions
面试题	http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177
前端工作面试问题	https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese
前端开发面试题
5个经典的前端面试问题	http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98
最全前端面试问题及答案总结
如何面试一名前端开发工程师？	http://www.html-js.com/article/Large-search-front-team-column%202961
史上最全前端开发面试问题及答案整理	https://github.com/hawx1993/Front-end-Interview-questions
前端实习生面试总结
史上最全前端开发面试问题及答案整理	https://github.com/hawx1993/Front-end-Interview-questions
BAT及各大互联网公司2014前端笔试面试题：JavaScript篇	http://blog.jobbole.com/78738
前端开发面试题大收集	https://github.com/paddingme/Front-end-Web-Development-Interview-Question
收集的前端面试题和答案	https://github.com/qiu-deqing/FE-interview
如何面试前端工程师	http://www.zhihu.com/question/19568008
前端开发面试题	https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
牛客网-笔试面经	http://www.nowcoder.com/discuss?type=2

68. iconfont

iconfont	地址
中文字体	http://www.zhihu.com/question/21253343
淘宝字库	http://iconfont.cn
字体	http://mux.alimama.com/fonts
制作教程	http://iconfont.cn/help/platform.html
zhangxinxu-icommon	http://www.zhangxinxu.com/wordpress/?s=icomoon
icommon	https://icomoon.io/app
用字体在网页中画ICON图标(推荐教程	http://imooc.com/learn/243
字体压缩工具	http://font-spider.org 感谢初级群　[深圳-小鱼] 的推荐

69. 前端开发工具

前端开发工具	地址
IntelliJ IDEA 简体中文专题教程	https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm	http://t.cn/8kZZ1Uy
SublimeText	https://github.com/jikeytang/sublime-text
Atom	https://atom.io
visual studio code	https://code.visualstudio.com

Fiddler	地址
Fiddler调式使用知多少(一深入研究
微信fiddle
微信fiddle	http://gaoboy.com/article/26.html

70. Chrome

Chrome	地址
Google Chrome 官方	https://developer.chrome.com/devtools
Chrome - 基础
Chrome - 进阶
Chrome - 性能
Chrome - 性能进阶
Chrome - 移动
Chrome - 使用技巧	/p/4544738.html
Chrome - Console控制台不完全指南
Chrome - Workspace使浏览器变成IDE	http://c7sky.com/chrome-devtools-workspace.html
network面板	http://www.html-js.com/article/Nothing-blind%202975
chrome开发工具快捷键	http://anti-code.com/devtools-cheatsheet
chrome调试工具常用功能整理	http://www.html-js.com/article/2327
Chrome 开发工具 Workspace 使用	http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace
Chrome神器Vimium快捷键学习记录	http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html
sass调试-w3cplus	http://www.w3cplus.com/sassguide/debug.html
如何更专业的使用Chrome开发者工具-w3cplus	http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html
chrome调试canvas	http://sentsin.com/web/253.html
chrome profiles1	https://developer.chrome.com/devtools/index
chrome profiles2	http://h5dev.uc.cn/article-25-1.html
chrome profiles3
chrome移动版调试	https://developer.chrome.com/devtools/docs/mobile-emulation
chrome调试	http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool
chrome的调试
chrome console 命令详解	https://developer.chrome.com/devtools/docs/commandline-api
查看事件绑定1
查看事件绑定2
神器——Chrome开发者工具(一
奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍	https://xinranliu.me/2015-05-22-qiqu-performance
chrome 开发者工具的 15 个小技巧	http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html
Chrome开发者工具不完全指南	http://1ke.co/course/361
Chrome 开发者工具使用技巧

71. Firebug

Firebug	地址
firebug视频教程	http://www.imooc.com/learn/137
firefox 模拟器	https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE
console.log 命令详解
Firebug入门指南	http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html
Firebug控制台详解	http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

72. 移动,微信调试

移动,微信调试	地址
浏览器端调试安卓	https://openstf.github.io
移动端前端开发调试	http://yujiangshui.com/multidevice-frontend-debug
使用 Chrome 远程调试 Android 设备	https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md
mac移动端调试	http://plus.uc.cn/document/webapp/doc5.html
mac移动端调试	http://www.mihtool.com
无线调试攻略	http://thx.github.io/mobile/debugging-in-mobile
无线调试攻略	http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile
屌爆了,完美调试微信webview(x5	http://www.jianshu.com/p/ccf124f1f74b
微信调试的那些事	http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B
远程console	http://jsconsole.com
微信调试工具	http://blog.qqbrowser.cc
各种真机远程调试方法汇总	https://github.com/jieyou/remote_inspect_web_on_real_device

73. iOS Simulator

iOS Simulator	地址
Simulator	https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Xcode中的iOS模拟器(iOS Simulator的介绍和使用心得	http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary

74. img

img	地址
loading img	http://preloaders.net/en/circular
智图-图片优化平台	http://zhitu.isux.us
在线png优化	https://tinypng.com

75. 生成二维码

生成二维码	地址
生成二维码	http://cli.im

76. 浏览器同步

浏览器同步	地址
puer	https://github.com/leeluolee/puer
liveReload	http://livereload.com
f5	http://getf5.com
File Watchers	http://geek100.com/2608

77. 在线PPT制作

在线PPT制作	地址
nodePPT	http://js8.in/2013/11/16/%E6%8E%A8%E8%8D%90nodeppt%EF%BC%9A%E4%BD%BF%E7%94%A8markdown%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%86%99%E7%BD%91%E9%A1%B5ppt
PPT	https://github.com/ksky521/nodePPT
reveal	https://github.com/hakimel/reveal.js
slippy	https://github.com/Seldaek/slippy

78. 前端导航网站

前端导航网站	地址
界面清爽的前端导航	http://uxbees.com/index.html
前端导航	http://whycss.com
前端网址导航	http://www.daqianduan.com/nav
前端名录	http://sentsin.com/daohang
前端导航	http://123.jser.us
前端开发资源	http://www.css88.com/nav
网址导航	http://www.haourl.cn
前端开发仓库 - 众多效果的收集地	http://code.ciaoca.com
前端资源导航	https://github.com/jnoodle/f2e-collect
F2E 前端导航	http://f2e.im/static/pages/nav/index.html

79. 常用CDN

常用CDN	地址
新浪CDN	http://lib.sinaapp.com
百度静态资源公共库	http://cdn.code.baidu.com
360网站卫士常用前端公共库CDN服务	http://libs.useso.com
Bootstrap中文网开源项目免费 CDN 服务	http://www.bootcdn.cn
开放静态文件 CDN - 七牛	http://staticfile.org
CDN加速 - jq22	http://www.jq22.com/cdn
jQuery CDN	http://code.jquery.com
Google jQuery CDN	http://www.google-jquery-cdn.com
微软CDN	http://www.asp.net/ajax/cdn

80. Git

Git	地址
git-scm	http://git-scm.com
廖雪峰-Git教程	http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
git-for-windows	https://git-for-windows.github.io
GitHub 添加 SSH keys	http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github
gogithub	http://www.worldhello.net/gotgithub/index.html
git常规命令练习	http://pcottle.github.io/learnGitBranching
git的资料整理	https://github.com/xirong/my-git
我所记录的git命令（非常实用）
企业开发git工作流模式探索部分休整	https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md
GitHub 漫游指南	https://github.com/phodal/github-roam
GitHub秘籍	https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md
使用git和github进行协同开发流程	http://livoras.com/post/28
动画方式练习git	http://onlywei.github.io/explain-git-with-d3