Shulou(Shulou.com)06/02 Report--

In this article, the editor introduces in detail "what are the classic Web front-end interview questions", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the classic Web front-end interview questions" can help you solve your doubts.

1. CSS,JS code compression

It can be done by using gulp's gulp-uglify,gulp-minify-css module; it can be done by using webpack's UglifyJsPlugin compression plug-in.

2. How to upload the code to the server and transcode testing using webpack?

(1) Code upload: sftp-webpack-plugin can be used, but the subfolders will be extracted, which is not elegant. You can use gulp+webpack to do this.

(2) Transcoding test: webpack uses babel to transcode ES6, and opens devtool: "source-map" to test the browser. Apply karma or mocha for unit testing.

3. What is the process of launching the project?

(1) process recommendations

-simulate the online development environment. The local reverse agent can develop the real environment online. (all can be realized by apache,nginx,nodejs).

-simulate the online test environment. To simulate the online test environment, in fact, you need a test machine with real data. It is recommended that if you do not have the conditions to take daily, you can test it with online data directly. It is just that the program part follows your test environment, and it is best to take daily if you have the conditions.

-A continuously adjustable test environment. Continuously adjustable test environments are divided into two types. One is that the development and testing are all in a local area network segment, and you can bind the hosts directly. If you are not in a network segment, each person is assigned a virtual test machine, which is placed on the company intranet that everyone can access, and the code can be directly distributed to the network.

-an automated online system. Automatic online system, can use Jenkins. If not, you can build a simple online system by yourself. The principle is to extract the latest trunk or master every time you launch, make a tag, mark it with a timestamp, and distribute it to cdn. There are only two functions in the interface: type tag, roll back to a tag, and deploy.

-suitable for front-and back-end development processes. The development process is based on the tools, construction, and framework used by the company. The principle is to develop separately and independently, do not interfere with each other, and can be bound by hosts during continuous adjustment.

(2) simple operational process

-Code is managed by git, new requirements are created, new branches are created, branch development, backbone release

-easy online system, see the previous section

-connect to the publishing system through gulp+webpack, integrate with one click, and locally only care about source code development.

-server of the local environment reverse proxy through webpack

-build a local testing machine based on linux to automatically complete the build+push function

4. Git common commands

Workspace: workspace

Index / Stage: temporary storage area

Repository: warehouse area (or local warehouse)

Remote: remote warehouse

5. Comparison between webpack and gulp

Gulp is a front-end automatic construction tool for standardizing the front-end development process and realizing the front-end separation, modular development, version control, file merging and compression, mock data and other functions. To put it more vividly, "Gulp is like an assembly line of a product. The whole product grows out of nothing and is controlled by the assembly line. On the assembly line, we can manage the product." In addition, Gulp builds the entire development process through task.

Webpack is the most popular modular management and packaging tool for front-end resources. It can package many loose modules according to dependencies and rules into front-end resources that are deployed in a production environment. You can also code-separate modules that are loaded on demand, and then load asynchronously until they are actually needed. Through the conversion of loader, any form of resources can be regarded as modules, such as CommonJs module, AMD module, ES6 module, CSS, picture, JSON, Coffeescript, LESS and so on.

Gulp and Webpack functional implementation comparison: Gulp and Webpack are compared from eight aspects: basic concepts, starting local Server, sass/less precompilation, modular development, file merging and compression, mock data, version control, and component control.

6. What if the webpack package file is too large?

Webpack packages all our files into a JS file, so that even if you are a small project, the packaged file will be very large. You can optimize it by removing unnecessary plug-ins, extracting third-party libraries, code compression, code segmentation, and setting caching.

7. Do not want others to steal your pictures, what should I do to access your server resources?

At present, there are two main methods of hotlink protection:

(1) set Referer: suitable for users who do not want to write code, and also for users who like to develop

(2) signature URL: suitable for users who like to develop

8. How to choose Elvish Map and base64?

Css wizard, used for some small icons is not very many, one is also slightly larger, such as greater than 10K (this is not strictly defined).

Base64, used for small icons, is smaller (compared to the css wizard), it doesn't matter how much. Font icons, for some others to do the icon library (there are also a few to do) is more convenient to use, his icon can only be used in monochrome, icons can only be used in one color.

9. How does webpack introduce third-party libraries?

Take jQuery as an example:

Entry: {

Page: 'path/to/page.js'

Jquery: 'node_modules/jquery/dist/jquery.min.js'

}

New HtmlWebpackPlugin ({

Filename: 'index.html'

Template: 'index.html'

Inject: true

Chunks: ['jquery',' page'] / / insert script tags in order

})

After reading this, the article "what are the classic Web front-end interview questions" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.