前端开发 | 易学教程

html/css面试题（3）

阅读更多关于 html/css面试题（3）

一、一次完整的HTTP事务是怎么一个过程域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户二、HTTPS是如何实现加密 HTTP 协议（HyperText Transfer Protocol，超文本传输协议）：是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。 https 是一种http与SSL证书共同协作构建的网络协议，https优势就在于能够保证网络传输高效的同时，可以很好的维护网络传输过程的安全。如何进行https加密？这涉及到了对 SSL证书的申请，不同类型的网站所需的 SSL证书类型不同，申请这一数字证书需要想数字证书颁发机构验证域名的所有权以及公司相关的信息，这也是为什么网站部署了SSL证书之后就拥有了一个安全可信的形象。完成申请之后，根据申请证书的教程，完成下载以及安装。这就实现了对http到https的转变，即完成了 https加密。三、浏览器是如何渲染页面的先简要概述浏览器渲染的步骤： 1. 处理HTML标记并构建DOM树 2. 处理CSS标记并构建 CSSOM树 3

web前端入门到实战：Html头部meta标签

阅读更多关于 web前端入门到实战：Html头部meta标签

meta元素有4个属性：name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。按照属性设置分类，meta可以分为三类: name属性和content属性组合,构成名称/值对，用于描述网站信息. 标准的meta名称包括application-name、author、description、generator等。示例代码： <meta name="keywords" content="british,typeface,font,fonts"/> 其中keywords和description这两个名称的使用率最高，是搜索引擎优化的主要手段之一，推荐读者使用。 http-equiv属性和content属性组合，设置特定的http指令; 其中content-type、default-style和refresh已经确定,content-language和set-cookie还未正式确定. 此类型meta应该谨慎使用。不推荐使用<meta http-equiv="refresh" content="300"/>,某些搜索引擎遇到此meta时会停止解析页面剩余的部分。<meta http-equiv="default-style"

千万级用户网站门户前端设计

阅读更多关于千万级用户网站门户前端设计

千万级用户网站门户前端设计对于千万级的注册用户的门户项目是前端这块是怎么去实现的，自己在平常的工作中总结了一些经验，也是在不断的挫折中，不断演练的，希望总结出来给大家参考下，和大家一起探讨，一起进步。一、门户设计一般会遇到哪些难点（一）、首页打开时间太慢了在开发一个门户到生产上线后，首页响应时间是检验门户整个系统架构以及开发的重要的一项指标，有时候我们发现在公司测试发现速度都挺快的，怎么到生产首页打开就慢了呢？（二）、页面加载不流畅，总感觉看着不舒服因为门户一般都是偏向于内容和图片类资源比较多，但是我们打开自己的网页，有时候总感觉加载并不是按照我们期望的那样加载得到，顺其自然，总感觉看起来怪怪的。（三）、希望用户缓存的地方未进行缓存很多静态的前端资源，其实在系统未进行更新时候，第一次加载之后，希望缓存到用户的本地，但是因为缓存策略没搞好，经常未进行有效的缓存。（四）、页面的头部尾部经常需要被第三方嵌入因为作为一个比较大的门户站点，可能会让很多小的服务接入进来，但是头部和尾部因为是需要保持风格统一，所以经常需要被第三方进行嵌入。（五）、代码没有进行有效的压缩，导致被窃取因为作为门户站点，前端如果不进行加密的话，代码很容易被别人进行抄袭伪造，而且还很容易清楚里面的业务逻辑，从而很容易仿造和进行攻击。（六）、增量静态资源发布经常门户线上环境需要增加一点小功能

前端学习资源

阅读更多关于前端学习资源

前端学习资源链接下面有些网站是全英文，包括我们在配置环境的过程中也是全英语，其实英文不可怕，可怕的是你害怕面对它，我在配置环境的过程中经常出错，看到红色error就头疼，但也正是我的头疼让我白白浪费了去读懂它的时间，只需要粘贴复制的问题：查词典，百度都可以找到。错误是每一位开发者必须躺过的坑。 1. 前端学习网站和知名博客比较常用的IT网: 博客园： https://www.cnblogs.com/ CSDN： http://www.csdn.net/ 推酷： http://www.tuicool.com/ SegmentFault: https://segmentfault.com/ 深度开源： http://www.open-open.com/ 知乎： https://www.zhihu.com/ 伯乐在线： http://www.jobbole.com/ 伯乐在线git： https://github.com/jobbole 伯乐git-js： https://github.com/jobbole/aw... 掘金： https://juejin.im/timeline 大前端： http://www.daqianduan.com/ 前端里： http://www.yyyweb.com/front 前端开发博客： http://caibaojian.com/

简单的前端-年终总结

阅读更多关于简单的前端-年终总结

2019年总结摘要技术, 学习, 职业, 人际关系, 正文技术从2019年之前我都是使用vue 和 react,当时是对react比较熟悉,因为刚进入新的项目组,项目组中使用react,用了两周时间看大胡子的react 入门文档,就开始开发了. 2019年之后呢, 公司开启了新项目使用vue, 前端这类框架总给人一种长时间不用就会遗忘的感觉,用了几天的时候,看了一下文档, 公司的开发规范也就继续开发了. 期间对vue有了更深的理解, 数据的筛选和数据的强更新, watch和computed 以及 ref dom操作都有了比以往清晰的认识. 还有的就是对项目的结构化,有了更深的认知. 年中的时候,项目进入高强度开发期,我们所有人都是加班赶进度, 技术上没有什么提升, 工作的内容分析需求, 看ui, 写代码, 改bug. 到了年末,我被安排使用trsCMS后台系统, 全程负责新网站的cms后台、模板、栏目、站点、的搭建和对接. 期间使用了JQ算是捡起来很久没用的技术了. 最后的几个月是老项目的维护(react)和新项目的持续开发(vue)目前一直在进行. 学习二月份到五月的时候, 着几个月, 看着vue 官方入门文档, 还有很早买的vue指南书. vue的官方文档, 看了’’教程’’这一个栏目.vue指南书看到了自定义组件讲解. 看书是每个工作日晚上回家从九点看到十点.

web前端——美化效果总结

阅读更多关于 web前端——美化效果总结

概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下 1 图片作为背景要实现的效果是，任意一张图片 "img-page-background.png" ，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建 .page-bg 类： .page-bg { width: 100%; height: 100%; background: url('img-page-background.png') no-repeat; background-size: 100% 100%; } url 指定图片路径， no-repeat 指定图片不平铺， background-size: 100% 100%; 完全占据背景然后在HTML代码中将背景与其他想要显示的内容分两个 <div> 来放置： <!DOCTYPE html> <html> <head> ...... </head> <body> ......  <div class="father-div">  <div class="page-bg"></div>  <div class="page-context"> ...... </div> </div> ...... </body> </html> 最终效果上图，

前端覆盖式发布引发的使用体验提升

阅读更多关于前端覆盖式发布引发的使用体验提升

我们公司前端采用的是覆盖式发布，过程就是：每次上线时构建好前端项目，将构建产物丢给运维，运维直接用新构建直接替换掉线上的版本（一般小作坊应该都是这么搞的...为啥这么搞？我想理由应该是想同的，在此我就不过多解读了）简单粗暴的背后隐患是很大的：假设这么个场景，有用户a和用户b有在使用我们的平台，有一天某时某刻，a正在使用我们的平台，成功登陆后，开始操作balabala，然后a没有关浏览器窗口，也没有关电脑，然后出去嗨了...在a嗨的同时，我们公司可爱的前端同学修复了一个bug，测试好了之后上线了一版，恰巧上线完成之后，b用户也来访问我们的平台，跟a一样的操作，没有出什么问题，但是a这时候继续使用我们平台的时候，问题就来了，发现点击好多页面没有反应，万幸的是a会武术，a打开f12后发现好多js文件404了？什么，我嗨之前不是好好的吗？怎么嗨完回来就gg了... 分析仔细详细详细，这种场景下，用户a的问题是不是偶发还是必然？当然是必然了。。。不要给方案上的缺陷找借口了。。。现在前端开发一般是webpack构建项目，在html只会写一个入口的js文件，多个页面的js文件都会被webapck切分代码在配置中映射起来，通过webpack.require来进行懒加载。比方说用户页面和设置页面，用户访问用户页面（没有打开设置页面），这个时候我们修改设置页面并更新一个新版本

整理下《前端江湖面试》对自己有益的题目。

阅读更多关于整理下《前端江湖面试》对自己有益的题目。

面试题目汇总前言近期在找工作，也在读前端面试江湖这本书，书中整理了很多基础的面试题目，在书中也发现了一些错误。好记性不如烂笔头，于是整理下对自己有益的题目，都是一些较为基础的题目,后期还会更新。时时刻刻勉励自己，注重基础。现在在找工作，初中级前端，如有哪位热心的仁兄公司在招前端，希望@我一下，目标广州，前端路很长，希望一起努力向前。 js初级之操作字符串截取字符串 var a = "www.qdjhu.com中的qdjhu"。考察知识点，substr()第一个参数为起始位置，第二个参数为截取的长度，注意第一个参数为负数则从末尾往前找，第二个参数为负数则返回空字符串，此方法不会修改原字符串，只是查找并返回查找的结果，与slice()方法不同的是，slice()方法第二个参数为结束位置，slice()的第一个参数如果大于第二个参数则返回空字符串。 a.substr(4,5)或者a.slice(4,9) 判断字符串是否是这样组成的，第一个必须是字母，后面的可以使字母，数字，下划线，总长度为5-20。考察知识点，正则。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，数字，下划线。{n}代表重复几次，{n,m}代表重复至少n次，至多m次。 var a = /^[a-zA-Z]{1}\w{4，19}/ 给定一个字符串 "IamWangZhiJun"

移动端前端UI库—Frozen UI、WeUI、SUI Mobile

阅读更多关于移动端前端UI库—Frozen UI、WeUI、SUI Mobile

Frozen UI 自述：简单易用，轻量快捷，为移动端服务的前端框架。主页：http://frozenui.github.io/ 开发团队：QQVIP FD Team Github：https://github.com/frozenui/frozenui Demo：http://frozenui.github.io/frozenui/demo/index.html WeUI 自述：WeUI是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。开发团队：Wechat Official Design Team Github：https://github.com/weui/weui Demo：http://weui.github.io/weui/ SUI Mobile 主页：http://m.sui.taobao.org/ 自述：轻量、小巧、精美的UI库，方便迅速搭建手机H5应用，也非常适合开发跨平台Web App。开发团队：阿里巴巴共享业务事业部UED团队 Github：https://github.com/sdc-alibaba/SUI-Mobile Demo：http://m.sui.taobao.org/demos/ 兼容：兼容到 iOS 6+ 以及 Android 4.0+ 基于 Framework7 进行开发，并参考

vue前端+nodejs后端通讯最简单demo

阅读更多关于 vue前端+nodejs后端通讯最简单demo

vue前端+nodejs后端通讯最简单demo 前言效果演示技术架构前端部分安装部署前端代码运行前端终端后端部分安装部署后端代码：运行后端终端结语项目源码前言本文记录vue前端+nodejs后端通讯最简单的方法，供广大网友最快速进入全栈开发。效果演示本示例效果如下：前端是一个登陆表单，信息提交给后端，后端收到后给前端反馈信息。技术架构前端 vue + axios + wepack 后端 nodejs + express 前端部分安装部署前端安装vue，方式多种，本文使用vue-cli3 + vue ui图形化安装，具体请百度，命令如下：安装 vue-cli3： npm i @vue/cli -g vue图形化安装： vue ui 安装 axios 用于和后端通讯： npm i axios -s 前端代码然后我们打开“App.vue”，把代码改成如下：建立了一个登陆表单，提交按钮点击后向“http://127.0.0.1:3000/login”这个后端地址post表单数据。 < template > < div > < form method = " post " > 账号 : < input type = " text " id = " name " /> < br /> < br /> 密码 : < input type = "

订阅前端开发