web前端开发 | 易学教程

前端性能优化常用方法

阅读更多关于前端性能优化常用方法

网页内容 1.1 减少http请求次数 1.1.1 捆绑文件通过一些现成的库将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。 1.1.2 CSS Sprites 把多个图片拼成一副图片，然后通过CSS来控制需要显示图片的位置（ CSS Sprites Generator ） 1.1.3 Inline images 通过Base64编码的字符串将图片内嵌到网页文本中。（但是只适合用于小图标，大一点的图片就免了） 1.2 减少DNS查询次数 DNS（Domain Name System，域名系统） 1.3 避免页面跳转 1.4 缓存Ajax 1.5 延迟加载这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。 Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。 1.6 提前加载与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。 1.7 减少DOM元素数量

WEB前端常用网站收集

阅读更多关于 WEB前端常用网站收集

WEB前端常用网站收集整理 w3school 、 w3schools 前端里、脚本之家、素材家园 17素材、 frontopen NEC更好的CSS方案、一些常用的 JS 实例 Bootstrap 官网 http://getbootstrap.com/ 、中文官网 http://www.bootcss.com/ 、 Bootsnipp jQuery Write less,do more 　 jQuery中文网 HTML 字符编码 HTML character codes CSS整理与优化工具 12款优秀的 Twitter Bootstrap 组件和工具 40 个超棒的免费 Bootstrap HTML5 网站模板图片轮播： Jssor 图标库： Font Awesome（字符图标） http://www.easyicon.net/ http://findicons.com/ http://preloaders.net/ 分享按钮,同时支持PC端和移动端前端导航站(公共库) 中国传统色彩网页模板：模板之家、模板王展示网站： WHYCSS 、网易摄影其他博客空间： A Good User Interface 、张鑫旭、梦想天空移动开发： eoe移动开发者论坛 SenchaTouch https://www.sencha.com/ http:/

浅谈服务端模板到客户端模板

阅读更多关于浅谈服务端模板到客户端模板

谈起客户端模板技术，要先从服务端MVC说起。服务器端MVC 当客户通过浏览器访问URL，服务器端会获取到客户端传来的URL并通过路由(router)解析URL到不同的控制器(controller)，再通过模板技术将模板中渲染(render)成到页面(HTML)。在开发过程中路由可能由服务器配置，可能自己手写，也可能由框架实现。路由通过获取URL，得知要执行哪个控制器，而控制器再去从模型(model)获取数据，模型在去从数据库(database)获取数据，数据库返回数据到模型，再返回至控制器。于是控制器在通过模板技术将从数据库获取的数据替换模板中预定义的内容。最后在返回给客户端浏览器。这是一个完整的前端交互到路由到MVC的流程。而在模板引擎就是我们的视图(view)部分，接下来，我们来看模板视图。服务器端模板技术接下来我们先看一段服务器端的模板(handlebars)代码： 1 <h1>{{title}}</h1> 2 <ul> 3 {{#names}} 4 <li>{{name}}</li> 5 {{/names}} 6 </ul> 以上是一段handlebars的代码，控制器去从模型中获取以下数据： 1 var data = { 2 "title": "Story", 3 "names": [ 4 {"name": "Tarzan"}, 5 {"name":

2020，职业发展计划

阅读更多关于 2020，职业发展计划

从事游戏开发工作6年了，前3年使用cocos2dx-lua开发手游，后三年根据项目需求使用过Unity、LayaAir、CocosCreator、Egret，还在工作中学习使用了Node.js、Electron、Three.js...每个都会一点，但没有一个深入引擎，这一点让我比较苦恼。一是行业快速发展，为适应不同的业务选择相应的工具。二是自己没有一个明确的方向要钻研哪个方向。曾一度想转做后端，学Erlang，学Golang，学Node。没有足够的毅力和决心吧，没有学好。也没机会边做边学。一般的公司都是会分工明确，美术、策划、前端、后端、后台、运维、商务...想全栈，还是需要长时间的毅力和积累。根据职业发展现状，还是专注做前端吧。前端还是前端，不想还是以前那样，就会拼界面。不被人工智能替代，也会被后生们替代。随着技术的发展，H5 3D需求似乎在增涨。LayaAir、CocosCreator、Egret纷纷退出3D引擎。所以我想2020年开始，专注H5 3D开发。在学习过程中，Three.js比较能方便快捷的快速验证想法。逐步深入学习，WebGL，计算机图形学。最终还是要做产品，目前LayaAir的H5 3D较为成熟，还能打包微信小程序，应用层面先用这个。来源： CSDN 作者： H5 3D游戏开发练习生链接： https://blog.csdn.net/drmadness

前端学习路线图

阅读更多关于前端学习路线图

本人零基础已经顺利实现转行前端，很多人问我前端学习线路图是什么样的，这里分享给大家，希望能帮到你们。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型）现在很多html5的新标签也很有用，需要进行了解实践建议：一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。 2、学点CSS 现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。首先要做的是学习语法，熟悉常见的CSS属性。了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。实践建议：一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话

web前端开发——css

阅读更多关于 web前端开发——css

一、css介绍 1、css是什么？ Cascading Style Sheets缩写，层叠样式表。样式定义如何显示HTML元素，样式通常又会存在于样式表中。 2、为什么需要css？使HTML页面变得美观；将HTML页面的内容与样式分离；提高web开发的工作效率。 3、css的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使页面布局更加灵活减少网页的代码量，增加网页浏览器速度，节省网络带宽运用独立页面的css,有利于网页被搜索引擎收录二、css语法 css语法分为两部分：选择器和声明。如： h3{ width: 300px; color: red; } h3为选择器，{ }内的内容就是声明，它包含了属性与属性值。三、css引入方式 1、引入方式有三种：　　1.行内样式（内联样式）　　2.内接样式（内嵌方式）　　3.外接样式　　　　　　3.1 链接式　　　　3.2 导入式 2、行内样式：直接在标签头里面定义样式。 <!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">这是一个p标签！</p> </body> </html> 3、内接样式：使用<style>标签在<head>标签里面定义内容的样式。 <!doctype

前后端分离

阅读更多关于前后端分离

为什么JavaWeb放弃jsp，去做前后端分离前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想：前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在互联网架构中， web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻。对于后端java工程师：把精力放在java基础，设计模式，jvm原理

学web前端开发写给新手的建议，超实用

阅读更多关于学web前端开发写给新手的建议，超实用

随着互联网的发展，Web前端开发成为目前最火热的岗位。Web前端开发的技术知识也是在不断更新，致使Web前端开发工作变得越来要复杂；以前，只要会编写HTML, CSS 和Java就能够找到一份不错的前端开发工作。而现在，web开发远远不止是简单编码，人们对于互联网的要求也越来越高，web前端开发技能也就更多了。对于Web前端初学者而言，应该如何学习Web前端呢？下文是Web前端开发新手的六个建议和经验技巧，希望能对大家学习前端一些帮助。夯实基础：要成为一名年薪30W的前端工程师，基础一定要掌握牢固，基础知识一问三不知，岂不是要贻笑大方。 css，js基础知识一定要掌握得很熟练，你能使用css实现斑马条纹背景，毛玻璃效果吗？能给图片实现滤镜效果，能实现所有自适应布局效果吗？原型，原型链，闭包是实现设计模式的必备知识，你真的弄懂了吗？闭包导致内存泄漏的原因是什么，你弄明白了吗？ajax跨域的解决方案你可以说几种？2019年了，你还是只告诉我jsonp吗？http协议有了解过吗？如何在http协议中实现不缓存静态资源？现在是2019年了，这些问题老掉牙了。可是我要告诉你的是，掌握好这些老掉牙的基础，就是很重要。上层的技术可以变更的很快，基础变动很慢，投入时间学好基础，性价比很高。深究原理： Angular，React,Vue框架和脚手架的普及，越来越多的前端工程师浮于表面

【最新】SSM框架中的前后端分离

阅读更多关于【最新】SSM框架中的前后端分离

文章目录 1.认识前后端分离 2.分离的四个好处 3.利用Swagger UI来规范书写API文档 1.认识前后端分离在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。由于前后端分离这个概念相对来说刚出现不久，很多人都是只闻其声，不见其形，所以可能会对它产生一些误解，误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。前后端分离大概可以从四个方面来理解：交互形式代码组织方式开发模式数据接口规范流程一、交互形式在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。二、代码组织方式在传统架构模式中，前后端代码存放于同一个代码库中

浅谈移动前端的最佳实践

阅读更多关于浅谈移动前端的最佳实践

前言这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距：这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用文中有误请您提出，以免误人自误技术选型单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

订阅 web前端开发